Skip to content

feat: added segmented controls component#105

Open
giuliana-gladeye wants to merge 4 commits into
mainfrom
feat/GOV-349-segmented-controls
Open

feat: added segmented controls component#105
giuliana-gladeye wants to merge 4 commits into
mainfrom
feat/GOV-349-segmented-controls

Conversation

@giuliana-gladeye

Copy link
Copy Markdown
Collaborator

Add SegmentedControls component

Added SegmentedControls component, refactored from the single purpose ListOrGridViewToggle into a reusable control that supports a developer-defined set of options.

Features:

  • Renders any number of segments via an options array, controlled by value / onValueChange.
  • Each option supports a prefix icon, a required label, and an optional suffix slot.
  • display prop mirroring Badgeboth (default), text-only, and icon-onlyicon-only falls back to both if any option lacks an icon, and uses the mandatory label as the accessible label/tooltip.
  • Active segment is highlighted with the primary button colour via a sliding indicator that measures segment widths (so it aligns with variable-width text) and stays in sync on resize.
  • Docs page and interactive demos under the demo package.

Linear ticket

screencapture-localhost-4321-components-segmented-controls-2026-07-03-13_04_23

@Shrinks99

Copy link
Copy Markdown
Member

Will review style before merging!

@giuliana-gladeye

Copy link
Copy Markdown
Collaborator Author

@Shrinks99 updates:

  • Added TypeScript (@deprecated JSDoc)
  • Added deprecated schema fields to docs frontmatter
  • Deprecated ListOrGridViewToggle component
screencapture-localhost-4321-components-list-or-grid-view-toggle-2026-07-07-15_22_53

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.

2 participants