Skip to content

feat: add segmented control component - #1401

Merged
edlerd merged 4 commits into
canonical:mainfrom
mushroomgenie:feat-segmented-control-component
Aug 5, 2026
Merged

feat: add segmented control component#1401
edlerd merged 4 commits into
canonical:mainfrom
mushroomgenie:feat-segmented-control-component

Conversation

@mushroomgenie

Copy link
Copy Markdown
Contributor

Done

  • This PR implements the Segmented Control component from Vanilla Framework in RC.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start
segmented-control

QA in your project

from react-components run:

yarn build
npm pack

yarn build and npm back is successfull.
Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

  • Steps for QA.

Percy steps

  • List any expected visual change in Percy, or write something like "No visual changes expected" if none is expected.

Fixes

Fixes: #1365 .

@edlerd edlerd left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the contribution!

Quite a few concerns and thoughts on the proposed component can be found below.

Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
Comment thread src/components/SegmentedControl/SegmentedControl.tsx
Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
@mushroomgenie

Copy link
Copy Markdown
Contributor Author

@edlerd thank you for your review, I'll take a look at the proposed changes and update the PR.

@mushroomgenie

Copy link
Copy Markdown
Contributor Author

@edlerd made the changes, can you please check ?

@edlerd edlerd left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the adjustments. Nearly perfect, just one question left below then it can be merged from my side.

Also, can you please rebase on main to get the latest changes in?

Comment thread src/components/SegmentedControl/SegmentedControl.tsx Outdated
@mushroomgenie

Copy link
Copy Markdown
Contributor Author

@edlerd removed the tabIndex

Mashrukh Islam added 3 commits August 4, 2026 15:29
* remove datatest-id from components
* add id to button
* add proper key to button
* replace datatest-id in tabpanel with aria-labelleby attribute
* remove unncessary props
* change segmentIcon to iconName with correct props
* update stories and tests accordingly
@mushroomgenie
mushroomgenie force-pushed the feat-segmented-control-component branch from e1d4b22 to d397995 Compare August 4, 2026 09:59

@edlerd edlerd left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for the follow-up fixes!

@mushroomgenie

Copy link
Copy Markdown
Contributor Author

@edlerd the snapshot failed, I'll re run the test and push it.

@mushroomgenie

Copy link
Copy Markdown
Contributor Author

@edlerd thanks for reviewing, I have pushed the updated snapshot.

@edlerd
edlerd merged commit 26a8f37 into canonical:main Aug 5, 2026
8 checks passed
@edlerd

edlerd commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Thanks for your contributions @mushroomgenie !

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown

🎉 This PR is included in version 4.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Segmented Control component

2 participants