fix: appbar content title container adjustments (#3596)

Author: lukewalczak

src/components/Appbar/AppbarContent.tsx

@@ -18,17 +18,22 @@ import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types';
 import Text from '../Typography/Text';
 import { modeTextVariant } from './utils';
 
+type TitleString = {
+  title: string;
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+type TitleElement = { title: React.ReactNode; titleStyle?: never };
+
 export type Props = $RemoveChildren<typeof View> & {
+  // For `title` and `titleStyle` props their types are duplicated due to the generation of documentation.
+  // Appropriate type for them are either `TitleString` or `TitleElement`, depends on `title` type.
   /**
-   * Custom color for the text.
-   */
-  color?: string;
-  /**
-   * Text for the title.
+   * Text or component for the title.
    */
   title: React.ReactNode;
   /**
-   * Style for the title.
+   * Style for the title, if `title` is a string.
    */
   titleStyle?: StyleProp<TextStyle>;
   /**
@@ -49,6 +54,10 @@ export type Props = $RemoveChildren<typeof View> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Custom color for the text.
+   */
+  color?: string;
   /**
    * @internal
    */
@@ -58,7 +67,11 @@ export type Props = $RemoveChildren<typeof View> & {
    * @optional
    */
   theme?: ThemeProp;
-};
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
+} & (TitleString | TitleElement);
 
 /**
  * A component used to display a title and optional subtitle in an appbar.
@@ -92,6 +105,7 @@ const AppbarContent = ({
   title,
   mode = 'small',
   theme: themeOverrides,
+  testID = 'appbar-content',
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -123,30 +137,36 @@ const AppbarContent = ({
       <View
         pointerEvents="box-none"
         style={[styles.container, isV3 && modeContainerStyles[mode], style]}
+        testID={testID}
         {...rest}
       >
-        <Text
-          {...(isV3 && { variant })}
-          ref={titleRef}
-          style={[
-            {
-              color: titleTextColor,
-              ...(isV3
-                ? theme.fonts[variant]
-                : Platform.OS === 'ios'
-                ? theme.fonts.regular
-                : theme.fonts.medium),
-            },
-            !isV3 && styles.title,
-            titleStyle,
-          ]}
-          numberOfLines={1}
-          accessible
-          // @ts-ignore Type '"heading"' is not assignable to type ...
-          accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
-        >
-          {title}
-        </Text>
+        {typeof title === 'string' ? (
+          <Text
+            {...(isV3 && { variant })}
+            ref={titleRef}
+            style={[
+              {
+                color: titleTextColor,
+                ...(isV3
+                  ? theme.fonts[variant]
+                  : Platform.OS === 'ios'
+                  ? theme.fonts.regular
+                  : theme.fonts.medium),
+              },
+              !isV3 && styles.title,
+              titleStyle,
+            ]}
+            numberOfLines={1}
+            accessible
+            // @ts-ignore Type '"heading"' is not assignable to type ...
+            accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
+            testID={`${testID}-title-text`}
+          >
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
         {!isV3 && subtitle ? (
           <Text
             style={[styles.subtitle, { color: subtitleColor }, subtitleStyle]}

src/components/__tests__/Appbar/Appbar.test.js

@@ -14,10 +14,15 @@ import AppbarAction from '../../Appbar/AppbarAction';
 import AppbarBackAction from '../../Appbar/AppbarBackAction';
 import AppbarContent from '../../Appbar/AppbarContent';
 import AppbarHeader from '../../Appbar/AppbarHeader';
-import { getAppbarColor, renderAppbarContent } from '../../Appbar/utils';
+import {
+  getAppbarColor,
+  modeTextVariant,
+  renderAppbarContent,
+} from '../../Appbar/utils';
 import Menu from '../../Menu/Menu';
 import Searchbar from '../../Searchbar';
 import Tooltip from '../../Tooltip/Tooltip';
+import Text from '../../Typography/Text';
 
 jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
 
@@ -272,6 +277,38 @@ describe('AppbarAction', () => {
   });
 });
 
+describe('AppbarContent', () => {
+  ['small', 'medium', 'large', 'center-aligned'].forEach((mode) =>
+    it(`should render text component with appropriate variant for ${mode} mode`, () => {
+      const { getByTestId } = render(
+        <Appbar mode={mode}>
+          <Appbar.Content title="Title" />
+        </Appbar>
+      );
+
+      expect(getByTestId('appbar-content-title-text')).toHaveStyle(
+        getTheme().fonts[modeTextVariant[mode]]
+      );
+    })
+  );
+
+  it('should render component passed to title', () => {
+    const { getByText } = render(
+      <Appbar>
+        <Appbar.Content
+          title={
+            <Text testID="title" variant="displaySmall">
+              Title
+            </Text>
+          }
+        />
+      </Appbar>
+    );
+
+    expect(getByText('Title')).toBeDefined();
+  });
+});
+
 describe('getAppbarColors', () => {
   const elevation = 4;
   const customBackground = 'aquamarine';

src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap

@@ -692,6 +692,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             ],
           ]
         }
+        testID="appbar-content"
       >
         <Text
           accessibilityRole="header"
@@ -727,6 +728,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
               ],
             ]
           }
+          testID="appbar-content-title-text"
         >
           Examples
         </Text>