[@mantine/core] Switch: Fix Switch shrinking when large label or desc…

…ription is used (#6531)
mantinedev · Aug 7, 2024 · 4a17e88 · 4a17e88
1 parent 5263671
commit 4a17e88
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/packages/@mantine/core/src/components/Switch/Switch.module.css b/packages/@mantine/core/src/components/Switch/Switch.module.css
@@ -76,6 +76,10 @@
   line-height: 0;
   color: var(--switch-text-color);
 
+  &:where([data-without-labels]) {
+    width: var(--switch-width);
+  }
+
   .input:focus-visible + & {
     outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: 2px;

diff --git a/packages/@mantine/core/src/components/Switch/Switch.story.tsx b/packages/@mantine/core/src/components/Switch/Switch.story.tsx
@@ -1,4 +1,5 @@
 import { IconBadge } from '@tabler/icons-react';
+import { Box } from '../../core';
 import { Group } from '../Group';
 import { Stack } from '../Stack';
 import { Switch } from './Switch';
@@ -119,6 +120,33 @@ export function WithError() {
   );
 }
 
-export function Alignment() {
-  return <Switch />;
+export function Shrinking() {
+  return (
+    <Box bg="blue.1" w={400}>
+      <Switch bg="green" value="svelte" label="Larger Switch" />
+      <Switch
+        bg="green"
+        value="react"
+        label="Same"
+        description="Short description - No Issue"
+        styles={{
+          labelWrapper: { backgroundColor: 'var(--mantine-color-green-2)' },
+        }}
+      />
+      <Switch
+        styles={{
+          labelWrapper: { backgroundColor: 'var(--mantine-color-red-4)' },
+        }}
+        bg="red"
+        value="svelte"
+        label="Smaller"
+        description="Long description, You can see how the Switch is smaller :( Description has to be multiline"
+      />
+      <Switch
+        bg="red"
+        value="svelte"
+        label="Testing if its also broken when the label is  long. Yep, seems a small."
+      />
+    </Box>
+  );
 }
diff --git a/packages/@mantine/core/src/components/Switch/Switch.tsx b/packages/@mantine/core/src/components/Switch/Switch.tsx
@@ -215,7 +215,7 @@ export const Switch = factory<SwitchFactory>((_props, ref) => {
 
       <Box
         aria-hidden="true"
-        mod={{ error, 'label-position': labelPosition }}
+        mod={{ error, 'label-position': labelPosition, 'without-labels': !onLabel && !offLabel }}
         {...getStyles('track')}
       >
         <Box component="span" mod="reduce-motion" {...getStyles('thumb')}>