diff --git a/change/@fluentui-react-checkbox-516aaf4f-e5f7-4b32-92ae-51f1774a29df.json b/change/@fluentui-react-checkbox-516aaf4f-e5f7-4b32-92ae-51f1774a29df.json new file mode 100644 index 0000000000000..b3f76736c49bf --- /dev/null +++ b/change/@fluentui-react-checkbox-516aaf4f-e5f7-4b32-92ae-51f1774a29df.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Checkbox's label shouldn't have a pointer cursor when disabled", + "packageName": "@fluentui/react-checkbox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index f7d257712250b..f4ad51ad52c33 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -121,6 +121,7 @@ const useInputStyles = makeStyles({ cursor: 'default', [`& ~ .${checkboxClassNames.label}`]: { + cursor: 'default', color: tokens.colorNeutralForegroundDisabled, '@media (forced-colors: active)': { color: 'GrayText', @@ -156,13 +157,6 @@ const useInputStyles = makeStyles({ large: { width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`, }, - - labelMedium: { - width: `calc(${indicatorSizeMedium} + ${tokens.spacingHorizontalS})`, - }, - labelLarge: { - width: `calc(${indicatorSizeLarge} + ${tokens.spacingHorizontalS})`, - }, }); const useIndicatorStyles = makeStyles({ @@ -183,13 +177,6 @@ const useIndicatorStyles = makeStyles({ pointerEvents: 'none', }, - labelBefore: { - marginLeft: 0, - }, - labelAfter: { - marginRight: 0, - }, - medium: { fontSize: '12px', height: indicatorSizeMedium, @@ -216,10 +203,10 @@ const useLabelStyles = makeStyles({ }, before: { - paddingRight: tokens.spacingHorizontalM, + paddingRight: tokens.spacingHorizontalXS, }, after: { - paddingLeft: tokens.spacingHorizontalM, + paddingLeft: tokens.spacingHorizontalXS, }, // Use a (negative) margin to account for the difference between the indicator's height and the label's line height. @@ -241,15 +228,13 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState const rootStyles = useRootStyles(); state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className); - const { label, labelPosition, shape, size } = state; + const { labelPosition, shape, size } = state; const inputStyles = useInputStyles(); state.input.className = mergeClasses( checkboxClassNames.input, inputStyles.base, inputStyles[size], - label && size === 'medium' && inputStyles.labelMedium, - label && size === 'large' && inputStyles.labelLarge, inputStyles[labelPosition], state.input.className, ); @@ -260,8 +245,6 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], - label && labelPosition === 'before' && indicatorStyles.labelBefore, - label && labelPosition === 'after' && indicatorStyles.labelAfter, shape === 'circular' && indicatorStyles.circular, state.indicator.className, );