Re-add (unrevert) "Replace ActionBar overflow calculations with CSS wrapping approach"

[iansan5653]

Re-implements #7655 after it was reverted in #7807, with fixes:

1. Updated the CommentBox story to reproduce the issue (it seems to have been caused by a particular set of container styles, most importantly overflow: hidden on the container
2. Reduce the IntersectionObserver threshold from 1to 0.75 so that it will fire reliably - the issue was caused by the observer not being quite sensitive enough; the buttons appear to have been still overflowing by just 1 pixel, which meant they were never considered 100% visible
3. Remove a style condition to always apply the scroll driven animation and thus hopefully resolve some flickering (which just appeared to be caused by React safe mode, but I still wanted to resolve it)

This reverts #7807.

➡️ View just the new changes

[changeset-bot]

🦋 Changeset detected

Latest commit: a825a29

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[Copilot]

Pull request overview

Re-implements the earlier ActionBar overflow redesign by switching from width-based overflow calculations to a CSS-wrapping + JS observation approach, aiming to improve SSR stability and reduce flicker/clipping issues.

Changes:

• Replace ActionBar overflow detection with a flex-wrap/clip strategy and register overflowed items via IntersectionObserver + useSyncExternalStore.
• Update ActionBar styling to support wrapping/overflow clipping and conditionally reveal the “More” button.
• Adjust Storybook example and e2e assertions to better reproduce and validate the overflow scenario; add a changeset for a minor release.

Show a summary per file

File	Description
packages/react/src/ActionBar/ActionBar.tsx	Replaces overflow logic with registry-driven overflow item detection and always-renders an overflow menu trigger.
packages/react/src/ActionBar/ActionBar.module.css	Adds wrapping/overflow clipping styles and scroll-timeline-based overflow detection to drive “More” button visibility.
packages/react/src/ActionBar/ActionBar.test.tsx	Updates a zero-width test to select the button by data-testid.
packages/react/src/ActionBar/ActionBar.examples.stories.tsx	Tweaks CommentBox layout to reproduce the overflow bug scenario more reliably.
packages/react/src/ActionBar/ActionBar.examples.stories.module.css	Updates CommentBox header styles to match the new reproduction scenario (incl. overflow constraints).
e2e/components/drafts/ActionBar.test.ts	Updates e2e assertions to count only visible IconButtons after overflow occurs.
.changeset/many-suns-promise.md	Declares a minor release for the ActionBar overflow behavior change.

Copilot's findings

Comments suppressed due to low confidence (2)

packages/react/src/ActionBar/ActionBar.tsx:252

• The overflow “More” button accessible name is derived from ariaLabel and appends overflowItems?.length. This can produce labels like More undefined items … when the ActionBar is labeled via aria-labelledby, and it also changes the button’s accessible name as items overflow (breaking the e2e selector that looks for More Comment box toolbar items). Use a stable label that doesn’t include dynamic counts and that works when aria-labelledby is used (e.g., fall back to a generic “More items”, or add a separate aria-labelledby/aria-describedby strategy).

              <IconButton
                variant="invisible"
                aria-label={`More ${ariaLabel} items ${overflowItems?.length}`}
                icon={KebabHorizontalIcon}
                className={styles.MoreButton}
                data-more-button-inactive={overflowItems?.length ? undefined : true}
                size={size}
              />

packages/react/src/ActionBar/ActionBar.tsx:213

• overflowItems currently includes any registered descendant whose registry value is non-null, including {type: 'group'} entries from ActionBar.Group. Those group entries are not handled in the overflow menu rendering (only divider/action/menu are), so they inflate overflowItems.length (used for data-has-overflow and the More button label) and can yield undefined children in the ActionList. Filter out type: 'group' here (or avoid registering the group container in the registry) so overflowItems only contains actual renderable menu items.

  const overflowItems = useMemo(
    () =>
      childRegistry &&
      Array.from(childRegistry.entries()).filter((entry): entry is [string, ChildProps] => entry[1] !== null),
    [childRegistry],

• Files reviewed: 7/7 changed files
• Comments generated: 2

[iansan5653]

@copilot this e2e test failure was likely introduced by the story changes in 560b2a8; investigate and resolve

17) e2e/components/drafts/ActionBar.test.ts:42:13 › ActionBar › ActionBar Interactions › dark_colorblind › Overflow interaction @vrt 

    Test timeout of 15000ms exceeded.

    Error: locator.waitFor: Test timeout of 15000ms exceeded.
    Call log:
      - waiting for getByLabel('Task List') to be hidden
        34 × locator resolved to visible <button type="button" tabindex="-1" data-size="medium" data-loading="false" data-no-visuals="true" aria-labelledby=":rt:" data-variant="invisible" data-component="IconButton" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj">…</button>


      50 |           await expect(page.locator(toolbarButtonSelector).filter({visible: true})).toHaveCount(10)
      51 |           await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
    > 52 |           await page.getByLabel('Task List').waitFor({
         |                                              ^
      53 |             state: 'hidden',
      54 |           })
      55 |           await expect(page.locator(toolbarButtonSelector).filter({visible: true})).toHaveCount(8)
        at /github/workspace/e2e/components/drafts/ActionBar.test.ts:52:46

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/20186

[primer-integration]

Integration test results from github/github-ui:

  CI Running
  VRT Passed
  Projects Passed

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Passed

All checks passed!

[Copilot]

@copilot this e2e test failure was likely introduced by the story changes in 560b2a8; investigate and resolve

17) e2e/components/drafts/ActionBar.test.ts:42:13 › ActionBar › ActionBar Intera...

Addressed in 30a5cc0. I took the minimal test-only path and narrowed the resize step to viewports['primer.breakpoint.xs'] - 64 (480px), which matches the updated CommentBox story layout and reliably moves Task List into the overflow menu again. I re-ran CI= npx playwright test e2e/components/drafts/ActionBar.test.ts --grep 'Overflow interaction' and all 9 themed cases passed locally. Screenshot: /tmp/actionbar-overflow-480.png