feat: support for maxFontSizeMultiplier

callstack · Apr 17, 2023 · eabd869 · eabd869
1 parent e771197
commit eabd869
Show file tree

Hide file tree

Showing 23 changed files with 60 additions and 4 deletions.
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
@@ -109,6 +109,7 @@ const AppbarContent = ({
   titleRef,
   titleStyle,
   title,
+  titleMaxFontSizeMultiplier,
   mode = 'small',
   theme: themeOverrides,
   testID = 'appbar-content',
@@ -169,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>

diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx
@@ -69,6 +69,7 @@ const AvatarText = ({
   labelStyle,
   color: customColor,
   theme: themeOverrides,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -104,6 +105,7 @@ const AvatarText = ({
           labelStyle,
         ]}
         numberOfLines={1}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
       >
         {label}
       </Text>

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -137,6 +137,7 @@ const Banner = ({
   theme: themeOverrides,
   onShowAnimationFinished = () => {},
   onHideAnimationFinished = () => {},
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -240,6 +241,7 @@ const Banner = ({
               ]}
               accessibilityLiveRegion={visible ? 'polite' : 'none'}
               accessibilityRole="alert"
+              maxFontSizeMultiplier={maxFontSizeMultiplier}
             >
               {children}
             </Text>

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -185,6 +185,7 @@ const Button = ({
   labelStyle,
   testID = 'button',
   accessible,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -366,6 +367,7 @@ const Button = ({
               textStyle,
               labelStyle,
             ]}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
             {children}
           </Text>

diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx
@@ -134,10 +134,12 @@ const CardTitle = ({
   titleStyle,
   titleNumberOfLines = 1,
   titleVariant = 'bodyLarge',
+  titleMaxFontSizeMultiplier,
   subtitle,
   subtitleStyle,
   subtitleNumberOfLines = 1,
   subtitleVariant = 'bodyMedium',
+  subtitleMaxFontSizeMultiplier,
   left,
   leftStyle,
   right,
@@ -168,6 +170,7 @@ const CardTitle = ({
             style={[styles.title, { marginBottom }, titleStyle]}
             numberOfLines={titleNumberOfLines}
             variant={titleVariant}
+            maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
           >
             {title}
           </TitleComponent>
@@ -177,6 +180,7 @@ const CardTitle = ({
             style={[styles.subtitle, subtitleStyle]}
             numberOfLines={subtitleNumberOfLines}
             variant={subtitleVariant}
+            maxFontSizeMultiplier={subtitleMaxFontSizeMultiplier}
           >
             {subtitle}
           </SubtitleComponent>

diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
@@ -181,6 +181,7 @@ const CheckboxItem = ({
             computedStyle,
             labelStyle,
           ]}
+          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         >
           {label}
         </Text>

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -168,6 +168,7 @@ const Chip = ({
   ellipsizeMode,
   compact,
   elevated = false,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -343,6 +344,7 @@ const Chip = ({
               textStyle,
             ]}
             ellipsizeMode={ellipsizeMode}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
             {children}
           </Text>

diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx
@@ -67,13 +67,18 @@ const DataTableCell = ({
   textStyle,
   style,
   numeric,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => (
   <TouchableRipple
     {...rest}
     style={[styles.container, numeric && styles.right, style]}
   >
-    <Text style={textStyle} numberOfLines={1}>
+    <Text
+      style={textStyle}
+      numberOfLines={1}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+    >
       {children}
     </Text>
   </TouchableRipple>

diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx
@@ -94,6 +94,7 @@ const DataTableTitle = ({
   style,
   theme: themeOverrides,
   numberOfLines = 1,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -151,6 +152,7 @@ const DataTableTitle = ({
             textStyle,
           ]}
           numberOfLines={numberOfLines}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {children}
         </Text>

diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx
@@ -104,6 +104,7 @@ const DrawerCollapsedItem = ({
   accessibilityLabel,
   badge = false,
   testID = 'drawer-collapsed-item',
+  labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -224,6 +225,7 @@ const DrawerCollapsedItem = ({
               numberOfLines={2}
               onTextLayout={onTextLayout}
               style={[styles.label, androidLetterSpacingStyle, labelTextStyle]}
+              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
             >
               {label}
             </Text>

diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
@@ -81,6 +81,7 @@ const DrawerItem = ({
   onPress,
   accessibilityLabel,
   right,
+  labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -143,6 +144,7 @@ const DrawerItem = ({
                   ...font,
                 },
               ]}
+              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
             >
               {label}
             </Text>

diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx
@@ -71,6 +71,7 @@ const DrawerSection = ({
   theme: themeOverrides,
   style,
   showDivider = true,
+  titleMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -96,6 +97,7 @@ const DrawerSection = ({
                   ...font,
                 },
               ]}
+              maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
             >
               {title}
             </Text>

diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx
@@ -206,6 +206,7 @@ const AnimatedFAB = ({
   extended = false,
   iconMode = 'dynamic',
   variant = 'primary',
+  labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -479,6 +480,7 @@ const AnimatedFAB = ({
           ]}
           theme={theme}
           testID={`${testID}-text`}
+          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         >
           {label}
         </AnimatedText>

diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
@@ -190,6 +190,7 @@ const FAB = forwardRef<View, Props>(
       customSize,
       mode = 'elevated',
       variant = 'primary',
+      labelMaxFontSizeMultiplier,
       ...rest
     }: Props,
     ref
@@ -315,6 +316,7 @@ const FAB = forwardRef<View, Props>(
                   uppercase && styles.uppercaseLabel,
                   textStyle,
                 ]}
+                maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
               >
                 {label}
               </Text>

diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx
@@ -47,6 +47,7 @@ export type Props = {
     style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
     containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
     labelStyle?: StyleProp<TextStyle>;
+    labelMaxFontSizeMultiplier?: number;
     onPress: (e: GestureResponderEvent) => void;
     size?: 'small' | 'medium';
     testID?: string;
@@ -381,6 +382,7 @@ const FABGroup = ({
                       <Text
                         variant="titleMedium"
                         style={[labelTextStyle, it.labelStyle]}
+                        maxFontSizeMultiplier={it.labelMaxFontSizeMultiplier}
                       >
                         {it.label}
                       </Text>

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -164,6 +164,8 @@ const ListAccordion = ({
   expanded: expandedProp,
   accessibilityLabel,
   pointerEvents = 'none',
+  titleMaxFontSizeMultiplier,
+  descriptionMaxFontSizeMultiplier,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const [expanded, setExpanded] = React.useState<boolean>(
@@ -235,6 +237,7 @@ const ListAccordion = ({
                   },
                   titleStyle,
                 ]}
+                maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
               >
                 {title}
               </Text>
@@ -249,6 +252,7 @@ const ListAccordion = ({
                     },
                     descriptionStyle,
                   ]}
+                  maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
                 >
                   {description}
                 </Text>

diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -146,6 +146,8 @@ const ListItem = ({
   titleEllipsizeMode,
   descriptionEllipsizeMode,
   descriptionStyle,
+  descriptionMaxFontSizeMultiplier,
+  titleMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -183,6 +185,7 @@ const ListItem = ({
           descriptionStyle,
         ]}
         onTextLayout={onDescriptionTextLayout}
+        maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
       >
         {description}
       </Text>
@@ -207,6 +210,7 @@ const ListItem = ({
         ellipsizeMode={titleEllipsizeMode}
         numberOfLines={titleNumberOfLines}
         style={[styles.title, { color: titleColor }, titleStyle]}
+        maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
       >
         {title}
       </Text>

diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx
@@ -31,7 +31,12 @@ export type Props = React.ComponentProps<typeof Text> & {
  * export default MyComponent;
  * ```
  */
-const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
+const ListSubheader = ({
+  style,
+  theme: overrideTheme,
+  maxFontSizeMultiplier,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(overrideTheme);
 
   const textColor = theme.isV3
@@ -44,6 +49,7 @@ const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
     <Text
       variant="bodyMedium"
       numberOfLines={1}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
       {...rest}
       style={[
         styles.container,

diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
@@ -140,6 +140,7 @@ const RadioButtonItem = ({
   mode,
   position = 'trailing',
   labelVariant = 'bodyLarge',
+  labelMaxFontSizeMultiplier,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const radioButtonProps = { value, disabled, status, color, uncheckedColor };
@@ -204,6 +205,7 @@ const RadioButtonItem = ({
                   computedStyle,
                   labelStyle,
                 ]}
+                maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
               >
                 {label}
               </Text>

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -102,6 +102,7 @@ const SegmentedButtonItem = ({
   segment,
   density = 'regular',
   theme: themeOverrides,
+  labelMaxFontSizeMultiplier,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -214,6 +215,7 @@ const SegmentedButtonItem = ({
             style={[styles.label, labelTextStyle]}
             selectable={false}
             numberOfLines={1}
+            maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
           >
             {label}
           </Text>

diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
@@ -143,6 +143,7 @@ const Snackbar = ({
   wrapperStyle,
   style,
   theme: themeOverrides,
+  maxFontSizeMultiplier,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -245,6 +246,7 @@ const Snackbar = ({
         <Text
           variant="bodyMedium"
           style={[styles.content, { color: textColor }]}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {children}
         </Text>

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -111,7 +111,7 @@ const InputLabel = (props: InputLabelProps) => {
         labelTranslationX,
       ]}
     >
-      {labelBackground?.({
+      {/* {labelBackground?.({
         labeled,
         labelLayoutWidth,
         labelStyle,
@@ -122,7 +122,7 @@ const InputLabel = (props: InputLabelProps) => {
         backgroundColor,
         roundness,
         maxFontSizeMultiplier: maxFontSizeMultiplier,
-      })}
+      })} */}
       <AnimatedText
         variant="bodySmall"
         onLayout={onLayoutAnimatedText}