Update IconButton to support multiple keybinding hints by Copilot · Pull Request #7623 · primer/react

Copilot · 2026-03-04T18:17:56Z

Extends IconButton's keybindingHint prop to accept an array of strings in addition to a single string. Multiple keybinding hints are rendered joined with "or" (e.g., ["Mod+B", "Control+B"] renders as ⌘B or ⌃B). An empty array is treated the same as omitting the prop entirely.

Changelog

New

IconButton.keybindingHint now accepts string | string[]. When an array is provided, each hint is rendered as a KeybindingHint component with " or " separators between them.
The accessible label string joins multiple hints with " or " (e.g., "Bold (command b or control b)").

Changed

TooltipProps.keybindingHint widened from string to string | string[] to support the array form (IconButton passes this value through to Tooltip).
An empty array passed to keybindingHint produces no hint rendering — keybindingHint defaults to a stable module-level emptyKeybindingHints constant in Tooltip's prop destructuring, and .length checks are used in conditionals throughout.
When multiple keybinding hints are shown, extra left margin (var(--base-size-8) vs var(--base-size-6)) is applied between the label text and the hint badges to avoid crowding.
keybindingHint type corrected to string | string[] in both Tooltip.docs.json and IconButton.docs.json.

Removed

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

New Storybook story: Components/IconButton/Features — MultipleKeybindingHints demonstrates the array form.

New unit tests cover:

Accessible label includes all hints joined by " or "
Two KeybindingHint elements are rendered with a " or " separator
An empty array produces no keybinding hint output

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-ui (Learn more about how to run integration tests)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

changeset-bot · 2026-03-04T18:18:07Z

🦋 Changeset detected

Latest commit: c1bcdf4

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

Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

iansan5653 · 2026-03-04T19:53:02Z

packages/react/src/TooltipV2/Tooltip.tsx

+    const keybindingHints = keybindingHint
+      ? Array.isArray(keybindingHint)
+        ? keybindingHint
+        : [keybindingHint]
+      : undefined


@copilot this should be undefined if keybindingHint is an empty array so that it doesn't configure extra properties for an empty hint

Fixed in 6818499. An empty array now resolves to undefined, preventing any keybinding hint rendering or extra configuration.

Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

github-actions · 2026-03-04T20:55:00Z

⚠️ 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. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot

Pull request overview

Extends IconButton/TooltipV2 keybinding hint support to allow multiple shortcut hints, rendering them as multiple KeybindingHint elements separated by " or ", and updating the accessible label accordingly.

Changes:

Widened keybindingHint types to accept string | string[] (and passed through TooltipV2).
Updated TooltipV2 rendering + accessible label generation to handle multiple hints with " or " separators, treating [] as no hint.
Added Storybook coverage and unit tests for the multiple-hints behavior.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/src/TooltipV2/Tooltip.tsx	Normalizes `keybindingHint` into a list, updates visible and VisuallyHidden rendering to support multiple hints.
packages/react/src/TooltipV2/tests/Tooltip.test.tsx	Adds tests for multi-hint accessible name, rendering, and empty-array behavior.
packages/react/src/Button/types.ts	Updates `IconButtonProps.keybindingHint` type to `string
packages/react/src/Button/IconButton.features.stories.tsx	Adds a Storybook feature story demonstrating multiple keybinding hints.
.changeset/iconbutton-keybinding-hint-array.md	Declares a minor release for the new `IconButton.keybindingHint` array support.

packages/react/src/Button/types.ts

packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx

primer-integration · 2026-03-04T21:27:45Z

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

iansan5653

@copilot when there multiple keybinding hints, we need more space between the main label text and the hints or it gets too crowded and confusing

screenshot showing how the hints are too close to the label text

add some more space, but only when there's more than one hint to show

iansan5653 · 2026-03-04T21:28:27Z

packages/react/src/TooltipV2/Tooltip.tsx

    const hasAriaLabel = 'aria-label' in rest

+    // Normalize keybindingHint to an array for uniform rendering, treating empty arrays as undefined
+    const keybindingHints = keybindingHint


I actually think it would be simpler to allow empty arrays and just check for keybindingHint.length in the later conditionals

Done in d0bf446. keybindingHints now normalizes to [] for falsy/empty-array inputs, and the later conditionals use .length === 0 / .length > 0 checks.

primer-integration · 2026-03-04T21:33:33Z

Integration test results from github/github-ui:

CI Failed
VRT Passed
Projects Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

…iple hints Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

Copilot · 2026-03-04T21:35:46Z

@copilot when there multiple keybinding hints, we need more space between the main label text and the hints or it gets too crowded and confusing

<img src="https://github.com/user-attachments/assets/...

Added in d0bf446. A HasMultipleHints CSS class applies margin-left: var(--base-size-8) (vs the single-hint var(--base-size-6)) on the hint container when there are 2+ hints, giving more breathing room between the label and the keybinding badges.

francinelucca · 2026-03-05T03:19:17Z

packages/react/src/Button/types.ts

  tooltipDirection?: TooltipDirection
  /** @deprecated Use `keybindingHint` instead. */
  keyshortcuts?: string
-  keybindingHint?: string


correct type in iconbutton.docs.json as well

Done in 464c69d. Updated keybindingHint type in IconButton.docs.json from "string" to "string | string[]" and updated the description to mention the array form.

francinelucca · 2026-03-05T03:19:37Z

packages/react/src/TooltipV2/Tooltip.tsx

  text: string
  type?: 'label' | 'description'
-  keybindingHint?: KeybindingHintProps['keys']
+  keybindingHint?: KeybindingHintProps['keys'] | Array<KeybindingHintProps['keys']>


correct type on tooltip.docs.json as well

Done in 464c69d. Updated keybindingHint type in Tooltip.docs.json from "string" to "string | string[]" and updated the description accordingly.

francinelucca · 2026-03-05T03:20:04Z

packages/react/src/TooltipV2/Tooltip.tsx

+    // Normalize keybindingHint to an array for uniform rendering
+    const keybindingHints = keybindingHint ? (Array.isArray(keybindingHint) ? keybindingHint : [keybindingHint]) : []


is it possible to default keyBindingHint to empty array to simplify this and make it more readable?

Done in 464c69d. keybindingHint now defaults to [] in the destructuring, so the normalization simplifies to just Array.isArray(keybindingHint) ? keybindingHint : [keybindingHint].

@copilot extract the empty array default out to a constant, like:

const emptyArray = [] function Tooltip({keybindingHint = emptyArray}) {...}

Done in c1bcdf4. Added const emptyKeybindingHints: Array<KeybindingHintProps['keys']> = [] at module level and updated the default to reference it.

francinelucca · 2026-03-05T03:21:50Z

@copilot implement requested changes

…ion with default prop Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Copilot · 2026-03-05T03:28:29Z

@copilot implement requested changes

All three changes implemented in 464c69d: updated keybindingHint type to string | string[] in both Tooltip.docs.json and IconButton.docs.json, and simplified the normalization by defaulting keybindingHint to [] in the prop destructuring.

iansan5653 · 2026-03-05T14:43:19Z

nice, thanks for catching that! I always forget that the docs aren't powered by TypeScript types

…ble reference Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

Initial plan

ead88e2

Copilot AI assigned Copilot and iansan5653 Mar 4, 2026

Copilot started work on behalf of iansan5653 March 4, 2026 18:18 View session

Support array of strings for keybindingHint on IconButton

194087c

Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

Copilot finished work on behalf of iansan5653 March 4, 2026 18:35

iansan5653 reviewed Mar 4, 2026

View reviewed changes

Copilot started work on behalf of iansan5653 March 4, 2026 19:53 View session

Copilot AI and others added 2 commits March 4, 2026 19:58

Treat empty array keybindingHint as undefined

6818499

Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

Add changeset for keybindingHint array support

d83f1db

Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Update IconButton to support multiple keybinding hints~~ Update IconButton to support multiple keybinding hints Mar 4, 2026

Copilot finished work on behalf of iansan5653 March 4, 2026 20:00

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 Mar 4, 2026

iansan5653 marked this pull request as ready for review March 4, 2026 20:55

iansan5653 requested a review from a team as a code owner March 4, 2026 20:55

iansan5653 requested review from TylerJDev and Copilot March 4, 2026 20:55

Copilot started reviewing on behalf of iansan5653 March 4, 2026 20:56 View session

Copilot AI reviewed Mar 4, 2026

View reviewed changes

packages/react/src/Button/types.ts Show resolved Hide resolved

packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx Show resolved Hide resolved

Copilot AI deployed to github-pages March 4, 2026 21:04 View deployment

github-actions bot temporarily deployed to storybook-preview-7623 March 4, 2026 21:04 Inactive

iansan5653 reviewed Mar 4, 2026

View reviewed changes

Copilot started work on behalf of iansan5653 March 4, 2026 21:29 View session

Simplify keybindingHints normalization and add extra spacing for mult…

d0bf446

…iple hints Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

Copilot finished work on behalf of iansan5653 March 4, 2026 21:36

francinelucca requested changes Mar 5, 2026

View reviewed changes

Merge branch 'main' into copilot/update-iconbutton-keybindinghint

baacf61

Copilot started work on behalf of francinelucca March 5, 2026 03:21 View session

github-actions bot requested a deployment to storybook-preview-7623 March 5, 2026 03:24 Abandoned

Update keybindingHint type in docs.json files and simplify normalizat…

464c69d

…ion with default prop Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Copilot finished work on behalf of francinelucca March 5, 2026 03:29

francinelucca approved these changes Mar 5, 2026

View reviewed changes

github-actions bot requested a deployment to storybook-preview-7623 March 5, 2026 03:33 Abandoned

Copilot AI deployed to github-pages March 5, 2026 03:42 View deployment

github-actions bot deployed to storybook-preview-7623 March 5, 2026 03:42 View deployment

Copilot started work on behalf of iansan5653 March 5, 2026 14:44 View session

Extract empty keybindingHint default to module-level constant for sta…

c1bcdf4

…ble reference Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>

Copilot finished work on behalf of iansan5653 March 5, 2026 14:51

		// Normalize keybindingHint to an array for uniform rendering
		const keybindingHints = keybindingHint ? (Array.isArray(keybindingHint) ? keybindingHint : [keybindingHint]) : []

Conversation

Copilot AI commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

iansan5653 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 4, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Mar 4, 2026

Uh oh!

iansan5653 left a comment

Choose a reason for hiding this comment

Uh oh!

iansan5653 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Mar 4, 2026

Uh oh!

Copilot AI commented Mar 4, 2026

Uh oh!

francinelucca Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

iansan5653 Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca commented Mar 5, 2026

Uh oh!

Copilot AI commented Mar 5, 2026

Uh oh!

iansan5653 commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Copilot AI commented Mar 4, 2026 •

edited

Loading

changeset-bot bot commented Mar 4, 2026 •

edited

Loading

iansan5653 commented Mar 5, 2026 •

edited

Loading