[@mantine/core] Checkbox: add data-disabled + change color when disab…

…led on label (#2508)
mantinedev · Sep 24, 2022 · 2c1b3dd · 2c1b3dd
1 parent 865fbde
commit 2c1b3dd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/mantine-core/src/Checkbox/Checkbox.styles.ts b/src/mantine-core/src/Checkbox/Checkbox.styles.ts
@@ -71,6 +71,9 @@ export default createStyles(
         lineHeight: `${_size}px`,
         color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
         cursor: theme.cursorType,
+        '&[data-disabled]': {
+          color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
+        },
       },
 
       input: {

diff --git a/src/mantine-core/src/Checkbox/Checkbox.tsx b/src/mantine-core/src/Checkbox/Checkbox.tsx
@@ -67,6 +67,7 @@ export const Checkbox: CheckboxComponent = forwardRef<HTMLInputElement, Checkbox
       style,
       sx,
       checked,
+      disabled,
       color,
       label,
       indeterminate,
@@ -113,6 +114,7 @@ export const Checkbox: CheckboxComponent = forwardRef<HTMLInputElement, Checkbox
             type="checkbox"
             className={classes.input}
             checked={indeterminate || checked}
+            disabled={disabled}
             {...rest}
             {...contextProps}
           />
@@ -121,7 +123,7 @@ export const Checkbox: CheckboxComponent = forwardRef<HTMLInputElement, Checkbox
         </div>
 
         {label && (
-          <label className={classes.label} htmlFor={uuid}>
+          <label data-disabled={disabled || undefined} className={classes.label} htmlFor={uuid}>
             {label}
           </label>
         )}