Add togglePosition prop to Toggle component (#1509)

seek-oss · Jun 18, 2024 · 16bc197 · 16bc197
1 parent be8cab4
commit 16bc197
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 78 deletions.
diff --git a/.changeset/few-planets-invite.md b/.changeset/few-planets-invite.md
@@ -0,0 +1,17 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - Toggle
+---
+
+**Toggle:** Add `togglePosition` prop
+
+Introduces the `togglePosition` prop, enabling the toggle to either be `leading` or `trailing` its label text.
+
+**EXAMPLE USAGE:**
+```jsx
+<Toggle togglePosition="trailing" label="Label" />
+```
diff --git a/packages/braid-design-system/src/lib/components/Toggle/Toggle.docs.tsx b/packages/braid-design-system/src/lib/components/Toggle/Toggle.docs.tsx
@@ -58,6 +58,41 @@ const docs: ComponentDocs = {
           </Stack>,
         ),
     },
+    {
+      label: 'Toggle position',
+      description: (
+        <>
+          <Text>
+            By default, the position of the toggle relative to the label text
+            will be determined by its <Strong>align</Strong> prop.
+          </Text>
+          <Text>
+            This can be overridden by setting the{' '}
+            <Strong>togglePosition</Strong> prop to either{' '}
+            <Strong>leading</Strong> or <Strong>trailing</Strong>.
+          </Text>
+        </>
+      ),
+      Example: ({ id, getState, toggleState }) =>
+        source(
+          <Stack space="large" dividers>
+            <Toggle
+              label="Leading"
+              id={`${id}_leading`}
+              on={getState('toggleLeading')}
+              onChange={() => toggleState('toggleLeading')}
+              togglePosition="leading"
+            />
+            <Toggle
+              label="Trailing"
+              id={`${id}_trailing`}
+              on={getState('toggleTrailing')}
+              onChange={() => toggleState('toggleTrailing')}
+              togglePosition="trailing"
+            />
+          </Stack>,
+        ),
+    },
     {
       label: 'Sizes',
       description: (

diff --git a/packages/braid-design-system/src/lib/components/Toggle/Toggle.gallery.tsx b/packages/braid-design-system/src/lib/components/Toggle/Toggle.gallery.tsx
@@ -30,6 +30,19 @@ export const galleryItems: GalleryComponent = {
           />,
         ),
     },
+    {
+      label: 'Toggle Position: "leading" | "trailing"',
+      Example: ({ id, getState, toggleState }) =>
+        source(
+          <Toggle
+            togglePosition="trailing"
+            label="Trailing toggle"
+            id={id}
+            on={getState('toggle')}
+            onChange={() => toggleState('toggle')}
+          />,
+        ),
+    },
     {
       label: 'Toggle Alignment: "left" | "justify" | "right"',
       Example: ({ id, getState, toggleState }) =>

diff --git a/packages/braid-design-system/src/lib/components/Toggle/Toggle.screenshots.tsx b/packages/braid-design-system/src/lib/components/Toggle/Toggle.screenshots.tsx
@@ -32,7 +32,7 @@ export const screenshots: ComponentScreenshot = {
       ),
     },
     {
-      label: 'Right aligned',
+      label: 'Right aligned with default toggle position',
       Container: ({ children }) => (
         <div style={{ maxWidth: '300px' }}>{children}</div>
       ),
@@ -47,7 +47,7 @@ export const screenshots: ComponentScreenshot = {
       ),
     },
     {
-      label: 'Justified',
+      label: 'Justified with default toggle position',
       Container: ({ children }) => (
         <div style={{ maxWidth: '300px' }}>{children}</div>
       ),
@@ -78,6 +78,102 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'Left aligned with leading toggle position',
+      Container: ({ children }) => (
+        <div style={{ maxWidth: '300px' }}>{children}</div>
+      ),
+      Example: ({ id, handler }) => (
+        <Toggle
+          on={true}
+          align="left"
+          togglePosition="leading"
+          label="Aligned left, leading toggle"
+          id={id}
+          onChange={handler}
+        />
+      ),
+    },
+    {
+      label: 'Left aligned with trailing toggle position',
+      Container: ({ children }) => (
+        <div style={{ maxWidth: '300px' }}>{children}</div>
+      ),
+      Example: ({ id, handler }) => (
+        <Toggle
+          on={true}
+          align="left"
+          togglePosition="trailing"
+          label="Aligned left, trailing toggle"
+          id={id}
+          onChange={handler}
+        />
+      ),
+    },
+    {
+      label: 'Justified with leading toggle position',
+      Container: ({ children }) => (
+        <div style={{ maxWidth: '300px' }}>{children}</div>
+      ),
+      Example: ({ id, handler }) => (
+        <Toggle
+          on={true}
+          align="justify"
+          togglePosition="leading"
+          label="Justified, leading toggle"
+          id={id}
+          onChange={handler}
+        />
+      ),
+    },
+    {
+      label: 'Justified with trailing toggle position',
+      Container: ({ children }) => (
+        <div style={{ maxWidth: '300px' }}>{children}</div>
+      ),
+      Example: ({ id, handler }) => (
+        <Toggle
+          on={true}
+          align="justify"
+          togglePosition="trailing"
+          label="Justified, trailing toggle"
+          id={id}
+          onChange={handler}
+        />
+      ),
+    },
+    {
+      label: 'Right aligned with leading toggle position',
+      Container: ({ children }) => (
+        <div style={{ maxWidth: '300px' }}>{children}</div>
+      ),
+      Example: ({ id, handler }) => (
+        <Toggle
+          on={true}
+          align="right"
+          togglePosition="leading"
+          label="Right aligned, leading toggle"
+          id={id}
+          onChange={handler}
+        />
+      ),
+    },
+    {
+      label: 'Right aligned with trailing toggle position',
+      Container: ({ children }) => (
+        <div style={{ maxWidth: '300px' }}>{children}</div>
+      ),
+      Example: ({ id, handler }) => (
+        <Toggle
+          on={true}
+          align="right"
+          togglePosition="trailing"
+          label="Right aligned, trailing toggle"
+          id={id}
+          onChange={handler}
+        />
+      ),
+    },
     {
       label: 'With a long label',
       Container: ({ children }) => (

diff --git a/packages/braid-design-system/src/lib/components/Toggle/Toggle.snippets.tsx b/packages/braid-design-system/src/lib/components/Toggle/Toggle.snippets.tsx
@@ -20,4 +20,8 @@ export const snippets: Snippets = [
     name: 'Justified',
     code: source(<Toggle label="Label" align="justify" />),
   },
+  {
+    name: 'Trailing toggle position',
+    code: source(<Toggle label="Label" togglePosition="trailing" />),
+  },
 ];