fix: Checkbox's label shouldn't have a pointer cursor when disabled (#…

…25018) * Use the default cursor (not pointer) on the label when the checkbox is disabled * Simplify the styles controlling the padding between the checkbox and label
microsoft · Sep 30, 2022 · d821905 · d821905
1 parent d14f81c
commit d821905
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 21 deletions.
diff --git a/change/@fluentui-react-checkbox-516aaf4f-e5f7-4b32-92ae-51f1774a29df.json 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": "[email protected]",
+  "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
@@ -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,
     );