Merge pull request #2417 from WTTJ/fix-toggle-label-alignment

fix: toggle label alignment and toggle zIndex
WTTJ · Mar 12, 2024 · 5b82199 · 5b82199
2 parents 7eb3759 + 578709c
commit 5b82199
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/docs/pages/components/toggle.mdx b/docs/pages/components/toggle.mdx
@@ -63,6 +63,23 @@ function() {
 }
 ```
 
+Or use the `Label` component
+
+```jsx
+function() {
+  const [toggle, setToggle] = React.useState(false)
+
+  return (
+    <Stack>
+     <Label>
+        <Toggle size="sm" checked={toggle} onClick={() => setToggle(!toggle)} />
+        <span>Toggle</span>
+      </Label>
+    </Stack>
+  )
+}
+```
+
 ## Hint
 
 Use Field component to add a `hint`

diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts
@@ -3,8 +3,8 @@ import { CSSObject } from '@xstyled/styled-components'
 import { WuiTheme } from './types'
 
 // To allow for line-height of text in label
-const XS_LINE_HEIGHT_ADJUSTMENTS = '0.40rem'
-const SM_LINE_HEIGHT_ADJUSTMENTS = '0.10rem'
+const XS_LINE_HEIGHT_ADJUSTMENTS = '0.32rem !important'
+const SM_LINE_HEIGHT_ADJUSTMENTS = '0.12rem ! important'
 
 type State = 'default' | 'checked' | 'disabled' | 'sizes'
 

diff --git a/packages/Toggle/src/styles.ts b/packages/Toggle/src/styles.ts
@@ -28,7 +28,7 @@ export const Toggle = styled(Ariakit.Checkbox).withConfig({ shouldForwardProp })
       position: absolute;
       margin: auto;
       transition: medium;
-      z-index: 2;
+      z-index: 1;
     }
 
     &:disabled {