fix(checkbox): make checkbox sizes variants match ui kit

chanzuckerberg · Aug 24, 2022 · 5c5d663 · 5c5d663
1 parent f56bdc4
commit 5c5d663
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 65 deletions.
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -58,12 +58,12 @@ export const Checked: StoryObj<Args> = {
   render: (args) => <CheckboxExample {...args} checked={true} />,
 };
 
-export const Small: StoryObj<Args> = {
-  render: (args) => <CheckboxExample {...args} size="sm" />,
+export const Medium: StoryObj<Args> = {
+  render: (args) => <CheckboxExample {...args} size="md" />,
 };
 
-export const SmallChecked: StoryObj<Args> = {
-  render: (args) => <CheckboxExample {...args} checked={true} size="sm" />,
+export const MediumChecked: StoryObj<Args> = {
+  render: (args) => <CheckboxExample {...args} checked={true} size="md" />,
 };
 
 export const Indeterminate: StoryObj<Args> = {
@@ -122,9 +122,9 @@ export const LongLabels = {
     return (
       <div className={styles['longlabels--grid']}>
         <Checkbox label={label} readOnly />
-        <Checkbox label={label} readOnly size="sm" />
+        <Checkbox label={label} readOnly size="md" />
         <Checkbox disabled label={label} />
-        <Checkbox disabled label={label} size="sm" />
+        <Checkbox disabled label={label} size="md" />
       </div>
     );
   },
@@ -144,7 +144,7 @@ export const LabelsOnly: StoryObj = {
       <CheckboxLabel
         htmlFor="sm-label"
         {...args}
-        size="sm"
+        size="md"
         text="Small label"
       />
       <br />
@@ -157,7 +157,7 @@ export const LabelsOnly: StoryObj = {
       <CheckboxLabel
         {...args}
         htmlFor="long-sm-label"
-        size="sm"
+        size="md"
         text="Long small label lorem ipsum dolor sit amet, consectetur adipiscing elit"
       />
       <br />
@@ -172,7 +172,7 @@ export const LabelsOnly: StoryObj = {
         {...args}
         disabled
         htmlFor="sm-disabled-label"
-        size="sm"
+        size="md"
         text="Small disabled"
       />
       <br />
@@ -187,7 +187,7 @@ export const LabelsOnly: StoryObj = {
         {...args}
         disabled
         htmlFor="long-sm-disabled-label"
-        size="sm"
+        size="md"
         text="Long small disabled label lorem ipsum dolor sit amet, consectetur adipiscing elit"
       />
     </>

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -44,7 +44,7 @@ export type CheckboxProps = Omit<CheckboxInputProps, 'id'> & {
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
     // All remaining props are passed to the `input` element
-    const { className, id, label, size = 'md', disabled, ...other } = props;
+    const { className, id, label, size = 'lg', disabled, ...other } = props;
 
     // When possible, use a visible label through the `label` prop instead.
     // In rare cases where there's no visible label, you must provide an
@@ -59,11 +59,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const generatedId = useUID();
     const checkboxId = id || generatedId;
 
-    const componentClassName = clsx(
-      styles['checkbox'],
-      styles[`checkbox--${size}`],
-      className,
-    );
+    const componentClassName = clsx(styles['checkbox'], className);
 
     return (
       <div className={componentClassName}>