feat(ActionGroup): support switch (#1105)

* feat(ActionGroup): support switch * feat(ActionGroup): support switch
mittwald · Jan 20, 2025 · 5415c9d · 5415c9d
1 parent 4f7fd92
commit 5415c9d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/components/src/components/ActionGroup/ActionGroup.module.scss b/packages/components/src/components/ActionGroup/ActionGroup.module.scss
@@ -1,8 +1,10 @@
 .actionGroup {
   display: flex;
+  align-items: center;
 
   .primary {
     order: 3;
+
     &:only-child {
       margin-left: auto;
     }

diff --git a/packages/components/src/components/ActionGroup/ActionGroup.tsx b/packages/components/src/components/ActionGroup/ActionGroup.tsx
@@ -46,6 +46,12 @@ export const ActionGroup = flowComponent("ActionGroup", (props) => {
         return clsx(props.className, styles[slot]);
       }),
     },
+    Switch: {
+      labelPosition: "leading",
+      className: dynamic((props) => {
+        return clsx(props.className, props.slot && styles[props.slot]);
+      }),
+    },
   };
 
   return (

diff --git a/packages/components/src/components/ActionGroup/stories/Default.stories.tsx b/packages/components/src/components/ActionGroup/stories/Default.stories.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { Button } from "@/components/Button";
 import { Action } from "@/components/Action";
 import { sleep } from "@/lib/promises/sleep";
+import { Switch } from "@/components/Switch";
 
 const meta: Meta<typeof ActionGroup> = {
   title: "Actions/ActionGroup",
@@ -85,3 +86,12 @@ export const WithExtraSecondaryAction: Story = {
 export const Mobile: Story = {
   parameters: { viewport: { defaultViewport: "mobile1" } },
 };
+
+export const WithSwitch: Story = {
+  render: (props) => (
+    <ActionGroup {...props}>
+      <Button slot="secondary">Edit</Button>
+      <Switch slot="primary">Activate</Switch>
+    </ActionGroup>
+  ),
+};