MetaMask / MetaMask/metamask-design-system
Follow up: Fix SegmentButton and SelectButton loading spinner colors
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
## Overview
Follow-up from #1172. `SegmentButton` and `SelectButton` can pass an empty string into `ButtonBase`'s loading spinner color path.
## Problem
`ButtonBase` derives the loading spinner color from `textClassName(pressed)` when `textClassName` is provided:
```tsx
color={
textClassName
? (textClassName(pressed) as IconColor)
: IconColor.IconDefault
}
```
The new components sometimes return `''` from `textClassName` / `iconClassName`:
- `SegmentButton`: unselected states return `''`
- `SelectButton`: tertiary variant returns `''`
Because `''` is still passed as an explicit `color` prop, it bypasses `Spinner`'s `IconColor.IconDefault` default and leaves the loading icon without a valid design-system color class.
## Acceptance Criteria
- [ ] Loading spinner color is valid for every `SegmentButton` variant/selected combination.
- [ ] Loading spinner color is valid for every `SelectButton` variant.
- [ ] Tests cover the loading spinner color for the affected unselected/tertiary states.
## References
- PR: https://github.com/MetaMask/metamask-design-system/pull/1172
- Current code:
- `packages/design-system-react-native/src/components/SegmentButton/SegmentButton.tsx`
- `packages/design-system-react-native/src/components/SelectButton/SelectButton.tsx`
- `packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx`
Contributor guide
Research direction
Read SegmentButton.tsx, SelectButton.tsx, and ButtonBase.tsx to trace how textClassName and iconClassName reach the loading spinner. Inspect the existing tests for these components, then add coverage for unselected SegmentButton states and the SelectButton tertiary variant; done means every listed variant has a valid spinner color.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100