diff --git a/.changeset/empty-ears-fly.md b/.changeset/empty-ears-fly.md new file mode 100644 index 00000000000..820819eedd5 --- /dev/null +++ b/.changeset/empty-ears-fly.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +[Bug] Remove `flex` from Button labels + + diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png index dc2b3a9ac54..f0ee698b533 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png index b3d91cffdeb..63561f06db1 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png index ca42f529851..a02ee2f5485 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png index af8d0d43992..09527622b35 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png index dc2b3a9ac54..f0ee698b533 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png index d3d68df27ea..4f317231a6d 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png index f5899116c20..eb77c5b2851 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png index 7eccf25eb11..134e6580815 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png index d3d68df27ea..4f317231a6d 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png index 0db0b377ed6..0fcf4df4ad0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png index e7ff3b9b4b6..0e02adb2380 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png index 735fa8f4950..e10374f276c 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png index afe39e822de..538d54243b0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png index 0db0b377ed6..0fcf4df4ad0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png index 2d10477a0fb..8aa88253456 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png index 9ab8042c7be..27c8061077b 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png index 52b7c5f3138..33d27f62d66 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png index 2d10477a0fb..8aa88253456 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png index e477141e63b..59cbf323386 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png index e6b64cdd8d6..2e2a2e91df3 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png index 457f88ef4a7..b1a29cc83b5 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png index 9d1156d4e4e..04ef41961db 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png index e477141e63b..59cbf323386 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png index c00cb601c22..d190d917486 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png index e2f405d1324..4af4e5c9342 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png index 8a62566a1dd..dd8d66f969a 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png index c00cb601c22..d190d917486 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png differ diff --git a/src/Button/styles.ts b/src/Button/styles.ts index f2cfdf6fbb8..d3b3a1ea84d 100644 --- 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 index 35244bf136d..898cf48e4eb 100644 --- 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 index 2e90a5777df..df99279ed3f 100644 --- 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 index 601bbd7160e..c36b5df05f3 100644 --- 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"] {