diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index b6cfd9a64b..8f95927c27 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -35,6 +35,10 @@ export type Props = { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: (props: { size: number; color: string }) => JSX.Element; }; /** diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx index 642602b0fa..34948361d5 100644 --- a/src/components/Checkbox/CheckboxAndroid.tsx +++ b/src/components/Checkbox/CheckboxAndroid.tsx @@ -41,6 +41,10 @@ export type Props = $RemoveChildren & { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: (props: { size: number; color: string }) => JSX.Element; }; // From https://material.io/design/motion/speed.html#duration @@ -59,6 +63,7 @@ const CheckboxAndroid = ({ disabled, onPress, testID, + icon: customIcon, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); @@ -134,13 +139,15 @@ const CheckboxAndroid = ({ theme={theme} > - + {customIcon?.({ size: 24, color: selectionControlColor }) || ( + + )} & { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: (props: { size: number; color: string }) => JSX.Element; }; /** @@ -47,6 +51,7 @@ const CheckboxIOS = ({ onPress, theme: themeOverrides, testID, + icon: customIcon, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); @@ -77,13 +82,15 @@ const CheckboxIOS = ({ theme={theme} > - + {customIcon?.({ size: 24, color: checkedColor }) || ( + + )} ); diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 92ea124e62..844748bd5d 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -99,6 +99,10 @@ export type Props = { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: (props: { size: number; color: string }) => JSX.Element; /** * Checkbox control position. */ @@ -142,6 +146,7 @@ const CheckboxItem = ({ labelStyle, theme: themeOverrides, testID, + icon, mode, position = 'trailing', accessibilityLabel = label, @@ -154,7 +159,7 @@ const CheckboxItem = ({ ...props }: Props) => { const theme = useInternalTheme(themeOverrides); - const checkboxProps = { ...props, status, theme, disabled }; + const checkboxProps = { ...props, status, theme, disabled, icon }; const isLeading = position === 'leading'; let checkbox;