diff --git a/change/@fluentui-react-checkbox-fac35afd-0d24-4b2b-ac4d-3224f4437e63.json b/change/@fluentui-react-checkbox-fac35afd-0d24-4b2b-ac4d-3224f4437e63.json new file mode 100644 index 0000000000000..d774e09e11412 --- /dev/null +++ b/change/@fluentui-react-checkbox-fac35afd-0d24-4b2b-ac4d-3224f4437e63.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Simplify Checkbox style selectors using component checked/disabled state", + "packageName": "@fluentui/react-checkbox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-checkbox/etc/react-checkbox.api.md b/packages/react-components/react-checkbox/etc/react-checkbox.api.md index a9f6ea7b129e6..de80a8dea3a2e 100644 --- a/packages/react-components/react-checkbox/etc/react-checkbox.api.md +++ b/packages/react-components/react-checkbox/etc/react-checkbox.api.md @@ -61,7 +61,7 @@ export type CheckboxSlots = { }; // @public -export type CheckboxState = ComponentState & Required>; +export type CheckboxState = ComponentState & Required>; // @public (undocumented) export const renderCheckbox_unstable: (state: CheckboxState) => JSX.Element; diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts index 02a6f857b014c..acb4001a98624 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts +++ b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts @@ -95,4 +95,4 @@ export interface CheckboxOnChangeData { * State used in rendering Checkbox */ export type CheckboxState = ComponentState & - Required>; + Required>; diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx index ab85920cae2a9..5a0b3a488ddcd 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx +++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx @@ -29,7 +29,7 @@ import { useFocusWithin } from '@fluentui/react-tabster'; * @param ref - reference to `` element of Checkbox */ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref): CheckboxState => { - const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props; + const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props; const [checked, setChecked] = useControllableState({ defaultState: props.defaultChecked, @@ -60,6 +60,7 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref