refactor: correct MD3 default appbar height (#3192)

callstack · Jun 6, 2022 · 73cb3bc · 73cb3bc
1 parent b983b78
commit 73cb3bc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 27 deletions.
diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx
@@ -88,26 +88,26 @@ const AppbarExample = ({ navigation }: Props) => {
   const renderDefaultOptions = () => (
     <>
       <View style={styles.row}>
-        <TextComponent variant="labelLarge">Left icon</TextComponent>
+        <TextComponent>Left icon</TextComponent>
         <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
       </View>
       {!isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">Subtitle</TextComponent>
+          <TextComponent>Subtitle</TextComponent>
           <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
         </View>
       )}
       <View style={styles.row}>
-        <TextComponent variant="labelLarge">Search icon</TextComponent>
+        <TextComponent>Search icon</TextComponent>
         <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
       </View>
       <View style={styles.row}>
-        <TextComponent variant="labelLarge">More icon</TextComponent>
+        <TextComponent>More icon</TextComponent>
         <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
       </View>
       {isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">Calendar icon</TextComponent>
+          <TextComponent>Calendar icon</TextComponent>
           <Switch
             value={isCenterAlignedMode ? false : showCalendarIcon}
             disabled={isCenterAlignedMode}
@@ -116,16 +116,16 @@ const AppbarExample = ({ navigation }: Props) => {
         </View>
       )}
       <View style={styles.row}>
-        <TextComponent variant="labelLarge">Custom Color</TextComponent>
+        <TextComponent>Custom Color</TextComponent>
         <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
       </View>
       <View style={styles.row}>
-        <TextComponent variant="labelLarge">Exact Dark Theme</TextComponent>
+        <TextComponent>Exact Dark Theme</TextComponent>
         <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
       </View>
       {isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">Elevated</TextComponent>
+          <TextComponent>Elevated</TextComponent>
           <Switch value={showElevated} onValueChange={setShowElevated} />
         </View>
       )}
@@ -154,23 +154,19 @@ const AppbarExample = ({ navigation }: Props) => {
               }
             >
               <View style={styles.row}>
-                <TextComponent variant="labelLarge">
-                  Small (default)
-                </TextComponent>
+                <TextComponent>Small (default)</TextComponent>
                 <RadioButton value="small" />
               </View>
               <View style={styles.row}>
-                <TextComponent variant="labelLarge">Medium</TextComponent>
+                <TextComponent>Medium</TextComponent>
                 <RadioButton value="medium" />
               </View>
               <View style={styles.row}>
-                <TextComponent variant="labelLarge">Large</TextComponent>
+                <TextComponent>Large</TextComponent>
                 <RadioButton value="large" />
               </View>
               <View style={styles.row}>
-                <TextComponent variant="labelLarge">
-                  Center-aligned
-                </TextComponent>
+                <TextComponent>Center-aligned</TextComponent>
                 <RadioButton value="center-aligned" />
               </View>
             </RadioButton.Group>

diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
@@ -30,7 +30,7 @@ type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
    * @supported Available in v3.x with theme version 3
    *
    * Mode of the Appbar.
-   * - `small` - Appbar with default height (56).
+   * - `small` - Appbar with default height (64).
    * - `medium` - Appbar with medium height (112).
    * - `large` - Appbar with large height (152).
    * - `center-aligned` - Appbar with default height and center-aligned title.

diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
@@ -98,14 +98,14 @@ const AppbarContent = ({
 }: Props) => {
   const { fonts, isV3, colors } = theme;
 
-  const subtitleColor = color(titleColor).alpha(0.7).rgb().string();
-
   const titleTextColor = titleColor
     ? titleColor
     : isV3
     ? colors.onSurface
     : white;
 
+  const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string();
+
   const modeContainerStyles = {
     small: styles.v3DefaultContainer,
     medium: styles.v3MediumContainer,

diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts
@@ -52,12 +52,13 @@ type RenderAppbarContentProps = {
 };
 
 export const DEFAULT_APPBAR_HEIGHT = 56;
+const MD3_DEFAULT_APPBAR_HEIGHT = 64;
 
 export const modeAppbarHeight = {
-  small: DEFAULT_APPBAR_HEIGHT,
+  small: MD3_DEFAULT_APPBAR_HEIGHT,
   medium: 112,
   large: 152,
-  'center-aligned': DEFAULT_APPBAR_HEIGHT,
+  'center-aligned': MD3_DEFAULT_APPBAR_HEIGHT,
 };
 
 export const modeTextVariant = {
@@ -101,12 +102,13 @@ export const renderAppbarContent = ({
           style?: StyleProp<ViewStyle>;
           mode?: AppbarModes;
         } = {
-          color:
-            typeof child.props.color !== 'undefined'
-              ? child.props.color
-              : isDark
-              ? white
-              : black,
+          color: isV3
+            ? undefined
+            : typeof child.props.color !== 'undefined'
+            ? child.props.color
+            : isDark
+            ? white
+            : black,
         };
 
         if (child.type === AppbarContent) {