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

…d on label
mantinedev · Sep 21, 2022 · 833620c · 833620c
1 parent e88b62a
commit 833620c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/mantine-core/src/Switch/Switch.styles.ts b/src/mantine-core/src/Switch/Switch.styles.ts
@@ -163,6 +163,9 @@ export default createStyles((theme, { size, radius, color }: SwitchStylesParams)
       paddingLeft: theme.spacing.sm,
       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],
+      },
     },
 
     trackLabel: {

diff --git a/src/mantine-core/src/Switch/Switch.tsx b/src/mantine-core/src/Switch/Switch.tsx
@@ -132,7 +132,11 @@ export const Switch: SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>
         </div>
 
         {label && (
-          <div data-testid="label" className={classes.label}>
+          <div
+            data-testid="label"
+            data-disabled={rest.disabled || undefined}
+            className={classes.label}
+          >
             {label}
           </div>
         )}