diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index b6cfd9a64b..a7503cb74f 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -5,6 +5,7 @@ import CheckboxAndroid from './CheckboxAndroid'; import CheckboxIOS from './CheckboxIOS'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; +import type { IconSource } from '../Icon'; export type Props = { /** @@ -35,6 +36,10 @@ export type Props = { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: IconSource; }; /** diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx index 642602b0fa..235f65c601 100644 --- a/src/components/Checkbox/CheckboxAndroid.tsx +++ b/src/components/Checkbox/CheckboxAndroid.tsx @@ -9,6 +9,7 @@ import { import { getAndroidSelectionControlColor } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { $RemoveChildren, ThemeProp } from '../../types'; +import Icon, { IconSource } from '../Icon'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; @@ -41,6 +42,10 @@ export type Props = $RemoveChildren & { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: IconSource; }; // From https://material.io/design/motion/speed.html#duration @@ -59,6 +64,7 @@ const CheckboxAndroid = ({ disabled, onPress, testID, + icon: customIcon, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); @@ -134,13 +140,17 @@ const CheckboxAndroid = ({ theme={theme} > - + {customIcon ? ( + + ) : ( + + )} & { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: IconSource; }; /** @@ -47,6 +52,7 @@ const CheckboxIOS = ({ onPress, theme: themeOverrides, testID, + icon: customIcon, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); @@ -77,13 +83,17 @@ const CheckboxIOS = ({ theme={theme} > - + {customIcon ? ( + + ) : ( + + )} ); diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 92ea124e62..bc6676b0db 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -15,6 +15,7 @@ import CheckboxAndroid from './CheckboxAndroid'; import CheckboxIOS from './CheckboxIOS'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp, MD3TypescaleKey } from '../../types'; +import { IconSource } from '../Icon'; import TouchableRipple, { Props as TouchableRippleProps, } from '../TouchableRipple/TouchableRipple'; @@ -99,6 +100,10 @@ export type Props = { * testID to be used on tests. */ testID?: string; + /** + * custom icon. + */ + icon?: IconSource; /** * Checkbox control position. */ @@ -142,6 +147,7 @@ const CheckboxItem = ({ labelStyle, theme: themeOverrides, testID, + icon, mode, position = 'trailing', accessibilityLabel = label, @@ -154,7 +160,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;