From adef22602619bbf70cc306f399680bed0bddf21a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 29 May 2023 12:12:55 +0200 Subject: [PATCH] refactor: add prop description and default values --- src/components/Appbar/AppbarContent.tsx | 6 +++++- src/components/Avatar/AvatarText.tsx | 6 +++++- src/components/Banner.tsx | 6 +++++- src/components/Button/Button.tsx | 6 +++++- src/components/Card/CardTitle.tsx | 12 ++++++++++-- src/components/Checkbox/CheckboxItem.tsx | 3 +-- src/components/Chip/Chip.tsx | 6 +++++- src/components/DataTable/DataTableCell.tsx | 6 +++++- src/components/DataTable/DataTableTitle.tsx | 6 +++++- src/components/Drawer/DrawerCollapsedItem.tsx | 6 +++++- src/components/Drawer/DrawerItem.tsx | 6 +++++- src/components/Drawer/DrawerSection.tsx | 6 +++++- src/components/FAB/AnimatedFAB.tsx | 6 +++++- src/components/FAB/FAB.tsx | 6 +++++- src/components/FAB/FABGroup.tsx | 1 + src/components/List/ListAccordion.tsx | 12 ++++++++++-- src/components/List/ListItem.tsx | 12 ++++++++++-- src/components/List/ListSubheader.tsx | 6 +++++- src/components/RadioButton/RadioButtonItem.tsx | 6 +++++- .../SegmentedButtons/SegmentedButtonItem.tsx | 6 +++++- src/components/Snackbar.tsx | 6 +++++- src/components/TextInput/Label/InputLabel.tsx | 3 +-- src/components/Tooltip/Tooltip.tsx | 6 +++++- .../Appbar/__snapshots__/Appbar.test.tsx.snap | 1 + .../__snapshots__/RadioButtonItem.test.tsx.snap | 4 ++++ .../__snapshots__/AnimatedFAB.test.tsx.snap | 3 +++ .../__tests__/__snapshots__/Avatar.test.tsx.snap | 4 ++++ .../__tests__/__snapshots__/Banner.test.tsx.snap | 10 ++++++++++ .../__tests__/__snapshots__/Button.test.tsx.snap | 13 +++++++++++++ .../__tests__/__snapshots__/Chip.test.tsx.snap | 6 ++++++ .../__tests__/__snapshots__/DataTable.test.tsx.snap | 8 ++++++++ .../__snapshots__/DrawerItem.test.tsx.snap | 3 +++ .../__tests__/__snapshots__/FAB.test.tsx.snap | 2 ++ .../__snapshots__/ListAccordion.test.tsx.snap | 8 ++++++++ .../__tests__/__snapshots__/ListItem.test.tsx.snap | 12 ++++++++++++ .../__snapshots__/ListSection.test.tsx.snap | 8 ++++++++ .../__tests__/__snapshots__/Menu.test.tsx.snap | 3 +++ .../__snapshots__/SegmentedButton.test.tsx.snap | 2 ++ .../__tests__/__snapshots__/Snackbar.test.tsx.snap | 3 +++ 39 files changed, 208 insertions(+), 27 deletions(-) diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index 4c51b1d49a..a0211ca5b0 100644 --- a/src/components/Appbar/AppbarContent.tsx +++ b/src/components/Appbar/AppbarContent.tsx @@ -63,6 +63,10 @@ export type Props = $RemoveChildren & { * Custom color for the text. */ color?: string; + /** + * Specifies the largest possible scale a title font can reach. + */ + titleMaxFontSizeMultiplier?: number; /** * @internal */ @@ -105,7 +109,7 @@ const AppbarContent = ({ titleRef, titleStyle, title, - titleMaxFontSizeMultiplier, + titleMaxFontSizeMultiplier = 1.5, mode = 'small', theme: themeOverrides, testID = 'appbar-content', diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx index 9b253ae5c9..d1807f32dd 100644 --- a/src/components/Avatar/AvatarText.tsx +++ b/src/components/Avatar/AvatarText.tsx @@ -37,6 +37,10 @@ export type Props = React.ComponentPropsWithRef & { * Style for the title. */ labelStyle?: StyleProp; + /** + * Specifies the largest possible scale a text font can reach. + */ + maxFontSizeMultiplier?: number; /** * @optional */ @@ -63,7 +67,7 @@ const AvatarText = ({ labelStyle, color: customColor, theme: themeOverrides, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index a7e9cb375c..351eef26c3 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -50,6 +50,10 @@ export type Props = $Omit<$RemoveChildren, '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>; ref?: React.RefObject; /** @@ -123,7 +127,7 @@ const Banner = ({ theme: themeOverrides, onShowAnimationFinished = () => {}, onHideAnimationFinished = () => {}, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 34253ab86c..38b531e2d8 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -113,6 +113,10 @@ export type Props = $Omit, 'mode'> & { * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`. */ contentStyle?: StyleProp; + /** + * Specifies the largest possible scale a text font can reach. + */ + maxFontSizeMultiplier?: number; style?: Animated.WithAnimatedValue>; /** * Style for the button text. @@ -170,7 +174,7 @@ const Button = ({ labelStyle, testID = 'button', accessible, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index b93c92033d..5b1af4377b 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -96,6 +96,14 @@ export type Props = React.ComponentPropsWithRef & { * @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; /** * @optional @@ -130,12 +138,12 @@ const CardTitle = ({ titleStyle, titleNumberOfLines = 1, titleVariant = 'bodyLarge', - titleMaxFontSizeMultiplier, + titleMaxFontSizeMultiplier = 1.5, subtitle, subtitleStyle, subtitleNumberOfLines = 1, subtitleVariant = 'bodyMedium', - subtitleMaxFontSizeMultiplier, + subtitleMaxFontSizeMultiplier = 1.5, left, leftStyle, right, diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index ebdac1a845..4ee40d8b52 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -50,7 +50,7 @@ export type Props = { */ style?: StyleProp; /** - * Specifies the largest possible scale a title font can reach. + * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; /** @@ -181,7 +181,6 @@ const CheckboxItem = ({ computedStyle, labelStyle, ]} - maxFontSizeMultiplier={labelMaxFontSizeMultiplier} > {label} diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index fe7dbe9fb3..1b7f8fd044 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -137,6 +137,10 @@ export type Props = $Omit, 'mode'> & { * Ellipsize Mode for the children text */ ellipsizeMode?: EllipsizeProp; + /** + * Specifies the largest possible scale a text font can reach. + */ + maxFontSizeMultiplier?: number; }; /** @@ -189,7 +193,7 @@ const Chip = ({ ellipsizeMode, compact, elevated = false, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx index 131d4bcd01..54e838ec13 100644 --- a/src/components/DataTable/DataTableCell.tsx +++ b/src/components/DataTable/DataTableCell.tsx @@ -29,6 +29,10 @@ export type Props = $RemoveChildren & { * Text content style of the `DataTableCell`. */ textStyle?: StyleProp; + /** + * Specifies the largest possible scale a text font can reach. + */ + maxFontSizeMultiplier?: number; }; /** @@ -62,7 +66,7 @@ const DataTableCell = ({ textStyle, style, numeric, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, ...rest }: Props) => ( ; + /** + * Specifies the largest possible scale a text font can reach. + */ + maxFontSizeMultiplier?: number; /** * @optional */ @@ -87,7 +91,7 @@ const DataTableTitle = ({ style, theme: themeOverrides, numberOfLines = 1, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index 0696af4dca..61022ccaab 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -45,6 +45,10 @@ export type Props = React.ComponentPropsWithRef & { * 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,7 +102,7 @@ const DrawerCollapsedItem = ({ accessibilityLabel, badge = false, testID = 'drawer-collapsed-item', - labelMaxFontSizeMultiplier, + labelMaxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index a83cfb51f3..cbfa988498 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -41,6 +41,10 @@ export type Props = React.ComponentPropsWithRef & { * 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,7 +85,7 @@ const DrawerItem = ({ onPress, accessibilityLabel, right, - labelMaxFontSizeMultiplier, + labelMaxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index 7f4ae97a83..df10112a74 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -22,6 +22,10 @@ export type Props = React.ComponentPropsWithRef & { * 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; /** * @optional @@ -65,7 +69,7 @@ const DrawerSection = ({ theme: themeOverrides, style, showDivider = true, - titleMaxFontSizeMultiplier, + titleMaxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index 0608922624..6c40883563 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -94,6 +94,10 @@ export type Props = $Omit<$RemoveChildren, '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,7 +214,7 @@ const AnimatedFAB = ({ extended = false, iconMode = 'dynamic', variant = 'primary', - labelMaxFontSizeMultiplier, + labelMaxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index cc6f09274a..039f168743 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -128,6 +128,10 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { * Color mappings variant for combinations of container and icon colors. */ variant?: 'primary' | 'secondary' | 'tertiary' | 'surface'; + /** + * Specifies the largest possible scale a label font can reach. + */ + labelMaxFontSizeMultiplier?: number; style?: Animated.WithAnimatedValue>; /** * @optional @@ -193,7 +197,7 @@ const FAB = forwardRef( customSize, mode = 'elevated', variant = 'primary', - labelMaxFontSizeMultiplier, + labelMaxFontSizeMultiplier = 1.5, ...rest }: Props, ref diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index 58ddbd02ff..55d3a7407f 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -34,6 +34,7 @@ export type Props = { * - `style`: pass additional styles for the fab item, for example, `backgroundColor` * - `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` @supported Available in 5.x * - `labelStyle`: pass additional styles for the fab item label, for example, `fontSize` + * - `labelMaxFontSizeMultiplier`: specifies the largest possible scale a title font can reach. * - `onPress`: callback that is called when `FAB` is pressed (required) * - `onLongPress`: callback that is called when `FAB` is long pressed * - `toggleStackOnLongPress`: callback that is called when `FAB` is long pressed diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 79b52adea8..62f24a951d 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -91,6 +91,14 @@ export type Props = { * exceed this number. */ descriptionNumberOfLines?: number; + /** + * Specifies the largest possible scale a title font can reach. + */ + titleMaxFontSizeMultiplier?: number; + /** + * Specifies the largest possible scale a description font can reach. + */ + descriptionMaxFontSizeMultiplier?: number; /** * Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion. */ @@ -167,8 +175,8 @@ const ListAccordion = ({ expanded: expandedProp, accessibilityLabel, pointerEvents = 'none', - titleMaxFontSizeMultiplier, - descriptionMaxFontSizeMultiplier, + titleMaxFontSizeMultiplier = 1.5, + descriptionMaxFontSizeMultiplier = 1.5, }: Props) => { const theme = useInternalTheme(themeOverrides); const [expanded, setExpanded] = React.useState( diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 717f9058d1..c685c342cd 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -95,6 +95,14 @@ export type Props = $RemoveChildren & { * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode) */ descriptionEllipsizeMode?: EllipsizeProp; + /** + * Specifies the largest possible scale a title font can reach. + */ + titleMaxFontSizeMultiplier?: number; + /** + * Specifies the largest possible scale a description font can reach. + */ + descriptionMaxFontSizeMultiplier?: number; }; /** @@ -132,8 +140,8 @@ const ListItem = ({ titleEllipsizeMode, descriptionEllipsizeMode, descriptionStyle, - descriptionMaxFontSizeMultiplier, - titleMaxFontSizeMultiplier, + descriptionMaxFontSizeMultiplier = 1.5, + titleMaxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx index 3bfb2d07a7..9c61f544f0 100644 --- a/src/components/List/ListSubheader.tsx +++ b/src/components/List/ListSubheader.tsx @@ -16,6 +16,10 @@ export type Props = React.ComponentProps & { * Style that is passed to Text element. */ style?: StyleProp; + /** + * Specifies the largest possible scale a text font can reach. + */ + maxFontSizeMultiplier?: number; }; /** @@ -34,7 +38,7 @@ export type Props = React.ComponentProps & { const ListSubheader = ({ style, theme: overrideTheme, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, ...rest }: Props) => { const theme = useInternalTheme(overrideTheme); diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx index 9788437fb7..adb7c9d98e 100644 --- a/src/components/RadioButton/RadioButtonItem.tsx +++ b/src/components/RadioButton/RadioButtonItem.tsx @@ -76,6 +76,10 @@ export type Props = { * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ labelVariant?: keyof typeof MD3TypescaleKey; + /** + * Specifies the largest possible scale a label font can reach. + */ + labelMaxFontSizeMultiplier?: number; /** * @optional */ @@ -133,7 +137,7 @@ const RadioButtonItem = ({ mode, position = 'trailing', labelVariant = 'bodyLarge', - labelMaxFontSizeMultiplier, + labelMaxFontSizeMultiplier = 1.5, }: Props) => { const theme = useInternalTheme(themeOverrides); const radioButtonProps = { diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx index 54c0604e3f..ec073cfcc0 100644 --- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx +++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx @@ -79,6 +79,10 @@ export type Props = { * Density is applied to the height, to allow usage in denser UIs. */ density?: 'regular' | 'small' | 'medium' | 'high'; + /** + * Specifies the largest possible scale a label font can reach. + */ + labelMaxFontSizeMultiplier?: number; style?: StyleProp; /** * Style for the button label. @@ -111,7 +115,7 @@ const SegmentedButtonItem = ({ segment, density = 'regular', theme: themeOverrides, - labelMaxFontSizeMultiplier, + labelMaxFontSizeMultiplier = 1.5, }: Props) => { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index da59053f14..02425164e5 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -72,6 +72,10 @@ export type Props = $Omit, 'mode'> & { * Changes Snackbar 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 for the wrapper of the snackbar */ @@ -151,7 +155,7 @@ const Snackbar = ({ wrapperStyle, style, theme: themeOverrides, - maxFontSizeMultiplier, + maxFontSizeMultiplier = 1.5, rippleColor, testID, ...rest diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index 4110212c77..df5ade3812 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -114,7 +114,7 @@ const InputLabel = (props: InputLabelProps) => { labelTranslationX, ]} > - {/* {labelBackground?.({ + {labelBackground?.({ labeled, labelLayoutWidth, labelStyle, @@ -127,7 +127,6 @@ const InputLabel = (props: InputLabelProps) => { maxFontSizeMultiplier: maxFontSizeMultiplier, testID, })} - })} */} { const isWeb = Platform.OS === 'web'; diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 4262db1db3..d5a507f3d2 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -670,6 +670,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A accessibilityRole="header" accessibilityTraits="header" accessible={true} + maxFontSizeMultiplier={1.5} numberOfLines={1} style={ [ diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index 00f2f3aa16..a01a34e5a6 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -145,6 +145,7 @@ exports[`can render leading radio button control 1`] = `