From 3999adf876efc4d38741ce3bad8edfa39412b26e Mon Sep 17 00:00:00 2001 From: Brian August Nguyen Date: Wed, 2 Aug 2023 14:20:50 -0700 Subject: [PATCH] style: Updated minor checkbox style (#6942) * Updated minor checkbox changes * Updated MultiSelect snapshot --- .../components/Checkbox/Checkbox.constants.ts | 2 +- .../components/Checkbox/Checkbox.stories.tsx | 4 ++-- .../components/Checkbox/Checkbox.styles.ts | 8 ++++---- app/component-library/components/Checkbox/Checkbox.tsx | 10 +++++++--- .../components/Checkbox/Checkbox.types.ts | 4 ++-- .../Checkbox/__snapshots__/Checkbox.test.tsx.snap | 2 +- .../__snapshots__/MultiSelectItem.test.tsx.snap | 2 +- 7 files changed, 18 insertions(+), 14 deletions(-) diff --git a/app/component-library/components/Checkbox/Checkbox.constants.ts b/app/component-library/components/Checkbox/Checkbox.constants.ts index b88e30509f0..795349e196b 100644 --- a/app/component-library/components/Checkbox/Checkbox.constants.ts +++ b/app/component-library/components/Checkbox/Checkbox.constants.ts @@ -19,5 +19,5 @@ export const SAMPLE_CHECKBOX_PROPS: CheckboxProps = { isChecked: false, isIndeterminate: false, isDisabled: false, - isReadonly: false, + isReadOnly: false, }; diff --git a/app/component-library/components/Checkbox/Checkbox.stories.tsx b/app/component-library/components/Checkbox/Checkbox.stories.tsx index 27e030c78f0..d74ba06af58 100644 --- a/app/component-library/components/Checkbox/Checkbox.stories.tsx +++ b/app/component-library/components/Checkbox/Checkbox.stories.tsx @@ -20,13 +20,13 @@ export const getCheckboxStoryProps = (): CheckboxProps => { storybookPropsGroupID, ); const isDisabledToggle = boolean('isDisabled', false, storybookPropsGroupID); - const isReadonlyToggle = boolean('isReadonly', false, storybookPropsGroupID); + const isReadOnlyToggle = boolean('isReadOnly', false, storybookPropsGroupID); return { isChecked: isCheckedToggle, isIndeterminate: isIndeterminateToggle, isDisabled: isDisabledToggle, - isReadonly: isReadonlyToggle, + isReadOnly: isReadOnlyToggle, onPress: () => console.log("I'm clicked!"), }; }; diff --git a/app/component-library/components/Checkbox/Checkbox.styles.ts b/app/component-library/components/Checkbox/Checkbox.styles.ts index aac59b0267a..28462952b78 100644 --- a/app/component-library/components/Checkbox/Checkbox.styles.ts +++ b/app/component-library/components/Checkbox/Checkbox.styles.ts @@ -17,15 +17,15 @@ import { CheckboxStyleSheetVars } from './Checkbox.types'; */ const styleSheet = (params: { theme: Theme; vars: CheckboxStyleSheetVars }) => { const { vars, theme } = params; - const { style, isChecked, isIndeterminate, isDisabled, isReadonly } = vars; - const backgroundColor = isReadonly + const { style, isChecked, isIndeterminate, isDisabled, isReadOnly } = vars; + const backgroundColor = isReadOnly ? isChecked || isIndeterminate ? theme.colors.icon.alternative : theme.colors.background.default : isChecked || isIndeterminate ? theme.colors.primary.default : theme.colors.background.default; - const borderColor = isReadonly + const borderColor = isReadOnly ? isChecked || isIndeterminate ? theme.colors.icon.alternative : theme.colors.border.default @@ -41,7 +41,7 @@ const styleSheet = (params: { theme: Theme; vars: CheckboxStyleSheetVars }) => { justifyContent: 'center', alignItems: 'center', borderRadius: 4, - borderWidth: 1.5, + borderWidth: 2, opacity: isDisabled ? 0.5 : 1, backgroundColor, borderColor, diff --git a/app/component-library/components/Checkbox/Checkbox.tsx b/app/component-library/components/Checkbox/Checkbox.tsx index 7933f43836d..67a108fcab4 100644 --- a/app/component-library/components/Checkbox/Checkbox.tsx +++ b/app/component-library/components/Checkbox/Checkbox.tsx @@ -23,7 +23,7 @@ const Checkbox = ({ isChecked = false, isIndeterminate = false, isDisabled = false, - isReadonly = false, + isReadOnly = false, ...props }: CheckboxProps) => { const { styles } = useStyles(styleSheet, { @@ -31,7 +31,7 @@ const Checkbox = ({ isChecked, isIndeterminate, isDisabled, - isReadonly, + isReadOnly, }); let iconName; @@ -42,7 +42,11 @@ const Checkbox = ({ } return ( - + {iconName && ( & { isChecked: boolean; isIndeterminate: boolean; isDisabled: boolean; - isReadonly: boolean; + isReadOnly: boolean; }; diff --git a/app/component-library/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/app/component-library/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index e60409225d7..cd3935af721 100644 --- a/app/component-library/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/app/component-library/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Checkbox should render correctly 1`] = ` "backgroundColor": "#FFFFFF", "borderColor": "#BBC0C5", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 2, "height": 20, "justifyContent": "center", "opacity": 1, diff --git a/app/component-library/components/Select/MultiSelect/MultiSelectItem/__snapshots__/MultiSelectItem.test.tsx.snap b/app/component-library/components/Select/MultiSelect/MultiSelectItem/__snapshots__/MultiSelectItem.test.tsx.snap index 2a94cb50805..ad463f1d509 100644 --- a/app/component-library/components/Select/MultiSelect/MultiSelectItem/__snapshots__/MultiSelectItem.test.tsx.snap +++ b/app/component-library/components/Select/MultiSelect/MultiSelectItem/__snapshots__/MultiSelectItem.test.tsx.snap @@ -32,7 +32,7 @@ exports[`MultiSelectItem should render snapshot correctly 1`] = ` "backgroundColor": "#FFFFFF", "borderColor": "#BBC0C5", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 2, "height": 20, "justifyContent": "center", "marginRight": -8,