SegmentedControl: add subtle variant and action slot - #8325
Open
liuliu-dev wants to merge 6 commits into
Open
Conversation
🦋 Changeset detectedLatest commit: db27ab0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
Bot
added
the
integration-tests: recommended
Contributor
|
…ttps://github.com/primer/react into liuliu/segmentedcontrol-add-subtle-and-action-slot
|
Integration test results from github/github-ui PR: |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds new UI capabilities to SegmentedControl in @primer/react by introducing a lower-emphasis variant="subtle" and a new compound slot SegmentedControl.Action intended for trailing actions (e.g., “Add view”), with supporting styling, docs, Storybook examples, and tests.
Changes:
- Added
variant="subtle"styling anddividerBeforesupport for grouping segments visually. - Introduced
SegmentedControl.Actionand wired it intoSegmentedControlviauseSlots. - Updated docs/stories/tests and added a changeset for a minor release.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx | Adds dividerBefore prop and exposes it via data-divider-before. |
| packages/react/src/SegmentedControl/SegmentedControlButton.tsx | Adds dividerBefore prop and exposes it via data-divider-before. |
| packages/react/src/SegmentedControl/SegmentedControlAction.tsx | Adds new SegmentedControl.Action slot component (trailing action). |
| packages/react/src/SegmentedControl/SegmentedControl.tsx | Supports subtle variant and extracts/renders the new Action slot via useSlots. |
| packages/react/src/SegmentedControl/SegmentedControl.test.tsx | Adds tests for subtle variant, dividers, and action click behavior. |
| packages/react/src/SegmentedControl/SegmentedControl.module.css | Implements subtle variant visuals, divider rendering, and action button sizing/hover styles. |
| packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx | Adds feature stories for subtle variant and trailing action. |
| packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css | Styles the reset button in the new feature story. |
| packages/react/src/SegmentedControl/SegmentedControl.docs.json | Documents subtle, dividerBefore, and the new SegmentedControl.Action API. |
| packages/react/src/SegmentedControl/index.ts | Exports SegmentedControlActionProps type. |
| .changeset/segmented-control-subtle-add-view.md | Declares a minor bump for the new public API surface. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 11/11 changed files
- Comments generated: 5
- Review effort level: Lite
Comment on lines
+1
to
+12
| import {PlusIcon} from '@primer/octicons-react' | ||
| import type {ElementType} from 'react' | ||
| import {IconButton} from '../Button' | ||
| import type {IconButtonProps} from '../Button' | ||
| import type {FCWithSlotMarker} from '../utils/types' | ||
| import classes from './SegmentedControl.module.css' | ||
|
|
||
| type DistributiveOmit<Type, Key extends PropertyKey> = Type extends unknown ? Omit<Type, Key> : never | ||
|
|
||
| export type SegmentedControlActionProps = DistributiveOmit<IconButtonProps, 'icon'> & { | ||
| icon?: ElementType | ||
| } |
Comment on lines
+22
to
+24
| export default SegmentedControlAction | ||
|
|
||
| SegmentedControlAction.__SLOT__ = Symbol('SegmentedControl.Action') |
Comment on lines
+278
to
+288
| .PlusItem { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-inline-start: var(--base-size-4); | ||
| } | ||
|
|
||
| .PlusItem button { | ||
| width: 32px; | ||
| height: 32px; | ||
| padding: 0; | ||
| } |
Comment on lines
+214
to
217
| return React.cloneElement(child, {key: child.key ?? `segmented-control-item-${index}`, ...sharedChildProps}) | ||
| })} | ||
| {actionChild} | ||
| </ul> |
Comment on lines
+421
to
+423
| .SegmentedControl:where([data-variant='subtle']) .Button:where(:not([aria-pressed='true'])):hover .Content { | ||
| background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent); | ||
| } |
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.
Closes https://github.com/github/primer/issues/6973
Adds a subtle variant and an optional action slot to
SegmentedControl.Changelog
New
variant="subtle"for lower-emphasis view selectorsSegmentedControl.Actionfor actions such as adding a new view.Rollout strategy
Testing & Reviewing