feat: support for maxFontSizeMultiplier in text component (#3823)

src/components/Appbar/AppbarContent.tsx

@@ -63,6 +63,10 @@ export type Props = $RemoveChildren<typeof View> & {
    * Custom color for the text.
    */
   color?: string;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
   /**
    * @internal
    */
@@ -105,6 +109,7 @@ const AppbarContent = ({
   titleRef,
   titleStyle,
   title,
+  titleMaxFontSizeMultiplier,
   mode = 'small',
   theme: themeOverrides,
   testID = 'appbar-content',
@@ -165,6 +170,7 @@ const AppbarContent = ({
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
           accessibilityTraits="header"
           testID={`${testID}-title-text`}
+          maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
           {title}
         </Text>

src/components/Avatar/AvatarText.tsx

@@ -37,6 +37,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Style for the title.
    */
   labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   /**
    * @optional
    */
@@ -63,6 +67,7 @@ const AvatarText = ({
   labelStyle,
   color: customColor,
   theme: themeOverrides,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -98,6 +103,7 @@ const AvatarText = ({
           labelStyle,
         ]}
         numberOfLines={1}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
       >
         {label}
       </Text>

src/components/Banner.tsx

@@ -50,6 +50,10 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * Changes Banner shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
@@ -123,6 +127,7 @@ const Banner = ({
   theme: themeOverrides,
   onShowAnimationFinished = () => {},
   onHideAnimationFinished = () => {},
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -226,6 +231,7 @@ const Banner = ({
               ]}
               accessibilityLiveRegion={visible ? 'polite' : 'none'}
               accessibilityRole="alert"
+              maxFontSizeMultiplier={maxFontSizeMultiplier}
             >
               {children}
             </Text>

src/components/Button/Button.tsx

@@ -113,6 +113,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
    */
   contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -170,6 +174,7 @@ const Button = ({
   labelStyle,
   testID = 'button',
   accessible,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -364,6 +369,7 @@ const Button = ({
               textStyle,
               labelStyle,
             ]}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
             {children}
           </Text>

src/components/Card/CardTitle.tsx

@@ -96,6 +96,14 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * @internal
    */
   total?: number;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
+  /**
+   * Specifies the largest possible scale a subtitle font can reach.
+   */
+  subtitleMaxFontSizeMultiplier?: number;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -130,10 +138,12 @@ const CardTitle = ({
   titleStyle,
   titleNumberOfLines = 1,
   titleVariant = 'bodyLarge',
+  titleMaxFontSizeMultiplier,
   subtitle,
   subtitleStyle,
   subtitleNumberOfLines = 1,
   subtitleVariant = 'bodyMedium',
+  subtitleMaxFontSizeMultiplier,
   left,
   leftStyle,
   right,
@@ -164,6 +174,7 @@ const CardTitle = ({
             style={[styles.title, { marginBottom }, titleStyle]}
             numberOfLines={titleNumberOfLines}
             variant={titleVariant}
+            maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
           >
             {title}
           </TitleComponent>
@@ -173,6 +184,7 @@ const CardTitle = ({
             style={[styles.subtitle, subtitleStyle]}
             numberOfLines={subtitleNumberOfLines}
             variant={subtitleVariant}
+            maxFontSizeMultiplier={subtitleMaxFontSizeMultiplier}
           >
             {subtitle}
           </SubtitleComponent>

src/components/Checkbox/CheckboxItem.tsx

@@ -50,7 +50,7 @@ export type Props = {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Specifies the largest possible scale a title font can reach.
+   * Specifies the largest possible scale a label font can reach.
    */
   labelMaxFontSizeMultiplier?: number;
   /**

src/components/Chip/Chip.tsx

@@ -137,6 +137,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Ellipsize Mode for the children text
    */
   ellipsizeMode?: EllipsizeProp;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
 };
 
 /**
@@ -189,6 +193,7 @@ const Chip = ({
   ellipsizeMode,
   compact,
   elevated = false,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -377,6 +382,7 @@ const Chip = ({
               textStyle,
             ]}
             ellipsizeMode={ellipsizeMode}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
             {children}
           </Text>

src/components/DataTable/DataTableCell.tsx

@@ -29,6 +29,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Text content style of the `DataTableCell`.
    */
   textStyle?: StyleProp<TextStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   /**
    * testID to be used on tests.
    */
@@ -65,6 +69,7 @@ const DataTableCell = ({
   textStyle,
   style,
   numeric,
+  maxFontSizeMultiplier,
   testID,
   ...rest
 }: Props) => {
@@ -74,7 +79,11 @@ const DataTableCell = ({
       testID={testID}
       style={[styles.container, numeric && styles.right, style]}
     >
-      <CellContent textStyle={textStyle} testID={testID}>
+      <CellContent
+        textStyle={textStyle}
+        testID={testID}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+      >
         {children}
       </CellContent>
     </TouchableRipple>
@@ -84,8 +93,12 @@ const DataTableCell = ({
 const CellContent = ({
   children,
   textStyle,
+  maxFontSizeMultiplier,
   testID,
-}: Pick<Props, 'children' | 'textStyle' | 'testID'>) => {
+}: Pick<
+  Props,
+  'children' | 'textStyle' | 'testID' | 'maxFontSizeMultiplier'
+>) => {
   if (React.isValidElement(children)) {
     return children;
   }
@@ -94,6 +107,7 @@ const CellContent = ({
     <Text
       style={textStyle}
       numberOfLines={1}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
       testID={`${testID}-text-container`}
     >
       {children}

src/components/DataTable/DataTableTitle.tsx

@@ -46,6 +46,10 @@ export type Props = React.ComponentPropsWithRef<
    * Text content style of the `DataTableTitle`.
    */
   textStyle?: StyleProp<TextStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   /**
    * @optional
    */
@@ -87,6 +91,7 @@ const DataTableTitle = ({
   style,
   theme: themeOverrides,
   numberOfLines = 1,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -144,6 +149,7 @@ const DataTableTitle = ({
             textStyle,
           ]}
           numberOfLines={numberOfLines}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {children}
         </Text>

src/components/Drawer/DrawerCollapsedItem.tsx

@@ -45,6 +45,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
@@ -98,6 +102,7 @@ const DrawerCollapsedItem = ({
   accessibilityLabel,
   badge = false,
   testID = 'drawer-collapsed-item',
+  labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -218,6 +223,7 @@ const DrawerCollapsedItem = ({
               numberOfLines={2}
               onTextLayout={onTextLayout}
               style={[styles.label, androidLetterSpacingStyle, labelTextStyle]}
+              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
             >
               {label}
             </Text>

src/components/Drawer/DrawerItem.tsx

@@ -41,6 +41,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Callback which returns a React element to display on the right side. For instance a Badge.
    */
   right?: (props: { color: string }) => React.ReactNode;
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
   /**
    * Color of the ripple effect.
    */
@@ -81,6 +85,7 @@ const DrawerItem = ({
   onPress,
   accessibilityLabel,
   right,
+  labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -140,6 +145,7 @@ const DrawerItem = ({
                   ...font,
                 },
               ]}
+              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
             >
               {label}
             </Text>

src/components/Drawer/DrawerSection.tsx

@@ -22,6 +22,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Whether to show `Divider` at the end of the section. True by default.
    */
   showDivider?: boolean;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -65,6 +69,7 @@ const DrawerSection = ({
   theme: themeOverrides,
   style,
   showDivider = true,
+  titleMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -90,6 +95,7 @@ const DrawerSection = ({
                   ...font,
                 },
               ]}
+              maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
             >
               {title}
             </Text>

src/components/FAB/AnimatedFAB.tsx

@@ -94,6 +94,10 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * Whether `FAB` should start animation to extend.
    */
   extended: boolean;
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
   /**
    * @supported Available in v5.x with theme version 3
    *
@@ -210,6 +214,7 @@ const AnimatedFAB = ({
   extended = false,
   iconMode = 'dynamic',
   variant = 'primary',
+  labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -490,6 +495,7 @@ const AnimatedFAB = ({
           ]}
           theme={theme}
           testID={`${testID}-text`}
+          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         >
           {label}
         </AnimatedText>