MetaMask / MetaMask/metamask-design-system

Follow up: Clean up SegmentButton and SelectButton Storybook enum controls

Open Beginner friendly
#1,199 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

## Overview

Follow-up from #1172 to clean up Storybook controls for optional enum props on `SegmentButton` and `SelectButton`.

## Problem

Some optional enum controls do not expose the unset/default state consistently:

- `SegmentButton` `variant` uses only `Object.values(SegmentButtonVariant)`.
- `SelectButton` `variant` uses only `Object.values(SelectButtonVariant)`.
- `SelectButton` `endArrowDirection` includes `undefined`, but places it at the end instead of first.

For optional enum props, Storybook controls should include `undefined` as the first option so consumers can clear the control and inspect default behavior.

## Acceptance Criteria

- [ ] `SegmentButton` `variant` control includes `undefined` as the first option.
- [ ] `SelectButton` `variant` control includes `undefined` as the first option.
- [ ] `SelectButton` `endArrowDirection` control places `undefined` first.
- [ ] Story names remain aligned to prop names in PascalCase.

## References

- PR: https://github.com/MetaMask/metamask-design-system/pull/1172
- Cursor rule: Storybook select options for optional enum props should include `undefined` first.
- Files:
- `packages/design-system-react-native/src/components/SegmentButton/SegmentButton.stories.tsx`
- `packages/design-system-react-native/src/components/SelectButton/SelectButton.stories.tsx`

Contributor guide

Open the contributing guide

Research direction

Start with packages/design-system-react-native/src/components/SegmentButton/SegmentButton.stories.tsx and SelectButton/SelectButton.stories.tsx. Inspect the optional enum control definitions and the related story names. Done means undefined is the first option for all three specified controls and story names remain aligned with prop names in PascalCase.

Written by the indexing model from the issue text.

Assessment

Tech stack
storybook, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.