Merge pull request #2067 from system-ui/lachlanjc-switch-flex-shrink

components: Fix visual collapsing bug with Switch component
system-ui · Jan 13, 2022 · 02658ae · 02658ae
2 parents cb21246 + b5ac609
commit 02658ae
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/components/src/Switch.js b/packages/components/src/Switch.js
@@ -37,6 +37,7 @@ export const Switch = React.forwardRef(function Switch(
         sx={sx}
         __css={{
           position: 'relative',
+          flexShrink: 0,
           bg: 'gray',
           borderRadius: SIZE,
           height: SIZE + GUTTER * 2,
@@ -64,7 +65,8 @@ export const Switch = React.forwardRef(function Switch(
               transform: 'translateX(100%)',
             },
           },
-        }}>
+        }}
+      >
         <Box />
       </Box>
       <span>{label}</span>

diff --git a/packages/components/test/__snapshots__/index.js.snap b/packages/components/test/__snapshots__/index.js.snap
@@ -1668,6 +1668,9 @@ exports[`Switch renders 1`] = `
   margin: 0;
   min-width: 0;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   background-color: gray;
   border-radius: 18px;
   height: 22px;