Segmented Control

[marcelines]

Changes

• Adds Segmented Control component to components package along with its story.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 34855e144da90d584d00d626fa2fe83e3eb45460

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | --------------------- | ----- | | @status-im/components | Patch |

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

[vercel[bot]]

@marcelines is attempting to deploy a commit to the Status Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
status-components	✅ Ready (Inspect)	Visit Preview	💬 2 unresolved ✅ 4 resolved	Oct 14, 2024 9:13am

[prichodko]

This should be implemented using https://www.radix-ui.com/primitives/docs/components/toggle-group#examples, don't you think?

[prichodko]

Next time you update the composition (like adding context), think it through. Adding React Context eliminates the need for these cloning gymnastics.

[marcelines]

Next time you update the composition (like adding context), think it through. Adding React Context eliminates the need for these cloning gymnastics.

You're absolutely right. I'm tired and i missed it. But i still need it to be cloned so that i can pass the ref to have the animated selector.

[status-im-auto]

Jenkins Builds

Click to see older builds (1)

| :grey_question: | Commit | :hash: | Finished (UTC) | Duration | Platform | Result | |-|-|-|-|-|-|-| | :x: | e4e2372b | [#1](https://ci.status.im/job/status-web/job/prs/job/linux/job/PR-591/1/) | 2024-10-17 11:05:30 | ~17 sec | `chrome` | [:page_facing_up:`log`](https://ci.status.im/job/status-web/job/prs/job/linux/job/PR-591/1/consoleText) |

:grey_question:	Commit	:hash:	Finished (UTC)	Duration	Platform	Result
:x:	c99d7d9c	#2	2024-10-17 12:41:28	~14 sec	chrome	:page_facing_up:log
:x:	34855e14	#3	2024-10-17 13:04:29	~14 sec	chrome	:page_facing_up:log

[prichodko]

I see you've already checked the changes @marcelines 👍.

I made a few cosmetic changes to align with other components in the library. Reordering, renaming from "tab" to "segment"...

I removed the distinction between icon and emoji because we a) currently don't have a defined approach to handling emojis and b) we don't support them in <Tabs /> either. However, I hope that when the time comes, we can reuse the icon prop for emojis (e.g. `icon={ because they seem identical.

Added hook to consume context to this component and <Tabs />.