fix(button-group): fixed border style with hidden or single child

lumapps · Sep 16, 2024 · 13894be · 13894be
1 parent 0c749c9
commit 13894be
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   `Tooltip`: fix re-render errors when removing the label.
 -   `useImageLightbox`: update props each time the lightbox opens.
 -   `ImageLightbox`: fix reset zoom scale when switching to the first item.
+-   `ButtonGroup`: fixed border radius style with single button or `.visually-hidden` children.
 
 ## [3.9.0][] - 2024-09-03
 

diff --git a/packages/lumx-core/src/scss/components/button/_index.scss b/packages/lumx-core/src/scss/components/button/_index.scss
@@ -92,9 +92,9 @@
         .#{$lumx-base-prefix}-button--color-#{$key} {
             &.#{$lumx-base-prefix}-button--emphasis-high.#{$lumx-base-prefix}-button--theme-light {
                 @include lumx-button-color(
-                    lumx-base-const("emphasis", "HIGH"),
-                    $key,
-                    lumx-base-const("theme", "LIGHT")
+                        lumx-base-const("emphasis", "HIGH"),
+                        $key,
+                        lumx-base-const("theme", "LIGHT")
                 );
             }
 
@@ -150,18 +150,19 @@
 .#{$lumx-base-prefix}-button-group {
     display: inline-flex;
     vertical-align: top;
+    gap: 1px;
 
     .#{$lumx-base-prefix}-button {
-        margin-right: 1px;
-        border-radius: 0 !important;
-
-        &:first-child {
-            border-radius: var(--lumx-border-radius) 0 0 var(--lumx-border-radius) !important;
+        // Remove border radius on the right on the first button (if not hidden and not also the last button)
+        &:not(:last-of-type:not(.visually-hidden)) {
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
         }
 
-        &:last-child {
-            margin-right: 0;
-            border-radius: 0 var(--lumx-border-radius) var(--lumx-border-radius) 0 !important;
+        // Remove border radius on the left on the last button (if not hidden and not also the first button)
+        &:not(:first-of-type:not(.visually-hidden)) {
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
         }
     }
 }

diff --git a/packages/lumx-react/src/components/button/ButtonGroup.stories.tsx b/packages/lumx-react/src/components/button/ButtonGroup.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Button, ButtonGroup, Emphasis, IconButton, Size } from '@lumx/react';
+import { mdiAbjadArabic, mdiFoodApple, mdiMenuDown } from '@lumx/icons';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+
+export default {
+    title: 'LumX components/button/ButtonGroup',
+    component: ButtonGroup,
+    argTypes: { children: { control: false } },
+};
+
+/** Size & emphasis variants */
+export const Variants = {
+    render: ({ size, emphasis, theme }: any) => (
+        <ButtonGroup>
+            <span className="visually-hidden">Ignore me</span>
+            <Button size={size} emphasis={emphasis} theme={theme}>
+                Button
+            </Button>
+            <IconButton size={size} emphasis={emphasis} theme={theme} label="IconButton" icon={mdiMenuDown} />
+            <span className="visually-hidden">Ignore me</span>
+        </ButtonGroup>
+    ),
+    decorators: [
+        withCombinations({
+            cellStyle: { padding: '10px' },
+            combinations: {
+                rows: { '': { size: Size.m }, 'size=s': { size: Size.s } },
+                cols: { key: 'emphasis', options: [undefined, Emphasis.medium, Emphasis.low] },
+            },
+        }),
+    ],
+};
+
+export const OneButton = {
+    args: { children: <Button>Button</Button> },
+};
+
+export const ManyButtons = {
+    args: {
+        children: (
+            <>
+                <span className="visually-hidden">Ignore me</span>
+                <Button>Button 1</Button>
+                <span className="visually-hidden">Ignore me</span>
+                <IconButton label="IconButton" icon={mdiFoodApple} />
+                <span className="visually-hidden">Ignore me</span>
+                <IconButton label="IconButton" icon={mdiAbjadArabic} />
+                <span className="visually-hidden">Ignore me</span>
+                <Button>Button 2</Button>
+                <span className="visually-hidden">Ignore me</span>
+            </>
+        ),
+    },
+};