MetaMask / MetaMask/metamask-design-system

Follow up: Fix SegmentButton and SelectButton loading spinner colors

Open
#1,200 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. `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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.