diff --git a/CHANGELOG.md b/CHANGELOG.md
index d98bc2f4b..909a56403 100644
--- 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
index 65a4eb8d1..c5b32e212 100644
--- 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
new file mode 100644
index 000000000..56445ded0
--- /dev/null
+++ 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) => (
+
+ Ignore me
+
+
+ Ignore me
+
+ ),
+ 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: },
+};
+
+export const ManyButtons = {
+ args: {
+ children: (
+ <>
+ Ignore me
+
+ Ignore me
+
+ Ignore me
+
+ Ignore me
+
+ Ignore me
+ >
+ ),
+ },
+};