diff --git a/.changeset/upset-ravens-love.md b/.changeset/upset-ravens-love.md new file mode 100644 index 00000000000..ca15bae5be9 --- /dev/null +++ b/.changeset/upset-ravens-love.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Update internal Switch component to require a label. diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index c367ab9c892..8f859c19153 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -347,7 +347,7 @@ const CardHeader = React.forwardRef((props, ref })} > setPlanPeriod(checked ? 'annual' : 'month')} label={localizationKeys('commerce.billedAnnually')} /> diff --git a/packages/clerk-js/src/ui/elements/Switch.tsx b/packages/clerk-js/src/ui/elements/Switch.tsx index a9fb9ffb50f..38ca0b72e03 100644 --- a/packages/clerk-js/src/ui/elements/Switch.tsx +++ b/packages/clerk-js/src/ui/elements/Switch.tsx @@ -5,22 +5,21 @@ import { descriptors, Flex, Text } from '../customizables'; import { common } from '../styledSystem'; interface SwitchProps { - checked?: boolean; + isChecked?: boolean; defaultChecked?: boolean; onChange?: (checked: boolean) => void; - disabled?: boolean; - 'aria-label'?: string; - label?: string | LocalizationKey; + isDisabled?: boolean; + label: string | LocalizationKey; } export const Switch = forwardRef( - ({ checked: controlledChecked, defaultChecked, onChange, disabled = false, label }, ref) => { + ({ isChecked: controlledChecked, defaultChecked, onChange, isDisabled = false, label }, ref) => { const [internalChecked, setInternalChecked] = useState(!!defaultChecked); const isControlled = controlledChecked !== undefined; const checked = isControlled ? controlledChecked : internalChecked; const handleChange = (e: React.ChangeEvent) => { - if (disabled) return; + if (isDisabled) return; if (!isControlled) { setInternalChecked(e.target.checked); } @@ -45,7 +44,7 @@ export const Switch = forwardRef( ( backgroundColor: checked ? t.colors.$primary500 : t.colors.$neutralAlpha150, borderRadius: 999, transition: 'background-color 0.2s', - opacity: disabled ? 0.6 : 1, - cursor: disabled ? 'not-allowed' : 'pointer', + opacity: isDisabled ? 0.6 : 1, + cursor: isDisabled ? 'not-allowed' : 'pointer', outline: 'none', boxSizing: 'border-box', boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.06) inset', @@ -89,19 +88,17 @@ export const Switch = forwardRef( })} /> - {label && ( - ({ - paddingInlineStart: t.sizes.$2, - cursor: disabled ? 'not-allowed' : 'pointer', - userSelect: 'none', - })} - /> - )} + ({ + paddingInlineStart: t.sizes.$2, + cursor: isDisabled ? 'not-allowed' : 'pointer', + userSelect: 'none', + })} + /> ); },