ActionBar: Add `disabled` support to `ActionBar` #5666

TylerJDev · 2025-02-06T23:52:07Z

https://github.com/github/primer/issues/4613

Changelog

Changed

Improves disabled support on ActionBar.IconButton
Ensures that the overflow menu respects the disabled state

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-02-06T23:52:10Z

🦋 Changeset detected

Latest commit: b626615

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 · 2025-02-06T23:52:40Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-02-06T23:55:34Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.91 KB (-0.03% 🔽)
packages/react/dist/browser.umd.js	106.35 KB (+0.05% 🔺)

TylerJDev · 2025-02-06T23:59:31Z

@andrejusk, quick implementation question! Are you expecting the IconButton not to be actionable when disabled, or are you handling this in your implementation? Right now we're using aria-disabled, which is more accessible and follows the same pattern we use in the overflow menu. This means that users can still click/trigger the button even when disabled. We could block onClick events when aria-disabled is true, but wanted to hear about your use case first.

andrejusk · 2025-02-13T12:50:59Z

👋 @TylerJDev our current implementation always sets the onClick prop. I think what you propose makes sense, where the user can interact with the button and see that it is disabled, but triggering it does nothing.

TylerJDev · 2025-03-04T16:48:11Z

packages/react/src/ActionBar/ActionBar.tsx

+    const clickHandler = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (disabled) {
+          return
+        }
+        onClick?.(event)
+      },
+      [disabled, onClick],
+    )


Added this to block the onClick that a consumer might attach to the button. The button could still be activated on an onKeyDown event, but I don't think that's as likely to be added here.

Curious on any thoughts on this method, and if it just be adjusted or not 👀

Should we still add a keydown eventhandler then? 🤔

After doing a bit more testing, I realize we probably don't need to add one for keydown. onClick will handle most cases that we'd expect when utilizing a keyboard. We also probably don't want consumers using onKeyDown instead of onClick. I adjusted the tests to reflect this!

francinelucca · 2025-03-04T18:48:58Z

packages/react/src/ActionBar/ActionBar.tsx

+    const clickHandler = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (disabled) {
+          return
+        }
+        onClick?.(event)
+      },
+      [disabled, onClick],
+    )


Should we still add a keydown eventhandler then? 🤔

TylerJDev · 2025-03-04T19:20:54Z

Should we still add a keydown eventhandler then? 🤔

Doesn't hurt! I can go ahead and add it just in case

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Feb 6, 2025

TylerJDev temporarily deployed to github-pages February 7, 2025 00:06 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5666 February 7, 2025 00:06 Inactive

TylerJDev temporarily deployed to github-pages February 13, 2025 18:08 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5666 February 13, 2025 18:09 Inactive

TylerJDev added 2 commits March 2, 2025 10:52

Add disabled prop to ActionBar

b064ad4

Improve disabled support

9cf870a

TylerJDev force-pushed the tylerjdev/add-disabled-to-actionbar branch from f7125a9 to 9cf870a Compare March 2, 2025 16:54

Add changeset

6890c89

github-actions bot requested a deployment to storybook-preview-5666 March 2, 2025 17:05 Abandoned

TylerJDev deployed to github-pages March 2, 2025 17:18 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5666 March 2, 2025 17:18 Inactive

TylerJDev commented Mar 4, 2025

View reviewed changes

TylerJDev marked this pull request as ready for review March 4, 2025 16:54

TylerJDev requested a review from a team as a code owner March 4, 2025 16:54

TylerJDev requested a review from francinelucca March 4, 2025 16:54

francinelucca approved these changes Mar 4, 2025

View reviewed changes

Add handler for keydown events

04ed550

TylerJDev deployed to github-pages March 5, 2025 21:57 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5666 March 5, 2025 21:57 Inactive

TylerJDev added 3 commits March 6, 2025 07:14

Add more tests

5b7ff2d

Quick fix for consistency

2cfe096

clean up

5dbed55

github-actions bot temporarily deployed to storybook-preview-5666 March 6, 2025 15:28 Inactive

TylerJDev deployed to github-pages March 6, 2025 15:42 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5666 March 6, 2025 15:42 Inactive

TylerJDev added 2 commits March 6, 2025 20:50

Remove onKeyDown

b0ba29f

Adjust tests

b626615

github-actions bot requested a deployment to storybook-preview-5666 March 7, 2025 04:59 Abandoned

TylerJDev deployed to github-pages March 7, 2025 05:13 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5666 March 7, 2025 05:13 View deployment

TylerJDev added this pull request to the merge queue Mar 7, 2025

Merged via the queue into main with commit 7400549 Mar 7, 2025
45 checks passed

TylerJDev deleted the tylerjdev/add-disabled-to-actionbar branch March 7, 2025 05:40

primer bot mentioned this pull request Mar 7, 2025

Release tracking (37.15.0) #5717

Merged

hectahertz pushed a commit that referenced this pull request Mar 20, 2025

ActionBar: Add disabled support to ActionBar (#5666)

154cba5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ActionBar: Add `disabled` support to `ActionBar` #5666

ActionBar: Add `disabled` support to `ActionBar` #5666

Uh oh!

TylerJDev commented Feb 6, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Feb 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Feb 6, 2025

Uh oh!

github-actions bot commented Feb 6, 2025 •

edited

Loading

Uh oh!

TylerJDev commented Feb 6, 2025

Uh oh!

andrejusk commented Feb 13, 2025

Uh oh!

TylerJDev Mar 4, 2025

Uh oh!

francinelucca Mar 4, 2025

Uh oh!

TylerJDev Mar 7, 2025 •

edited

Loading

Uh oh!

francinelucca Mar 4, 2025

Uh oh!

TylerJDev commented Mar 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ActionBar: Add disabled support to ActionBar #5666

ActionBar: Add disabled support to ActionBar #5666

Uh oh!

Conversation

TylerJDev commented Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Feb 6, 2025

Uh oh!

github-actions bot commented Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

TylerJDev commented Feb 6, 2025

Uh oh!

andrejusk commented Feb 13, 2025

Uh oh!

TylerJDev Mar 4, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca Mar 4, 2025

Choose a reason for hiding this comment

Uh oh!

TylerJDev Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Mar 4, 2025

Choose a reason for hiding this comment

Uh oh!

TylerJDev commented Mar 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ActionBar: Add `disabled` support to `ActionBar` #5666

ActionBar: Add `disabled` support to `ActionBar` #5666

TylerJDev commented Feb 6, 2025 •

edited

Loading

changeset-bot bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

TylerJDev Mar 7, 2025 •

edited

Loading