fix: update background color stories #859
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Contributor
📖 Storybook Preview |
georgewrmarshall
commented
Dec 4, 2025
| const TextComponents = () => ( | ||
| <> | ||
| <Text variant={TextVariant.HeadingSm}>Text & Icon Colors</Text> | ||
| <Box twClassName="space-y-2"> |
Contributor
Author
There was a problem hiding this comment.
space-y-2 doesn't work with twrnc
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
georgewrmarshall
commented
Dec 4, 2025
| const Backgrounds: React.FC = () => { | ||
| const tw = useTailwind(); | ||
| return ( | ||
| <ScrollView style={tw`flex-1 bg-default`}> |
Contributor
Author
There was a problem hiding this comment.
background/default is right up against the edge of text here. Going to move to change storybook background color altogether
georgewrmarshall
commented
Dec 4, 2025
| <Icon name={IconName.Info} color={IconColor.IconMuted} /> | ||
| <Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text> | ||
| </Box> | ||
| <TextButton>Text Button</TextButton> |
Contributor
Author
There was a problem hiding this comment.
Moving TextButton to text where it's likely to be used instead of in a button group
georgewrmarshall
commented
Dec 4, 2025
| <Icon name={IconName.Info} color={IconColor.IconMuted} /> | ||
| <Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text> | ||
| </Box> | ||
| <TextButton>Text Button</TextButton> |
Contributor
Author
There was a problem hiding this comment.
Moving TextButton to text where it's likely to be used instead of in a button group
brianacnguyen
approved these changes
Dec 4, 2025
Contributor
📖 Storybook Preview |
brianacnguyen
pushed a commit
that referenced
this pull request
Dec 9, 2025
## **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. <!-- CURSOR_SUMMARY --> --- > [!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/[email protected]`)** > - Add `ButtonHero` component for prominent CTAs. > - Update `@metamask/utils` peer to `^11.8.1`. > - **React Native (`@metamask/[email protected]`)** > - 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/[email protected]`)** > - 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> <!-- /CURSOR_SUMMARY -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR improves the Background color stories in both React and React Native Storybook by:
space-y-2in favor of explicitflexDirectionandgapprops for better React Native compatibilitytwClassNamepadding with explicitpaddingprop, and removed unnecessarybackgroundColoron parent Box componentsThese 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
yarn storybook:react-nativeyarn storybook:reactScreenshots/Recordings
Before
TextButtoncan't be seen on page because of horizontal flexboxAfter
All buttons are visible.
bg.color.after.mov
Pre-merge author checklist
Pre-merge reviewer checklist
🤖 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).
apps/storybook-react-native/stories/Backgrounds.stories.tsx)ButtonComponentsfrom row to column withisFullWidthbuttons; removeTextButtonfrom this group.TextButtontoTextComponents; replace Tailwindspace-y-2withflexDirection={Column}andgap.bg-default/parentbackgroundColor; switch padding fromtwClassNametopaddingprop; keep rounded corners viatwClassName.apps/storybook-react/stories/Backgrounds.stories.tsx)TextButtonfromButtonComponentstoTextComponentsto align with RN story.Written by Cursor Bugbot for commit 230fa35. This will update automatically on new commits. Configure here.