test(ButtonGroup): 💍 visual regression

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -21,6 +21,122 @@ export const Playground: StoryObj<typeof ButtonGroup> = {
     fillWidth: false,
     type: 'default',
     defaultSelected: 'option3',
+    'aria-label': 'Button group playground',
+  },
+};
+
+export const Default: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+  },
+};
+
+export const Borderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+  },
+};
+
+export const DefaultSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+    selected: 'option1',
+  },
+};
+
+export const BorderlessSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+    selected: 'option1',
+  },
+};
+
+export const WithDisabledButton: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Enabled', value: 'enabled' },
+      { label: 'Disabled', value: 'disabled', disabled: true },
+    ],
+    type: 'default',
+  },
+};
+
+export const WithDisabledSelectedButton: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Enabled', value: 'enabled' },
+      { label: 'Disabled Active', value: 'disabled', disabled: true },
+    ],
+    type: 'default',
+    selected: 'disabled',
+  },
+};
+
+export const FillWidthDefault: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ],
+    type: 'default',
+    fillWidth: true,
+  },
+};
+
+export const FillWidthBorderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ],
+    type: 'borderless',
+    fillWidth: true,
+  },
+};
+
+export const MultiSelectSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+    multiple: true,
+    selected: new Set(['option1', 'option3']),
+  },
+};
+
+export const MultiSelectBorderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+    multiple: true,
+    selected: new Set(['option1', 'option3']),
   },
 };
 

src/components/ButtonGroup/ButtonGroup.tsx

@@ -24,6 +24,7 @@ export const ButtonGroup = ({
   onClick,
   type = 'default',
   multiple = false,
+  'aria-label': ariaLabel,
   ...props
 }: ButtonGroupProps) => {
   const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>
@@ -75,7 +76,6 @@ export const ButtonGroup = ({
         $fillWidth={fillWidth}
         $type={type}
         onClick={() => onButtonGroupClickCommonHandler(value)}
-        role="button"
         {...buttonProps}
       >
         {label}
@@ -89,6 +89,7 @@ export const ButtonGroup = ({
       $fillWidth={fillWidth}
       $type={type}
       role="group"
+      aria-label={ariaLabel}
     >
       {buttons}
     </ButtonGroupWrapper>
@@ -115,10 +116,15 @@ const ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupT
   width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};
 `;
 
-const Button = styled.button<{
+const Button = styled.button.attrs<{
+  disabled?: boolean;
+}>(props => ({
+  'aria-disabled': props.disabled ? 'true' : undefined,
+}))<{
   $active: boolean;
   $fillWidth: boolean;
   $type: ButtonGroupType;
+  disabled?: boolean;
 }>`
   box-sizing: border-box;
   display: flex;
@@ -139,12 +145,6 @@ const Button = styled.button<{
   cursor: pointer;
   border: none;
 
-  &[aria-pressed='true'] {
-    background: ${({ theme }) => theme.click.button.group.color.background.active};
-    font: ${({ theme }) => theme.click.button.group.typography.label.active};
-    color: ${({ theme }) => theme.click.button.group.color.text.active};
-  }
-
   &:hover {
     background: ${({ theme }) => theme.click.button.group.color.background.hover};
     font: ${({ theme }) => theme.click.button.group.typography.label.hover};

src/components/ButtonGroup/ButtonGroup.types.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 
 export type ButtonGroupType = 'default' | 'borderless';
 export type SelectionValue = string | Set<string>;
 
 export interface ButtonGroupElementProps extends Omit<
-  HTMLAttributes<HTMLButtonElement>,
+  ButtonHTMLAttributes<HTMLButtonElement>,
   'children'
 > {
   value: string;