feat(component): add Badge props to Checkbox component (#1080)

* feat(component): add Badge props to Checkbox component
bigcommerce · Jan 4, 2023 · e53f820 · e53f820
1 parent 76b8f26
commit e53f820
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 26 deletions.
diff --git a/packages/big-design/src/components/Checkbox/Checkbox.tsx b/packages/big-design/src/components/Checkbox/Checkbox.tsx
@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 
 import { typedMemo, warning } from '../../utils';
+import { Badge, BadgeProps } from '../Badge';
 import { FormControlDescription, FormControlDescriptionLinkProps } from '../Form';
 
 import { CheckboxLabel } from './Label';
@@ -25,6 +26,7 @@ interface Props {
   isIndeterminate?: boolean;
   label: React.ReactChild;
   description?: CheckboxDescription | string;
+  badge?: BadgeProps;
 }
 
 interface CheckboxDescription {
@@ -48,6 +50,7 @@ const RawCheckbox: React.FC<CheckboxProps & PrivateProps> = ({
   label,
   forwardedRef,
   style,
+  badge,
   ...props
 }) => {
   const uniqueCheckboxId = useId();
@@ -69,6 +72,7 @@ const RawCheckbox: React.FC<CheckboxProps & PrivateProps> = ({
           id={labelId}
         >
           {label}
+          {badge ? <Badge marginLeft="xSmall" {...badge} /> : null}
         </CheckboxLabel>
       );
     }
@@ -85,7 +89,7 @@ const RawCheckbox: React.FC<CheckboxProps & PrivateProps> = ({
     }
 
     warning('label must be either a string or a CheckboxLabel component.');
-  }, [disabled, hiddenLabel, id, label, labelId]);
+  }, [badge, disabled, hiddenLabel, id, label, labelId]);
 
   const renderedDescription = useMemo(() => {
     if (!description) {

diff --git a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
@@ -248,18 +248,18 @@ exports[`render Checkbox disabled checked 1`] = `
 >
   <input
     aria-checked="true"
-    aria-labelledby=":rg:"
+    aria-labelledby=":rj:"
     checked=""
     class="c1 c2"
     disabled=""
-    id=":rf:"
+    id=":ri:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
     disabled=""
-    for=":rf:"
+    for=":ri:"
   >
     <svg
       aria-hidden="true"
@@ -287,8 +287,8 @@ exports[`render Checkbox disabled checked 1`] = `
       aria-hidden="true"
       class="c7 c8"
       disabled=""
-      for=":rf:"
-      id=":rg:"
+      for=":ri:"
+      id=":rj:"
     >
       Checked
     </label>
@@ -397,17 +397,17 @@ exports[`render Checkbox disabled indeterminate 1`] = `
   class="c0"
 >
   <input
-    aria-labelledby=":rm:"
+    aria-labelledby=":rp:"
     class="c1 c2"
     disabled=""
-    id=":rl:"
+    id=":ro:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
     disabled=""
-    for=":rl:"
+    for=":ro:"
   >
     <svg
       aria-hidden="true"
@@ -435,8 +435,8 @@ exports[`render Checkbox disabled indeterminate 1`] = `
       aria-hidden="true"
       class="c7 c8"
       disabled=""
-      for=":rl:"
-      id=":rm:"
+      for=":ro:"
+      id=":rp:"
     >
       Unchecked
     </label>
@@ -546,17 +546,17 @@ exports[`render Checkbox disabled unchecked 1`] = `
 >
   <input
     aria-checked="false"
-    aria-labelledby=":rj:"
+    aria-labelledby=":rm:"
     class="c1 c2"
     disabled=""
-    id=":ri:"
+    id=":rl:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
     disabled=""
-    for=":ri:"
+    for=":rl:"
   >
     <svg
       aria-hidden="true"
@@ -584,8 +584,8 @@ exports[`render Checkbox disabled unchecked 1`] = `
       aria-hidden="true"
       class="c7 c8"
       disabled=""
-      for=":ri:"
-      id=":rj:"
+      for=":rl:"
+      id=":rm:"
     >
       Checked
     </label>
@@ -694,15 +694,15 @@ exports[`render Checkbox indeterminate 1`] = `
   class="c0"
 >
   <input
-    aria-labelledby=":rd:"
+    aria-labelledby=":rg:"
     class="c1 c2"
-    id=":rc:"
+    id=":rf:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
-    for=":rc:"
+    for=":rf:"
   >
     <svg
       aria-hidden="true"
@@ -728,8 +728,8 @@ exports[`render Checkbox indeterminate 1`] = `
   >
     <label
       class="c7 c8"
-      for=":rc:"
-      id=":rd:"
+      for=":rf:"
+      id=":rg:"
     >
       Unchecked
     </label>
@@ -1196,16 +1196,16 @@ exports[`render Checkbox with description string 1`] = `
 >
   <input
     aria-checked="false"
-    aria-labelledby=":ra:"
+    aria-labelledby=":rd:"
     class="c1 c2"
-    id=":r9:"
+    id=":rc:"
     name="test-group"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
-    for=":r9:"
+    for=":rc:"
   >
     <svg
       aria-hidden="true"
@@ -1231,8 +1231,8 @@ exports[`render Checkbox with description string 1`] = `
   >
     <label
       class="c7 c8"
-      for=":r9:"
-      id=":ra:"
+      for=":rc:"
+      id=":rd:"
     >
       Unchecked
     </label>

diff --git a/packages/big-design/src/components/Checkbox/spec.tsx b/packages/big-design/src/components/Checkbox/spec.tsx
@@ -46,6 +46,23 @@ describe('render Checkbox', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('with badge props', () => {
+    const { container } = render(
+      <Checkbox
+        badge={{
+          label: 'Badge',
+          variant: 'secondary',
+        }}
+        description="description text"
+        label="Unchecked"
+        name="test-group"
+        onChange={() => null}
+      />,
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
   test('with description string', () => {
     const { container } = render(
       <Checkbox

diff --git a/packages/docs/PropTables/CheckboxPropTable.tsx b/packages/docs/PropTables/CheckboxPropTable.tsx
@@ -62,6 +62,19 @@ const checkboxProps: Prop[] = [
       </>
     ),
   },
+  {
+    name: 'badge',
+    types: [
+      <NextLink href="/badge" key="badge-type">
+        BadgeProps
+      </NextLink>,
+    ],
+    description: (
+      <>
+        See <NextLink href="/badge">Badge</NextLink> for usage.
+      </>
+    ),
+  },
 ];
 
 const checkboxDescriptionProps: Prop[] = [

diff --git a/packages/docs/pages/checkbox.tsx b/packages/docs/pages/checkbox.tsx
@@ -134,6 +134,51 @@ const CheckboxPage = () => {
                 </Fragment>
               ),
             },
+            {
+              id: 'badge',
+              title: 'Badge',
+              render: () => (
+                <Fragment key="badge">
+                  <Text>
+                    <Code primary>Checkboxes</Code> support <Code primary>Badge</Code> that display{' '}
+                    status information.
+                  </Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    {function Example() {
+                      const [checked, setChecked] = useState(false);
+                      const handleChange = () => setChecked(!checked);
+
+                      return (
+                        <Form>
+                          <FormGroup>
+                            <Checkbox
+                              badge={{
+                                label: 'warning',
+                                variant: 'warning',
+                              }}
+                              checked={checked}
+                              label={checked ? 'Checked' : 'Unchecked'}
+                              onChange={handleChange}
+                            />
+                            <Checkbox
+                              badge={{
+                                label: 'danger',
+                                variant: 'danger',
+                              }}
+                              disabled={true}
+                              label="Disabled"
+                            />
+                          </FormGroup>
+                        </Form>
+                      );
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
           ]}
         />
       </Panel>