fix: update background color stories by georgewrmarshall · Pull Request #859 · MetaMask/metamask-design-system

georgewrmarshall · 2025-12-04T00:46:30Z

Description

This PR improves the Background color stories in both React and React Native Storybook by:

Better component layout: Changed button layout from horizontal row to vertical column with full-width buttons in React Native for better visibility and consistency
Improved structure: Removed Tailwind's space-y-2 in favor of explicit flexDirection and gap props for better React Native compatibility
Fixed text button placement: Moved TextButton from ButtonComponents to TextComponents section where it better fits with other text and icon color demonstrations
Cleaner styling: Replaced inline twClassName padding with explicit padding prop, and removed unnecessary backgroundColor on parent Box components

These changes make the Background stories more consistent between web and React Native, and improve the visual demonstration of the different background color tokens.

Related issues

Fixes: N/A (Internal improvement)

Manual testing steps

Run React Native Storybook: yarn storybook:react-native
Navigate to the Backgrounds story
Verify buttons are displayed vertically and full-width
Verify TextButton appears in the Text & Icon Colors section
Verify all background levels (Default > Section > Subsection) are clearly visible
Run React Storybook: yarn storybook:react
Navigate to the Backgrounds story
Verify the same improvements are reflected

Screenshots/Recordings

Before

TextButton can't be seen on page because of horizontal flexbox

After

All buttons are visible.

bg.color.after.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs
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.

🤖 Generated with Claude Code

Note

Reorganizes Backgrounds stories by making RN buttons vertical and full-width, moving TextButton into the text section, and replacing Tailwind spacing/padding with explicit props (with analogous TextButton move in React).

React Native Story (apps/storybook-react-native/stories/Backgrounds.stories.tsx)
- Buttons layout: Change ButtonComponents from row to column with isFullWidth buttons; remove TextButton from this group.
- Text section: Add TextButton to TextComponents; replace Tailwind space-y-2 with flexDirection={Column} and gap.
- Styling cleanup: Remove bg-default/parent backgroundColor; switch padding from twClassName to padding prop; keep rounded corners via twClassName.
React Story (apps/storybook-react/stories/Backgrounds.stories.tsx)
- Move TextButton from ButtonComponents to TextComponents to align with RN story.

^{Written by Cursor Bugbot for commit 230fa35. This will update automatically on new commits. Configure here.}

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2025-12-04T00:47:33Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-12-04T00:49:13Z

apps/storybook-react-native/stories/Backgrounds.stories.tsx

 const TextComponents = () => (
  <>
    <Text variant={TextVariant.HeadingSm}>Text & Icon Colors</Text>
-    <Box twClassName="space-y-2">


space-y-2 doesn't work with twrnc

apps/storybook-react-native/stories/Backgrounds.stories.tsx

georgewrmarshall · 2025-12-04T00:52:24Z

apps/storybook-react-native/stories/Backgrounds.stories.tsx

 const Backgrounds: React.FC = () => {
  const tw = useTailwind();
  return (
-    <ScrollView style={tw`flex-1 bg-default`}>


background/default is right up against the edge of text here. Going to move to change storybook background color altogether

georgewrmarshall · 2025-12-04T00:52:57Z

apps/storybook-react/stories/Backgrounds.stories.tsx

        <Icon name={IconName.Info} color={IconColor.IconMuted} />
        <Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text>
      </Box>
+      <TextButton>Text Button</TextButton>


Moving TextButton to text where it's likely to be used instead of in a button group

georgewrmarshall · 2025-12-04T00:53:12Z

apps/storybook-react-native/stories/Backgrounds.stories.tsx

        <Icon name={IconName.Info} color={IconColor.IconMuted} />
        <Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text>
      </Box>
+      <TextButton>Text Button</TextButton>


Moving TextButton to text where it's likely to be used instead of in a button group

github-actions · 2025-12-04T03:22:59Z

📖 Storybook Preview

View PR Storybook

## **Description** This PR releases version 17.0.0 of the MetaMask Design System, featuring important fixes for mobile font compatibility, the addition of the ButtonHero component to React, export fixes for React Native, and various dependency updates including ESLint configuration upgrades. ## **Included PRs** #836, #837, #838, #840, #843, #845, #846, #847, #848, #850, #851, #852, #853, #854, #855, #856, #857, #858, #859, #861, #862, #863, #864 ## **Manual testing steps** 1. Check package.json version bumps align with included changes 2. Check changelog accurately reflects the release ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.  --- > [!NOTE] > Release 17.0.0 introducing React `ButtonHero`, RN font naming changes and TWRNC preset font family rename (both breaking), plus RN export fix and dependency updates. > > - **Release 17.0.0** > - Bump root `package.json` to `17.0.0`. > - **React (`@metamask/design-system-react@0.6.0`)** > - Add `ButtonHero` component for prominent CTAs. > - Update `@metamask/utils` peer to `^11.8.1`. > - **React Native (`@metamask/design-system-react-native@0.5.0`)** > - BREAKING: Rename font files to hyphenated PostScript format for iOS Metro compatibility. > - Export missing `TextButtonSize` enum. > - Peer: require `@metamask/design-system-twrnc-preset@^0.3.0`; update `@metamask/utils` peer. > - **TWRNC preset (`@metamask/design-system-twrnc-preset@0.3.0`)** > - BREAKING: Rename font family names to hyphenated PostScript format for iOS/expo-font. > - **Changelogs** > - Update `CHANGELOG.md` links and entries for all packages. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 9a90311. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

georgewrmarshall and others added 2 commits December 3, 2025 19:22

fix: updating background color stories

ae8ecb6

fix: remove unused import in Backgrounds.stories.tsx

fb715a5

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

georgewrmarshall requested a review from a team as a code owner December 4, 2025 00:46

georgewrmarshall self-assigned this Dec 4, 2025

georgewrmarshall commented Dec 4, 2025

View reviewed changes

cursor bot reviewed Dec 4, 2025

View reviewed changes

apps/storybook-react-native/stories/Backgrounds.stories.tsx Show resolved Hide resolved

georgewrmarshall commented Dec 4, 2025

View reviewed changes

brianacnguyen approved these changes Dec 4, 2025

View reviewed changes

Merge branch 'main' into background-story-fixes

230fa35

georgewrmarshall merged commit 18896c0 into main Dec 4, 2025
42 checks passed

georgewrmarshall deleted the background-story-fixes branch December 4, 2025 03:28

georgewrmarshall mentioned this pull request Dec 9, 2025

Release/17.0.0 #865

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: update background color stories#859

fix: update background color stories#859
georgewrmarshall merged 3 commits intomainfrom
background-story-fixes

georgewrmarshall commented Dec 4, 2025 •

edited by cursor bot

Loading

Uh oh!

github-actions bot commented Dec 4, 2025

Uh oh!

georgewrmarshall Dec 4, 2025 •

edited

Loading

Uh oh!

Uh oh!

georgewrmarshall Dec 4, 2025

Uh oh!

georgewrmarshall Dec 4, 2025

Uh oh!

georgewrmarshall Dec 4, 2025

Uh oh!

github-actions bot commented Dec 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

georgewrmarshall commented Dec 4, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Dec 4, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

georgewrmarshall Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 4, 2025

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Dec 4, 2025 •

edited by cursor bot

Loading

georgewrmarshall Dec 4, 2025 •

edited

Loading