diff --git a/.changeset/button-label-underline.md b/.changeset/button-label-underline.md new file mode 100644 index 00000000000..d2aa4ab293d --- /dev/null +++ b/.changeset/button-label-underline.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Button and LinkButton: Limit link variant underlines to the text label when visuals are present diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-colorblind-linux.png index 6dba80d620f..21d4d53936b 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-dimmed-linux.png index 8e0b61eb767..4c387927b64 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-high-contrast-linux.png index e3d91c87b95..32ee28cdf92 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-linux.png index 6dba80d620f..21d4d53936b 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-tritanopia-linux.png index 6dba80d620f..21d4d53936b 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-colorblind-linux.png index 737f654f0b6..41dc936e2ca 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-high-contrast-linux.png index fdbb78a3f5a..524ddf9d65a 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-linux.png index 737f654f0b6..41dc936e2ca 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-tritanopia-linux.png index 737f654f0b6..41dc936e2ca 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Link-Variant-With-Underline-Preference-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-colorblind-linux.png index c69bc18cb7d..8927d92124a 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-dimmed-linux.png index a3bb63fea2c..ef3afe8bbb7 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-high-contrast-linux.png index cd595494c6a..50ab37bd680 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-linux.png index c69bc18cb7d..8927d92124a 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-tritanopia-linux.png index c69bc18cb7d..8927d92124a 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-colorblind-linux.png index 66714a560a2..acdee2c2b19 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-high-contrast-linux.png index c7b7644be95..a6faec8edd6 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-linux.png index 66714a560a2..acdee2c2b19 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-tritanopia-linux.png index 66714a560a2..acdee2c2b19 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-colorblind-linux.png index c69bc18cb7d..8927d92124a 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-dimmed-linux.png index a3bb63fea2c..ef3afe8bbb7 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-high-contrast-linux.png index cd595494c6a..50ab37bd680 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-linux.png index c69bc18cb7d..8927d92124a 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-tritanopia-linux.png index c69bc18cb7d..8927d92124a 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-colorblind-linux.png index 66714a560a2..acdee2c2b19 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-high-contrast-linux.png index c7b7644be95..a6faec8edd6 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-linux.png index 66714a560a2..acdee2c2b19 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-tritanopia-linux.png index 66714a560a2..acdee2c2b19 100644 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-tritanopia-linux.png differ diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index c9a9674f9db..22afd0c0dad 100644 --- a/e2e/components/Button.test.ts +++ b/e2e/components/Button.test.ts @@ -110,6 +110,60 @@ const stories = [ ] as const test.describe('Button', () => { + test('link variant underlines only the label', async ({page}) => { + await visit(page, { + id: 'components-button-dev--link-variant-with-underline-preference', + }) + + const buttonWithVisual = (preference: 'on' | 'off') => + page + .getByRole('button', {name: `Underline pref ${preference}`}) + .filter({has: page.locator('[data-component="leadingVisual"]')}) + + const preferenceOnButton = buttonWithVisual('on') + const preferenceOnLabel = preferenceOnButton.locator('[data-component="text"]') + + await expect(preferenceOnButton).toHaveCSS('text-decoration-line', 'none') + await expect(preferenceOnButton).toHaveCSS('background-image', 'none') + await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'underline') + await expect(preferenceOnLabel).toHaveCSS('text-underline-offset', '2px') + + await preferenceOnButton.hover() + await expect(preferenceOnButton).toHaveCSS('text-decoration-line', 'none') + await expect(preferenceOnButton).toHaveCSS('background-image', 'none') + await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'none') + + await preferenceOnButton.evaluate(element => element.setAttribute('aria-disabled', 'true')) + await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'underline') + + await preferenceOnButton.evaluate(element => { + element.removeAttribute('aria-disabled') + element.setAttribute('data-inactive', 'true') + }) + await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'underline') + + const preferenceOffButton = buttonWithVisual('off') + const preferenceOffLabel = preferenceOffButton.locator('[data-component="text"]') + + await expect(preferenceOffButton).toHaveCSS('text-decoration-line', 'none') + await expect(preferenceOffButton).toHaveCSS('background-image', 'none') + await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'none') + + await preferenceOffButton.hover() + await expect(preferenceOffButton).toHaveCSS('text-decoration-line', 'none') + await expect(preferenceOffButton).toHaveCSS('background-image', 'none') + await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'underline') + + await preferenceOffButton.evaluate(element => element.setAttribute('aria-disabled', 'true')) + await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'none') + + await preferenceOffButton.evaluate(element => { + element.removeAttribute('aria-disabled') + element.setAttribute('data-inactive', 'true') + }) + await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'none') + }) + for (const story of stories) { test.describe(story.title, () => { for (const theme of themes) { diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index dc9705170cb..18ac4bbce41 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -590,7 +590,7 @@ border: unset; border-radius: 0; - &:hover:not(:disabled, [data-inactive]) { + &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label { text-decoration: underline; } @@ -607,6 +607,7 @@ } & .Label { + text-underline-offset: 0.125rem; white-space: unset; } @@ -621,34 +622,22 @@ } [data-a11y-link-underlines='true'] &:where([data-variant='link']) { - &[data-no-visuals] { + & .Label { text-decoration: underline; - - &:hover { - text-decoration: none; - } } - &:not([data-no-visuals]) { - background-image: linear-gradient(to right, currentColor, currentColor); - background-size: 100% 1.5px; - background-position: 0 calc(100% - 2px); - background-repeat: no-repeat; - - &:hover { - text-decoration: none; - } + &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label { + text-decoration: none; } } [data-a11y-link-underlines='false'] &:where([data-variant='link']) { - &[data-no-visuals] { + & .Label { text-decoration: none; - background-image: none; } - &:not([data-no-visuals]) { - background-image: none; + &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label { + text-decoration: underline; } }