feat(components): Add size prop to SegmentedControl

[taylorvnoj]

Motivations

Some current implementations of similar components within product have varying heights. We can match our Button component and offer 2 sizes, base & small

Changes

Added

• size prop that is set on the parent
• added a Sizes story to show what base and small look like

Changed

• the default SegmentedControl is now 40px in height to match other components like Button, where the base is also 40px
• now the small variation is 32px in height

Testing

Check out the Sizes story.

I'll also share video, to show that a long label (although not recommended) will still give the same spacing, etc between base & small

https://github.com/user-attachments/assets/e611eee1-15f8-4151-86f5-ea8fbea49d4d

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages[bot]]

Deploying atlantis with    Cloudflare Pages

Latest commit:	e40927e
Status:	✅  Deploy successful!
Preview URL:	https://f03d6988.atlantis.pages.dev
Branch Preview URL:	https://job-102855-job-107705-add-si.atlantis.pages.dev

View logs

[taylorvnoj]

@chris-at-jobber I made some assumptions with this, so am looking for any ideas/thoughts/feedback:

• are the base sized examples ok on the Docs page? Or should I change those back to small?
• is aligning with Button in terms of heights the right thing to do?

[chris-at-jobber]

is aligning with Button in terms of heights the right thing to do? ✅

are the base sized examples ok on the Docs page? ✅

[Aiden-Brine]

Not a suggestion for you to add them to this PR but I think we should have a conversation as a team about if we add tests for this type of thing. I have seen tests in our codebase for this type of thing (essentially testing for the existence of a CSS class). Definitely pros and cons to those but would just be good to lock down either yes or no to us writing those types of tests. But again, not a suggestion here