Update button background color to ensure storybook examples meet cont…

…rast (#4529) * Update background color * Adjust color * docs: update docs with protip about labels * * Adjust background color, remove difficult-to-maintain example * test(vrt): update snapshots --------- Co-authored-by: khiga8 <[email protected]>
primer · Apr 25, 2024 · abeef0b · abeef0b
1 parent 8b4d838
commit abeef0b
Show file tree

Hide file tree

Showing 7 changed files with 6 additions and 6 deletions.
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png
diff --git a/contributor-docs/testing.md b/contributor-docs/testing.md
@@ -132,6 +132,9 @@ available, check out the table below.
 > However, screenshots will not match and new ones will need to be generated on
 > your first test run.
 
+> [!TIP]
+> To re-generate snapshots within your pull request, add the `update snapshots` label.
+
 ### Prerequisites
 
 To run Playwright locally, first install the dependencies of the project by

diff --git a/packages/react/src/Button/Button.dev.stories.tsx b/packages/react/src/Button/Button.dev.stories.tsx
@@ -53,20 +53,17 @@ export const TestSxProp = () => {
           },
           [`@media screen and (max-width: 768px)`]: {
             color: 'maroon',
-          },
-          '@media screen and (min-width: 768px)': {
-            ':focus': {
-              color: 'green',
-            },
+            backgroundColor: '#F6F8FA',
           },
           '@media (min-width: 1440)': {
             color: 'firebrick',
+            backgroundColor: '#F6F8FA',
           },
         }}
       >
         Red
       </Button>
-      <Button variant="invisible" sx={{color: 'firebrick'}}>
+      <Button variant="invisible" sx={{color: 'firebrick', backgroundColor: '#F6F8FA'}}>
         Invariant color overridden
       </Button>
       <Button leadingVisual={IssueClosedIcon} sx={{color: 'done.fg'}}>