Description

This PR adds a new component

• SegmentedControl: A versatile control component supporting both single and multi-select modes, with options for scrollable content and icon integration

Figma Designs:

Segmented Control : https://www.figma.com/design/HKpPKij9V3TpsyMV1TpV7C/DS-Components?node-id=21177-52932&t=h4Y3QeK29FY8VgjR-4

Related issues

Fixes: MMS-1988

Manual testing steps

SegmentedControl Component

• Navigate to Storybook and locate the SegmentedControl stories

• Test single-select mode:
  - Verify only one option can be selected at a time
  - Confirm the selected option is visually distinguished

• Test multi-select mode:
  - Verify multiple options can be selected simultaneously
  - Confirm selected options are visually distinguished
  - Test adding and removing selections
  - Test scrollable configuration with many options
  - Verify options with icons render correctly

Screenshots/Recordings

Before

After

Segmented Control Storybook

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.