Revert "Replace ActionBar overflow calculations with CSS wrapping approach"#7807
Merged
Revert "Replace ActionBar overflow calculations with CSS wrapping approach"#7807
ActionBar overflow calculations with CSS wrapping approach"#7807Conversation
…pproach …" This reverts commit f59a1b1.
|
github-actions
Bot
added
staff
Contributor
|
TylerJDev
added
the
Canary Release
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/20034 |
francinelucca
approved these changes
May 6, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR reverts #7655, moving ActionBar overflow handling away from the recent CSS-wrapping approach and back to a JS-driven measurement/overflow-menu model.
Changes:
- Reintroduces overflow calculation logic in
ActionBarusing measured child widths and a resize observer to populate the overflow menu. - Simplifies
ActionBarCSS by removing the prior overflow-detection / wrapping styles. - Updates unit/e2e tests and adds a Storybook example (text-labeled buttons); removes the changeset from the reverted PR.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/ActionBar/ActionBar.tsx | Restores JS-based overflow logic, introduces width measurement + registry-driven overflow menu rendering. |
| packages/react/src/ActionBar/ActionBar.test.tsx | Updates the zero-width test assertion to query by accessible name instead of test id. |
| packages/react/src/ActionBar/ActionBar.module.css | Removes CSS overflow detection/wrapping styles and tweaks alignment/nowrap behavior. |
| packages/react/src/ActionBar/ActionBar.examples.stories.tsx | Adds a TextLabels example using standard Button children. |
| e2e/components/drafts/ActionBar.test.ts | Updates overflow interaction assertions to count buttons without visible: true filtering. |
| .changeset/many-suns-promise.md | Removes the changeset associated with the reverted change. |
Copilot's findings
- Files reviewed: 6/6 changed files
- Comments generated: 6
Comment on lines
+257
to
+285
| // First, we check if we can fit all the items with their icons | ||
| if (registryEntries.length >= numberOfItemsPossible) { | ||
| /* Below is an accessibility requirement. Never show only one item in the overflow menu. | ||
| * If there is only one item left to display in the overflow menu according to the calculation, | ||
| * we need to pull another item from the list into the overflow menu. | ||
| */ | ||
| const numberOfItemsInMenu = registryEntries.length - numberOfItemsPossibleWithMoreMenu | ||
| const numberOfListItems = | ||
| numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu | ||
| for (const [index, [id, child]] of registryEntries.entries()) { | ||
| if (index < numberOfListItems) { | ||
| continue | ||
| //if the last item is a divider | ||
| } else if (child.type === 'divider') { | ||
| if (index === numberOfListItems - 1 || index === numberOfListItems) { | ||
| continue | ||
| } else { | ||
| menuItems.add(id) | ||
| } | ||
| } else { | ||
| menuItems.add(id) | ||
| } | ||
| } | ||
|
|
||
| const {containerRef} = useFocusZone( | ||
| { | ||
| bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd, | ||
| focusOutBehavior: 'wrap', | ||
| focusableElementFilter: element => element.matches(FOCUSABLE_ITEM_SELECTOR), | ||
| return menuItems | ||
| } else if (numberOfItemsPossible > registryEntries.length && hasActiveMenu) { | ||
| /* If the items fit in the list and there are items in the overflow menu, we need to move them back to the list */ | ||
| return new Set() | ||
| } |
| {menuItemIds.size > 0 && ( | ||
| <ActionMenu> | ||
| <ActionMenu.Anchor> | ||
| <IconButton variant="invisible" aria-label={`More ${ariaLabel} items`} icon={KebabHorizontalIcon} /> |
Comment on lines
+315
to
+319
| const moreMenuRef = useRef<HTMLLIElement>(null) | ||
|
|
||
| useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => { | ||
| const navWidth = resizeObserverEntries[0].contentRect.width | ||
| const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0 |
Comment on lines
+465
to
466
| useIsomorphicLayoutEffect(() => setWidth(ref.current?.getBoundingClientRect().width ?? -1), [ref]) | ||
|
|
Comment on lines
+41
to
+44
| * Registry of descendants to render in the list or menu. To preserve insertion order across updates, children are | ||
| * set to `null` when unregistered rather than fully dropped from the map. | ||
| */ | ||
| type ChildRegistry = ReadonlyMap<string, ChildProps | null> |
| {menuItemIds.size > 0 && ( | ||
| <ActionMenu> | ||
| <ActionMenu.Anchor> | ||
| <IconButton variant="invisible" aria-label={`More ${ariaLabel} items`} icon={KebabHorizontalIcon} /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reverts #7655