Skip to content

feat(ButtonGroup): add segmented ButtonGroup to next entry#1138

Merged
bert-e merged 2 commits into
development/1.0from
feature/button-group
Jun 19, 2026
Merged

feat(ButtonGroup): add segmented ButtonGroup to next entry#1138
bert-e merged 2 commits into
development/1.0from
feature/button-group

Conversation

@damiengillesscality

@damiengillesscality damiengillesscality commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a ButtonGroup component, exported from @scality/core-ui/next, that restyles its child Buttons into a single segmented control.

This generalises the local SegmentedControl/SegmentedGroup introduced in artesca-maestro#650 (the deployments-list "Sort by" / "Group by" controls) into a reusable core-ui component, so maestro can drop its bespoke styled.div/styled.button and consume this instead.

The API is inspired by MUI's ButtonGroup/ToggleButtonGroup but kept intentionally minimal and adapted to our use case.

API

Prop Purpose
value + onChange Optional single-select toggle. Each child carries a value; the matching child is highlighted (aria-pressed). Pass null for no selection.
orientation 'horizontal' (default) or 'vertical'.
children core-ui Buttons. Without value/onChange the group is a plain visual cluster, each child keeping its own onClick.
import { Button, ButtonGroup } from '@scality/core-ui/next';

<ButtonGroup value={sortBy} onChange={handleSortChange} aria-label="Sort by">
  <Button value="name" label="Name" />
  <Button value="version" label="Version" />
</ButtonGroup>

Behaviour

  • Joins child buttons into one bordered group, collapsing their individual radii/borders into shared hairline separators.
  • Selected segment is highlighted using the existing theme tokens (backgroundLevel1, textPrimary, selectedActive) — same look as the original maestro control.
  • null value renders no selection (supports maestro's clearable "Group by").
  • Vertical groups render equal-width rows; horizontal cells keep their natural width.

Stories

Components/ButtonGroup: SortBy, GroupByClearable, Vertical, PlainGroup, Playground.

image image image

Tests

5 unit tests (rendering, aria-pressed selection, onChange payload, child onClick preservation, no selection props without onChange). eslint and tsc --noEmit clean.

Add a ButtonGroup component (exported from @scality/core-ui/next) that
restyles its child Buttons into a single segmented control. Inspired by
MUI's ButtonGroup/ToggleButtonGroup but kept minimal for maestro's use
case (sort by / group by controls in the deployments list header):

- joins child Buttons into one bordered group, collapsing their
  individual radii/borders into shared separators
- optional single-select toggle via `value` + `onChange`; the child whose
  `value` matches is highlighted (aria-pressed), `null` selects none
- `orientation` for horizontal (default) or vertical layouts
- without `value`/`onChange` it is a plain visual cluster of buttons

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Hello damiengillesscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval
/bypass_build_status Bypass the build and test status
/bypass_commit_size Bypass the check on the size of the changeset TBA
/bypass_incompatible_branch Bypass the check on the source branch prefix
/bypass_jira_check Bypass the Jira issue check
/bypass_peer_approval Bypass the pull request peers' approval
/bypass_leader_approval Bypass the pull request leaders' approval
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request TBA
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

Comment thread src/lib/components/buttongroup/ButtonGroup.component.tsx
A valueless child in selectable mode is a no-op on click, so it must not
advertise a toggle/pressed state to assistive tech. Inject aria-pressed
only when the child carries a value.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@damiengillesscality

Copy link
Copy Markdown
Contributor Author

/approve

@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

In the queue

The changeset has received all authorizations and has been added to the
relevant queue(s). The queue(s) will be merged in the target development
branch(es) as soon as builds have passed.

The changeset will be merged in:

  • ✔️ development/1.0

There is no action required on your side. You will be notified here once
the changeset has been merged. In the unlikely event that the changeset
fails permanently on the queue, a member of the admin team will
contact you to help resolve the matter.

IMPORTANT

Please do not attempt to modify this pull request.

  • Any commit you add on the source branch will trigger a new cycle after the
    current queue is merged.
  • Any commit you add on one of the integration branches will be lost.

If you need this pull request to be removed from the queue, please contact a
member of the admin team now.

The following options are set: approve

@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

I have successfully merged the changeset of this pull request
into targetted development branches:

  • ✔️ development/1.0

Please check the status of the associated issue None.

Goodbye damiengillesscality.

@bert-e bert-e merged commit d99bf11 into development/1.0 Jun 19, 2026
8 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants