style: Updated minor checkbox style (#6942)

* Updated minor checkbox changes * Updated MultiSelect snapshot
MetaMask · Aug 2, 2023 · 3999adf · 3999adf
1 parent d5fbad2
commit 3999adf
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -23,15 +23,15 @@ const Checkbox = ({
   isChecked = false,
   isIndeterminate = false,
   isDisabled = false,
-  isReadonly = false,
+  isReadOnly = false,
   ...props
 }: CheckboxProps) => {
   const { styles } = useStyles(styleSheet, {
     style,
     isChecked,
     isIndeterminate,
     isDisabled,
-    isReadonly,
+    isReadOnly,
   });
 
   let iconName;
@@ -42,7 +42,11 @@ const Checkbox = ({
   }
 
   return (
-    <TouchableOpacity style={styles.base} {...props} disabled={isDisabled}>
+    <TouchableOpacity
+      style={styles.base}
+      {...props}
+      disabled={isDisabled || isReadOnly}
+    >
       {iconName && (
         <Icon
           testID={CHECKBOX_ICON_TESTID}

diff --git a/app/component-library/components/Checkbox/Checkbox.types.ts b/app/component-library/components/Checkbox/Checkbox.types.ts
@@ -24,7 +24,7 @@ export interface CheckboxProps extends TouchableOpacityProps {
   /**
    * Optional prop to configure the readonly state.
    */
-  isReadonly?: boolean;
+  isReadOnly?: boolean;
 }
 
 /**
@@ -34,5 +34,5 @@ export type CheckboxStyleSheetVars = Pick<CheckboxProps, 'style'> & {
   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
@@ -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/...components/Select/MultiSelect/MultiSelectItem/__snapshots__/MultiSelectItem.test.tsx.snap b/...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,