feat: support for titleMaxFontSizeMultiplier (#3727)

callstack · Mar 6, 2023 · 43a9b17 · 43a9b17
1 parent db04a8f
commit 43a9b17
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 42 deletions.
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
@@ -52,6 +52,10 @@ export type Props = {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
   /**
    * @optional
    */
@@ -113,11 +117,12 @@ const MenuItem = ({
   onPress,
   style,
   contentStyle,
-  testID,
+  testID = 'menu-item',
   titleStyle,
   accessibilityLabel,
   accessibilityState,
   theme: themeOverrides,
+  titleMaxFontSizeMultiplier = 1.5,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { titleColor, iconColor, underlayColor } = getMenuItemColor({
@@ -188,7 +193,9 @@ const MenuItem = ({
             variant="bodyLarge"
             selectable={false}
             numberOfLines={1}
+            testID={`${testID}-title`}
             style={[!isV3 && styles.title, titleTextStyle, titleStyle]}
+            maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
           >
             {title}
           </Text>

diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx
@@ -9,6 +9,65 @@ import { black, white } from '../../styles/themes/v2/colors';
 import Menu from '../Menu/Menu';
 import { getMenuItemColor } from '../Menu/utils';
 
+describe('Menu Item', () => {
+  it('renders menu item', () => {
+    const tree = renderer
+      .create(
+        <>
+          <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
+          <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
+          <Menu.Item
+            leadingIcon="content-cut"
+            onPress={() => {}}
+            title="Cut"
+            disabled
+          />
+          <Menu.Item
+            leadingIcon="content-copy"
+            onPress={() => {}}
+            title="Copy"
+            disabled
+          />
+          <Menu.Item onPress={() => {}} title="Paste" />
+        </>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should have titleMaxFontSizeMultiplier passed to title', () => {
+    const labelMaxFontSizeMultiplier = 2;
+
+    const { getByTestId } = render(
+      <Menu.Item
+        titleMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+        leadingIcon="content-cut"
+        onPress={() => {}}
+        title="Cut"
+      />
+    );
+
+    expect(getByTestId('menu-item-title').props.maxFontSizeMultiplier).toBe(
+      labelMaxFontSizeMultiplier
+    );
+  });
+
+  it('accepts different values for accessibilityState', () => {
+    const { getByTestId } = render(
+      <Menu.Item
+        accessibilityState={{ checked: true }}
+        title="Option 1"
+        testID="touchable"
+      />
+    );
+
+    expect(getByTestId('touchable').props.accessibilityState).toMatchObject({
+      checked: true,
+    });
+  });
+});
+
 describe('getMenuItemColor - title color', () => {
   it('should return disabled color if disabled, for theme version 3', () => {
     expect(
@@ -145,43 +204,3 @@ describe('getMenuItemColor - underlay color', () => {
     });
   });
 });
-
-it('renders menu item', () => {
-  const tree = renderer
-    .create(
-      <>
-        <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
-        <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
-        <Menu.Item
-          leadingIcon="content-cut"
-          onPress={() => {}}
-          title="Cut"
-          disabled
-        />
-        <Menu.Item
-          leadingIcon="content-copy"
-          onPress={() => {}}
-          title="Copy"
-          disabled
-        />
-        <Menu.Item onPress={() => {}} title="Paste" />
-      </>
-    )
-    .toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('accepts different values for accessibilityState', () => {
-  const { getByTestId } = render(
-    <Menu.Item
-      accessibilityState={{ checked: true }}
-      title="Option 1"
-      testID="touchable"
-    />
-  );
-
-  expect(getByTestId('touchable').props.accessibilityState).toMatchObject({
-    checked: true,
-  });
-});
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -337,6 +337,7 @@ Array [
                     ],
                   ]
                 }
+                testID="menu-item"
               >
                 <View
                   style={
@@ -365,6 +366,7 @@ Array [
                     }
                   >
                     <Text
+                      maxFontSizeMultiplier={1.5}
                       numberOfLines={1}
                       selectable={false}
                       style={
@@ -397,6 +399,7 @@ Array [
                           ],
                         ]
                       }
+                      testID="menu-item-title"
                     >
                       Undo
                     </Text>
@@ -441,6 +444,7 @@ Array [
                     ],
                   ]
                 }
+                testID="menu-item"
               >
                 <View
                   style={
@@ -469,6 +473,7 @@ Array [
                     }
                   >
                     <Text
+                      maxFontSizeMultiplier={1.5}
                       numberOfLines={1}
                       selectable={false}
                       style={
@@ -501,6 +506,7 @@ Array [
                           ],
                         ]
                       }
+                      testID="menu-item-title"
                     >
                       Redo
                     </Text>
@@ -1020,6 +1026,7 @@ Array [
                     ],
                   ]
                 }
+                testID="menu-item"
               >
                 <View
                   style={
@@ -1048,6 +1055,7 @@ Array [
                     }
                   >
                     <Text
+                      maxFontSizeMultiplier={1.5}
                       numberOfLines={1}
                       selectable={false}
                       style={
@@ -1080,6 +1088,7 @@ Array [
                           ],
                         ]
                       }
+                      testID="menu-item-title"
                     >
                       Undo
                     </Text>
@@ -1124,6 +1133,7 @@ Array [
                     ],
                   ]
                 }
+                testID="menu-item"
               >
                 <View
                   style={
@@ -1152,6 +1162,7 @@ Array [
                     }
                   >
                     <Text
+                      maxFontSizeMultiplier={1.5}
                       numberOfLines={1}
                       selectable={false}
                       style={
@@ -1184,6 +1195,7 @@ Array [
                           ],
                         ]
                       }
+                      testID="menu-item-title"
                     >
                       Redo
                     </Text>

diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders menu item 1`] = `
+exports[`Menu Item renders menu item 1`] = `
 Array [
   <View
     accessibilityRole="menuitem"
@@ -40,6 +40,7 @@ Array [
         ],
       ]
     }
+    testID="menu-item"
   >
     <View
       style={
@@ -116,6 +117,7 @@ Array [
         }
       >
         <Text
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           selectable={false}
           style={
@@ -148,6 +150,7 @@ Array [
               ],
             ]
           }
+          testID="menu-item-title"
         >
           Redo
         </Text>
@@ -192,6 +195,7 @@ Array [
         ],
       ]
     }
+    testID="menu-item"
   >
     <View
       style={
@@ -268,6 +272,7 @@ Array [
         }
       >
         <Text
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           selectable={false}
           style={
@@ -300,6 +305,7 @@ Array [
               ],
             ]
           }
+          testID="menu-item-title"
         >
           Undo
         </Text>
@@ -344,6 +350,7 @@ Array [
         ],
       ]
     }
+    testID="menu-item"
   >
     <View
       style={
@@ -420,6 +427,7 @@ Array [
         }
       >
         <Text
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           selectable={false}
           style={
@@ -452,6 +460,7 @@ Array [
               ],
             ]
           }
+          testID="menu-item-title"
         >
           Cut
         </Text>
@@ -496,6 +505,7 @@ Array [
         ],
       ]
     }
+    testID="menu-item"
   >
     <View
       style={
@@ -572,6 +582,7 @@ Array [
         }
       >
         <Text
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           selectable={false}
           style={
@@ -604,6 +615,7 @@ Array [
               ],
             ]
           }
+          testID="menu-item-title"
         >
           Copy
         </Text>
@@ -648,6 +660,7 @@ Array [
         ],
       ]
     }
+    testID="menu-item"
   >
     <View
       style={
@@ -676,6 +689,7 @@ Array [
         }
       >
         <Text
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           selectable={false}
           style={
@@ -708,6 +722,7 @@ Array [
               ],
             ]
           }
+          testID="menu-item-title"
         >
           Paste
         </Text>