[Bug] Remove flex from Button labels (#3613)

* remove flex * test(vrt): update snapshots * Create empty-ears-fly.md * snaps --------- Co-authored-by: langermank <[email protected]>
primer · Aug 14, 2023 · dbcd407 · dbcd407
1 parent ace603d
commit dbcd407
Show file tree

Hide file tree

Showing 32 changed files with 7 additions and 99 deletions.
diff --git a/.changeset/empty-ears-fly.md b/.changeset/empty-ears-fly.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+[Bug] Remove `flex` from Button labels
+
+<!-- Changed components: Button -->
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png
diff --git a/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png
diff --git a/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png
diff --git a/...mponents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/...mponents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/...s/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png
diff --git a/...hots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/...hots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png
diff --git a/.../Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.../Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png
diff --git a/...ots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/...ots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png
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/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -298,9 +298,6 @@ export const getButtonStyles = (theme?: Theme) => {
       gridArea: 'text',
       lineHeight: 'calc(20/14)',
       whiteSpace: 'nowrap',
-      // remove flex in next major release
-      display: 'flex',
-      alignItems: 'center',
     },
     '[data-component="trailingVisual"]': {
       gridArea: 'trailingVisual',

diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -178,14 +178,6 @@ exports[`ActionMenu renders consistently 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c1 [data-component="trailingVisual"] {

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -164,14 +164,6 @@ exports[`Button renders consistently 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -405,14 +397,6 @@ exports[`Button respects block prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -652,14 +636,6 @@ exports[`Button respects the alignContent prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -898,14 +874,6 @@ exports[`Button respects the large size prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1145,14 +1113,6 @@ exports[`Button respects the small size prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1397,14 +1357,6 @@ exports[`Button styles danger button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1652,14 +1604,6 @@ exports[`Button styles invisible button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1914,14 +1858,6 @@ exports[`Button styles primary button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {

diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1803,14 +1803,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c4 [data-component="trailingVisual"] {
@@ -2460,14 +2452,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c3 [data-component="trailingVisual"] {
@@ -2871,14 +2855,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
 }
 
 .c4 [data-component="trailingVisual"] {