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

…d on label
mantinedev · Sep 20, 2022 · 5ca79e2 · 5ca79e2
1 parent e88b62a
commit 5ca79e2
Show file tree

Hide file tree

Showing 2 changed files with 4 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,7 @@ 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>
         )}