WIP

Author: hectahertz

packages/react/src/ButtonGroup/ButtonGroup.docs.json

@@ -25,6 +25,12 @@
     {
       "name": "ref",
       "type": "React.RefObject<HTMLDivElement>"
+    },
+    {
+      "name": "overflowAriaLabel",
+      "type": "string",
+      "defaultValue": "\"More actions\"",
+      "description": "Accessible label announced for the overflow trigger button."
     }
   ],
   "subcomponents": []

packages/react/src/ButtonGroup/ButtonGroup.module.css

@@ -3,7 +3,12 @@
   vertical-align: middle;
   isolation: isolate;
 
-  & > *:not([data-loading-wrapper]) {
+  &[data-phase='measuring'] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  & > [data-button-group-slot]:not([data-loading-wrapper]) {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-end: -1px;
     position: relative;
@@ -46,7 +51,7 @@
   }
 
   /* if child is loading button */
-  & > *[data-loading-wrapper] {
+  & > [data-button-group-slot][data-loading-wrapper] {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-end: -1px;
     position: relative;
@@ -80,3 +85,18 @@
     }
   }
 }
+
+.MeasurementItem {
+  display: inline-flex;
+}
+
+.OverflowOverlay {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-8);
+  padding: var(--base-size-8);
+}
+
+.OverflowItem {
+  display: flex;
+}

packages/react/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -23,6 +23,17 @@ export const Default = () => (
   </ButtonGroup>
 )
 
+export const Overflow = () => (
+  <div style={{maxWidth: '220px'}}>
+    <ButtonGroup>
+      <Button>Button 1</Button>
+      <Button>Button 2</Button>
+      <Button>Button 3</Button>
+      <Button>Button 4</Button>
+    </ButtonGroup>
+  </div>
+)
+
 export const Playground: StoryFn<ButtonProps & {buttonCount: number}> = args => {
   const {buttonCount = 3, ...buttonProps} = args
   const buttons = Array.from({length: buttonCount}, (_, i) => (

packages/react/src/ButtonGroup/ButtonGroup.test.tsx

@@ -1,5 +1,5 @@
 import {render, screen} from '@testing-library/react'
-import ButtonGroup from './ButtonGroup'
+import ButtonGroup, {calculateVisibleCount} from './ButtonGroup'
 import {describe, expect, it} from 'vitest'
 
 describe('ButtonGroup', () => {
@@ -18,3 +18,35 @@ describe('ButtonGroup', () => {
     expect(screen.getByRole('toolbar')).toBeInTheDocument()
   })
 })
+
+describe('calculateVisibleCount', () => {
+  it('returns total items when container is wide enough', () => {
+    const result = calculateVisibleCount({
+      itemWidths: [80, 80, 80],
+      containerWidth: 240,
+      overflowWidth: 32,
+    })
+
+    expect(result).toBe(3)
+  })
+
+  it('returns zero when nothing fits', () => {
+    const result = calculateVisibleCount({
+      itemWidths: [120, 80],
+      containerWidth: 60,
+      overflowWidth: 32,
+    })
+
+    expect(result).toBe(0)
+  })
+
+  it('avoids leaving a single item in overflow', () => {
+    const result = calculateVisibleCount({
+      itemWidths: [120, 100, 100],
+      containerWidth: 230,
+      overflowWidth: 40,
+    })
+
+    expect(result).toBe(1)
+  })
+})