feat: Introduce Tooltip to SegmentedControlIconButton #5679

khiga8 · 2025-02-10T15:57:34Z

To do:

add test coverage
add story with tooltip (happens by default, and can be poked around using playground controls)
update docs
create integration PR in dotcom (kicked off - https://github.com/github/github/actions/runs/13248924209)
Introduce feature flag to dotcom - https://github.com/github/primer/issues/4775

Relates to:

This enables a tooltip by default on the SegmentedControl.IconButton. For safe rollout, this wraps the updates in a new feature flag, primer_react_segmented_control_tooltip which will be tracked in https://github.com/github/primer/issues/4775.

We can enable this feature flag for 1-2 weeks in dotcom, before we clean it up and formally GA.

I welcome others thoughts.

Changelog

New

Shows tooltip by default for SegmentedControl.IconButton.
Wraps changes in a new feature flag.

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

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-10T15:57:38Z

🦋 Changeset detected

Latest commit: c92f2d7

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-10T15:58:06Z

👋 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-10T16:00:59Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.57 KB (+0.04% 🔺)
packages/react/dist/browser.umd.js	106.04 KB (+0.14% 🔺)

kendallgassner · 2025-02-10T19:48:00Z

packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx

+          <SegmentedControlIconButtonStyled
+            aria-current={selected}
+            // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
+            aria-label={description ? ariaLabel : undefined}


Since several of the props are the same in line 79-89 should we make a const.

const rest = { aria-current: selected, sx: enabled ? undefined : getSegmentedControlButtonStyles({selected}), className: clsx(enabled && classes.Button, enabled && classes.IconButton), ...rest }

We could also add children ^.

good thought! hmmmm this is a lot of duplication, but I'm thinking that it's maybe fine since we'll remove everything in the else in 1-2 weeks when we GA the code!

TylerJDev · 2025-02-10T21:06:41Z

I'm wondering if we just want to ship it without using unsafeDisableTooltip? Utilizing the prop is definitely safer, so I think that route is good to do if you wanted to stick with it. If we did skip the prop, we could look at the existing instances in Dotcom to see if there's any irregularities to gain confidence before shipping.

We could also feature flag it and staff ship it soon after it's released in Dotcom. Either option is good!

TylerJDev

LGTM! Only comments are how you'd want to ship it in #5679 (comment)

TylerJDev · 2025-02-10T21:09:39Z

packages/react/src/SegmentedControl/SegmentedControl.docs.json

@@ -144,7 +144,7 @@
          "description": "Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl."
        },
        {
-          "name": "selected",
+          "name": "size",


Oh no, this was a typo? 🫣 Good catch! Hope no one used this the wrong way 😅

TylerJDev · 2025-02-10T21:11:24Z

packages/react/src/SegmentedControl/SegmentedControl.docs.json

+          "name": "unsafeDisableTooltip",
+          "type": "boolean",
+          "defaultValue": "false",
+          "required": false
+        },


We could probably forgo this one, as it will only be temporary, and will (hopefully) only be used by us.

primer-integration · 2025-02-11T13:53:00Z

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

khiga8 · 2025-02-11T15:41:51Z

I updated the changes to be wrapped by a new feature flag, after discussing some more with @TylerJDev:

feature flag allows us to toggle off if we notice anything wrong.
we can staff ship the feature flag for 1-2 weeks, then GA
issue to track the flag: https://github.com/github/primer/issues/4775

TylerJDev

Feature flag looks good! Reapproving! ✨

github-actions bot added the integration-tests: recommended label Feb 10, 2025

khiga8 temporarily deployed to github-pages February 10, 2025 16:09 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5679 February 10, 2025 16:10 Inactive

feat: Introduce Tooltip to SegmentedControlIconButton

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

GPG key ID: 4AEE18F83AFDEB23
Expired

Verified
Learn about vigilant mode

d0c3f0a

khiga8 force-pushed the kh-segmented-control-tooltip branch from 58d5f8a to d0c3f0a Compare February 10, 2025 18:30

fix: Ensure tooltip renders description

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

GPG key ID: 4AEE18F83AFDEB23
Expired

Verified
Learn about vigilant mode

0b6f964

khiga8 force-pushed the kh-segmented-control-tooltip branch from 3487280 to 0b6f964 Compare February 10, 2025 18:36

Create sharp-flowers-repair.md

b5764fe

github-actions bot requested a deployment to storybook-preview-5679 February 10, 2025 18:37 Abandoned

fix: run prettier

18b0268

khiga8 temporarily deployed to github-pages February 10, 2025 18:49 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5679 February 10, 2025 18:49 Inactive

test to fill out

1cff4e3

khiga8 temporarily deployed to github-pages February 10, 2025 19:04 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5679 February 10, 2025 19:04 Inactive

khiga8 added 3 commits February 10, 2025 14:11

all tests pass

03ee595

update docs

c0a1013

Run prettier

df61ae2

github-actions bot requested a deployment to storybook-preview-5679 February 10, 2025 19:19 Abandoned

khiga8 marked this pull request as ready for review February 10, 2025 19:21

khiga8 requested a review from a team as a code owner February 10, 2025 19:21

khiga8 requested review from francinelucca, kendallgassner, hectahertz and TylerJDev February 10, 2025 19:21

khiga8 temporarily deployed to github-pages February 10, 2025 19:30 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5679 February 10, 2025 19:31 Inactive

kendallgassner reviewed Feb 10, 2025

View reviewed changes

TylerJDev approved these changes Feb 10, 2025

View reviewed changes

khiga8 temporarily deployed to github-pages February 10, 2025 21:34 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5679 February 10, 2025 21:35 Inactive

khiga8 marked this pull request as draft February 10, 2025 21:58

francinelucca approved these changes Feb 11, 2025

View reviewed changes

khiga8 temporarily deployed to github-pages February 11, 2025 13:50 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5679 February 11, 2025 13:51 Inactive

khiga8 added 3 commits February 11, 2025 10:17

Swap to use feature flag

53fd3c6

Fix syntax issue

9f7de70

Remove unsafeDisableTooltip from branch

c92f2d7

khiga8 force-pushed the kh-segmented-control-tooltip branch from 9a92198 to c92f2d7 Compare February 11, 2025 15:19

khiga8 deployed to github-pages February 11, 2025 15:32 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5679 February 11, 2025 15:33 View deployment

khiga8 marked this pull request as ready for review February 11, 2025 15:42

TylerJDev approved these changes Feb 11, 2025

View reviewed changes

khiga8 added this pull request to the merge queue Feb 11, 2025

Merged via the queue into main with commit dbcb8f7 Feb 11, 2025
47 checks passed

khiga8 deleted the kh-segmented-control-tooltip branch February 11, 2025 16:51

primer bot mentioned this pull request Feb 10, 2025

Release tracking (37.13.0) #5665

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Introduce Tooltip to SegmentedControlIconButton #5679

feat: Introduce Tooltip to SegmentedControlIconButton #5679

khiga8 commented Feb 10, 2025 •

edited

Loading

changeset-bot bot commented Feb 10, 2025 •

edited

Loading

github-actions bot commented Feb 10, 2025

github-actions bot commented Feb 10, 2025 •

edited

Loading

kendallgassner Feb 10, 2025

khiga8 Feb 11, 2025

TylerJDev commented Feb 10, 2025

TylerJDev left a comment

TylerJDev Feb 10, 2025

TylerJDev Feb 10, 2025

primer-integration bot commented Feb 11, 2025

khiga8 commented Feb 11, 2025

TylerJDev left a comment

feat: Introduce Tooltip to SegmentedControlIconButton #5679

feat: Introduce Tooltip to SegmentedControlIconButton #5679

Conversation

khiga8 commented Feb 10, 2025 • edited Loading

Changelog

New

Rollout strategy

Merge checklist

changeset-bot bot commented Feb 10, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Feb 10, 2025

github-actions bot commented Feb 10, 2025 • edited Loading

size-limit report 📦

kendallgassner Feb 10, 2025

Choose a reason for hiding this comment

khiga8 Feb 11, 2025

Choose a reason for hiding this comment

TylerJDev commented Feb 10, 2025

TylerJDev left a comment

Choose a reason for hiding this comment

TylerJDev Feb 10, 2025

Choose a reason for hiding this comment

TylerJDev Feb 10, 2025

Choose a reason for hiding this comment

primer-integration bot commented Feb 11, 2025

khiga8 commented Feb 11, 2025

TylerJDev left a comment

Choose a reason for hiding this comment

khiga8 commented Feb 10, 2025 •

edited

Loading

changeset-bot bot commented Feb 10, 2025 •

edited

Loading

github-actions bot commented Feb 10, 2025 •

edited

Loading