diff --git a/packages/big-design/src/components/Checkbox/Checkbox.tsx b/packages/big-design/src/components/Checkbox/Checkbox.tsx index 67b70a9c8..85add3620 100644 --- 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 = ({ label, forwardedRef, style, + badge, ...props }) => { const uniqueCheckboxId = useId(); @@ -69,6 +72,7 @@ const RawCheckbox: React.FC = ({ id={labelId} > {label} + {badge ? : null} ); } @@ -85,7 +89,7 @@ const RawCheckbox: React.FC = ({ } 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 index df4a201b8..c7bb6aa35 100644 --- 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`] = ` > @@ -397,17 +397,17 @@ exports[`render Checkbox disabled indeterminate 1`] = ` class="c0" > @@ -546,17 +546,17 @@ exports[`render Checkbox disabled unchecked 1`] = ` > @@ -694,15 +694,15 @@ exports[`render Checkbox indeterminate 1`] = ` class="c0" >