Skip to content

feat: add segmented control radio and tabs - #1101

Draft
nats12 wants to merge 1 commit into
mainfrom
codex/segmented-control
Draft

feat: add segmented control radio and tabs#1101
nats12 wants to merge 1 commit into
mainfrom
codex/segmented-control

Conversation

@nats12

@nats12 nats12 commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Short description

Adds the Todoist segmented-control patterns to Reactist while preserving the existing compound Tabs API.

  • Adds options-based SegmentedControlRadio and SegmentedControlTabs components with controlled and uncontrolled selection.
  • Supports disabled options, icons, rich labels, tooltips, extra labels/icons, link-rendered tabs, panel render modes, alignment, and full-width layouts.
  • Moves the existing compound Tabs component onto the shared segmented-control styling and removes its old sliding indicator implementation.
  • Adds React 18/19 tests, accessibility coverage, and Storybook examples, organized as Segmented Control → Radio/Tabs and Tabs → Compound API.
  • Handles equal-height wrapped labels for narrow full-width consumers such as Todoist Developer Options.

Locally verified through Reactist Storybook and in Todoist Web via yalc.

References

PR Checklist

  • Added tests for bugs / new features
  • Updated docs (storybooks, readme)
  • Reviewed and approved Chromatic visual regression tests in CI

@nats12

nats12 commented Jul 30, 2026

Copy link
Copy Markdown
Contributor Author

@frankieyan before I send this off to review, it has been a while so wanted to check our process on this. I haven't removed the current Reactist Tabs from in here yet. So currently both exist:

Screenshot 2026-07-30 at 10 25 33

This is largely to not break consumers.

Would we mark as deprecated, then once this is merged, and OUR consumers are on the latest component, then completely remove?

@frankieyan

Copy link
Copy Markdown
Member

@frankieyan before I send this off to review, it has been a while so wanted to check our process on this. I haven't removed the current Reactist Tabs from in here yet. So currently both exist:

Screenshot 2026-07-30 at 10 25 33 This is largely to not break consumers.

Would we mark as deprecated, then once this is merged, and OUR consumers are on the latest component, then completely remove?

Yeah! I think marking the old tabs as deprecated first would be the way to go.

I'd go with adding a badge to the stories:

badges: ['partiallyAccessible', 'deprecated']

And marking the components themselves as deprecated with jsdoc: https://jsdoc.app/tags-deprecated

But not rename the button to avoid a breaking change for now (but of course if you'd like to offload the renaming in consumers or even migrate right way to an agent, that's fine too!)

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