ensure segmented button group only adds dividers to buttons

jpmorganchase · May 10, 2024 · d26bcfc · d26bcfc
1 parent 318515c
commit d26bcfc
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/packages/core/src/segmented-button-group/SegmentedButtonGroup.css b/packages/core/src/segmented-button-group/SegmentedButtonGroup.css
@@ -5,7 +5,7 @@
   gap: var(--salt-size-border);
 }
 
-.saltSegmentedButtonGroup > *:not(:last-child)::after {
+.saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {
   content: "";
   width: var(--salt-size-border);
   position: absolute;
@@ -14,7 +14,7 @@
   height: 100%;
 }
 
-.saltSegmentedButtonGroup > *:not(:first-child)::before {
+.saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before {
   content: "";
   width: var(--salt-size-border);
   position: absolute;

diff --git a/packages/core/stories/segmented-button-group/segmented-button-group.stories.tsx b/packages/core/stories/segmented-button-group/segmented-button-group.stories.tsx
@@ -4,8 +4,20 @@ import {
   Tooltip,
   SegmentedButtonGroup,
   SegmentedButtonGroupProps,
+  Menu,
+  MenuItem,
+  MenuPanel,
+  MenuTrigger,
 } from "@salt-ds/core";
-import { MessageIcon, ChatGroupIcon, CallIcon } from "@salt-ds/icons";
+import {
+  MessageIcon,
+  ChatGroupIcon,
+  CallIcon,
+  CopyIcon,
+  ExportIcon,
+  MicroMenuIcon,
+  SettingsIcon,
+} from "@salt-ds/icons";
 import { Meta, StoryFn } from "@storybook/react";
 
 export default {
@@ -60,3 +72,33 @@ export const Icons: StoryFn<SegmentedButtonGroupProps> = () => {
     </StackLayout>
   );
 };
+
+export const WithMenu: StoryFn<SegmentedButtonGroupProps> = () => {
+  return (
+    <SegmentedButtonGroup>
+      <Button>Button</Button>
+      <Button>Button</Button>
+      <Menu>
+        <MenuTrigger>
+          <Button variant="secondary" aria-label="Open Menu">
+            <MicroMenuIcon aria-hidden />
+          </Button>
+        </MenuTrigger>
+        <MenuPanel>
+          <MenuItem>
+            <CopyIcon aria-hidden />
+            Copy
+          </MenuItem>
+          <MenuItem>
+            <ExportIcon aria-hidden />
+            Export
+          </MenuItem>
+          <MenuItem>
+            <SettingsIcon aria-hidden />
+            Settings
+          </MenuItem>
+        </MenuPanel>
+      </Menu>
+    </SegmentedButtonGroup>
+  );
+};