feat: support for maxFontSizeMutliplier on Checkbox.Item (callstack#3791

)
osman-turan · Apr 17, 2023 · 4041942 · 4041942
1 parent 5d445ed
commit 4041942
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
@@ -49,6 +49,10 @@ export type Props = {
  * Additional styles for container View.
  */
  style?: StyleProp<ViewStyle>;
+ /**
+ * Specifies the largest possible scale a title font can reach.
+ */
+ maxFontSizeMultiplier?: number;
  /**
  * Style that is passed to Label element.
  */
@@ -121,6 +125,7 @@ const CheckboxItem = ({
  accessibilityLabel = label,
  disabled,
  labelVariant = 'bodyLarge',
+ maxFontSizeMultiplier = 1.5,
  ...props
 }: Props) => {
  const theme = useInternalTheme(themeOverrides);
@@ -168,6 +173,8 @@ const CheckboxItem = ({
  {isLeading && checkbox}
  <Text
  variant={labelVariant}
+ testID={`${testID}-text`}
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
  style={[
  styles.label,
  !theme.isV3 && styles.font,

diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
@@ -87,3 +87,11 @@ it('disables the row when the prop disabled is true', () => {
  accessibilityState: { disabled: true },
  });
 });
+
+it('should have maxFontSizeMultiplier set to 1.5 by default', () => {
+ const { getByTestId } = render(
+ <Checkbox.Item label="" testID="checkbox-item" status="unchecked" />
+ );
+ const checkboxItemText = getByTestId('checkbox-item-text');
+ expect(checkboxItemText.props.maxFontSizeMultiplier).toBe(1.5);
+});
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
@@ -126,6 +126,7 @@ exports[`can render leading checkbox control 1`] = `
  </View>
  </View>
  <Text
+ maxFontSizeMultiplier={1.5}
  style={
  Array [
  Object {
@@ -156,6 +157,7 @@ exports[`can render leading checkbox control 1`] = `
  ],
  ]
  }
+ testID="undefined-text"
  >
  Default with leading control
  </Text>
@@ -210,6 +212,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
  }
  >
  <Text
+ maxFontSizeMultiplier={1.5}
  style={
  Array [
  Object {
@@ -240,6 +243,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
  ],
  ]
  }
+ testID="undefined-text"
  >
  iOS Checkbox
  </Text>
@@ -409,6 +413,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
  }
  >
  <Text
+ maxFontSizeMultiplier={1.5}
  style={
  Array [
  Object {
@@ -439,6 +444,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
  ],
  ]
  }
+ testID="undefined-text"
  >
  iOS Checkbox
  </Text>
@@ -572,6 +578,7 @@ exports[`renders unchecked 1`] = `
  }
  >
  <Text
+ maxFontSizeMultiplier={1.5}
  style={
  Array [
  Object {
@@ -602,6 +609,7 @@ exports[`renders unchecked 1`] = `
  ],
  ]
  }
+ testID="undefined-text"
  >
  Unchecked Button
  </Text>