diff --git a/.changeset/fair-radios-knock.md b/.changeset/fair-radios-knock.md new file mode 100644 index 00000000000..b2c672a98bc --- /dev/null +++ b/.changeset/fair-radios-knock.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Restore Link underline preference to original behavior diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-forcedUnderlines-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-forcedUnderlines-linux.png deleted file mode 100644 index 161e327bb67..00000000000 Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-forcedUnderlines-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-light-forcedUnderlines-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-light-forcedUnderlines-linux.png deleted file mode 100644 index 10b79842e9c..00000000000 Binary files a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-light-forcedUnderlines-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-forcedUnderlines-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-forcedUnderlines-linux.png deleted file mode 100644 index 0ae25820262..00000000000 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-forcedUnderlines-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-forcedUnderlines-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-forcedUnderlines-linux.png deleted file mode 100644 index ea2038fd8fb..00000000000 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-forcedUnderlines-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-light-forcedUnderlines-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-light-forcedUnderlines-linux.png deleted file mode 100644 index 0ae25820262..00000000000 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-light-forcedUnderlines-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-forcedUnderlines-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-forcedUnderlines-linux.png deleted file mode 100644 index 9984199a841..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-forcedUnderlines-linux.png and /dev/null differ diff --git a/e2e/components/BranchName.test.ts b/e2e/components/BranchName.test.ts index 0da26edf74c..ecf450d8968 100644 --- a/e2e/components/BranchName.test.ts +++ b/e2e/components/BranchName.test.ts @@ -39,19 +39,5 @@ test.describe('BranchName', () => { }) }) } - - test.describe('with forced underlines', () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-branchname--default', - globals: { - colorScheme: 'light', - prefersLinkUnderlines: 'true', - }, - }) - - expect(await page.screenshot()).toMatchSnapshot('BranchName.Default.light.forcedUnderlines.png') - }) - }) }) }) diff --git a/e2e/components/Breadcrumbs.test.ts b/e2e/components/Breadcrumbs.test.ts index 17c4f1b4ea9..5b4a763084e 100644 --- a/e2e/components/Breadcrumbs.test.ts +++ b/e2e/components/Breadcrumbs.test.ts @@ -43,19 +43,5 @@ test.describe('Breadcrumbs', () => { }) }) } - - test.describe('with forced underlines', () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-breadcrumbs--default', - globals: { - colorScheme: 'light', - prefersLinkUnderlines: 'true', - }, - }) - - expect(await page.screenshot()).toMatchSnapshot('Breadcrumbs.Default.light.forcedUnderlines.png') - }) - }) }) }) diff --git a/e2e/components/Link.test.ts b/e2e/components/Link.test.ts index d556729b83f..75259a13e91 100644 --- a/e2e/components/Link.test.ts +++ b/e2e/components/Link.test.ts @@ -43,20 +43,6 @@ test.describe('Link', () => { }) }) } - - test.describe('with forced underlines', () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-link--default', - globals: { - colorScheme: 'light', - prefersLinkUnderlines: 'true', - }, - }) - - expect(await page.screenshot()).toMatchSnapshot('Link.Default.light.forcedUnderlines.png') - }) - }) }) test.describe('Muted', () => { @@ -99,20 +85,6 @@ test.describe('Link', () => { }) }) } - - test.describe('with forced underlines', () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-link-features--muted', - globals: { - colorScheme: 'light', - prefersLinkUnderlines: 'true', - }, - }) - - expect(await page.screenshot()).toMatchSnapshot('Link.Muted.light.forcedUnderlines.png') - }) - }) }) test.describe('Underline', () => { @@ -155,19 +127,5 @@ test.describe('Link', () => { }) }) } - - test.describe('with forced underlines', () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-link-features--underline', - globals: { - colorScheme: 'light', - prefersLinkUnderlines: 'true', - }, - }) - - expect(await page.screenshot()).toMatchSnapshot('Link.Underline.light.forcedUnderlines.png') - }) - }) }) }) diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts index b9f46f25729..31e0c906172 100644 --- a/e2e/components/LinkButton.test.ts +++ b/e2e/components/LinkButton.test.ts @@ -137,20 +137,6 @@ test.describe('LinkButton', () => { }) }) } - - test.describe('with forced underlines', () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--invisible', - globals: { - colorScheme: 'light', - prefersLinkUnderlines: 'true', - }, - }) - - expect(await page.screenshot()).toMatchSnapshot('LinkButton.Invisible.light.forcedUnderlines.png') - }) - }) }) test.describe('Large', () => { diff --git a/e2e/test-helpers/storybook.ts b/e2e/test-helpers/storybook.ts index 08eb3bafa4a..755e8848b12 100644 --- a/e2e/test-helpers/storybook.ts +++ b/e2e/test-helpers/storybook.ts @@ -28,7 +28,7 @@ export async function visit(page: Page, options: Options) { let params = '' for (const [key, value] of Object.entries(globals)) { if (params !== '') { - params += ';' + params += '&' } params += `${key}:${value}` } diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx index d37c85ad270..d4decbe2292 100644 --- a/src/ActionList/LinkItem.tsx +++ b/src/ActionList/LinkItem.tsx @@ -32,7 +32,6 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr // inherit Item styles color: 'inherit', - textDecoration: 'none', '&:hover': {color: 'inherit', textDecoration: 'none'}, } diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index 896aef31b09..aece80f6087 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -26,13 +26,6 @@ const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>` details-dialog:focus:not(:focus-visible):not(.focus-visible) { outline: none; } - - /* Used to fake conditional styles using a technique by Lea Verou: https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/ */ - /* We have to use a zero-width space character (\u200B) as the value instead of a regular whitespace character because styled-components strips out properties that just have a whitespace value. */ - :root {--prefers-link-underlines: \u200B;} - [data-a11y-link-underlines='true'] { - --prefers-link-underlines: initial; - } ` const Base = styled.div` diff --git a/src/BranchName/BranchName.tsx b/src/BranchName/BranchName.tsx index c05c17da9ce..0ef498253b3 100644 --- a/src/BranchName/BranchName.tsx +++ b/src/BranchName/BranchName.tsx @@ -11,7 +11,7 @@ const BranchName = styled.a` color: ${get('colors.accent.fg')}; background-color: ${get('colors.accent.subtle')}; border-radius: ${get('radii.2')}; - text-decoration: var(--prefers-link-underlines, underline); + text-decoration: none; ${sx}; ` diff --git a/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap index 10832885435..67046d28a4e 100644 --- a/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap +++ b/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap @@ -9,8 +9,8 @@ exports[`BranchName renders consistently 1`] = ` color: #0969da; background-color: #ddf4ff; border-radius: 6px; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } (props => ({ color: ${get('colors.accent.fg')}; display: inline-block; font-size: ${get('fontSizes.1')}; - text-decoration: var(--prefers-link-underlines, underline); + text-decoration: none; &:hover { text-decoration: underline; } diff --git a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap index d0bc7896195..39ec4605f7d 100644 --- a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +++ b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap @@ -5,8 +5,8 @@ exports[`Breadcrumbs.Item adds activeClassName={SELECTED_CLASS} when it gets a " color: #0969da; display: inline-block; font-size: 14px; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { @@ -32,8 +32,8 @@ exports[`Breadcrumbs.Item renders consistently 1`] = ` color: #0969da; display: inline-block; font-size: 14px; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { @@ -57,8 +57,8 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = ` color: #0969da; display: inline-block; font-size: 14px; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { diff --git a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index 29133a6d684..bbaf6d6eba5 100644 --- a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -1512,13 +1512,11 @@ exports[`Button styles invisible button appropriately 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); } .c0[href]:hover { - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 9e4fdbce43e..426e5251d52 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -109,12 +109,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme backgroundColor: 'transparent', borderColor: 'transparent', boxShadow: 'none', - '&[href]': { - textDecoration: 'var(--prefers-link-underlines, underline)', - '&:hover': { - textDecoration: 'var(--prefers-link-underlines, underline)', - }, - }, '&:hover:not([disabled])': { backgroundColor: 'btn.hoverBg', }, diff --git a/src/Heading/Heading.tsx b/src/Heading/Heading.tsx index ce755302cd0..25a224aca34 100644 --- a/src/Heading/Heading.tsx +++ b/src/Heading/Heading.tsx @@ -39,7 +39,6 @@ const Heading = forwardRef(({as: Component = 'h2', ...props}, forwardedRef) => { return ( `; diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx index fc6f3a73643..735c1674466 100644 --- a/src/Link/Link.tsx +++ b/src/Link/Link.tsx @@ -22,9 +22,9 @@ const hoverColor = system({ const StyledLink = styled.a` color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))}; - text-decoration: ${props => (props.underline ? 'underline' : 'var(--prefers-link-underlines, underline)')}; + text-decoration: ${props => (props.underline ? 'underline' : 'none')}; &:hover { - text-decoration: ${props => (props.muted ? 'var(--prefers-link-underlines, underline)' : 'underline')}; + text-decoration: ${props => (props.muted ? 'none' : 'underline')}; ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')}; } &:is(button) { diff --git a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap index 87a83747c45..eaad8694936 100644 --- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap +++ b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap @@ -3,8 +3,8 @@ exports[`Link applies button styles when rendering a button element 1`] = ` .c0 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { @@ -37,8 +37,8 @@ exports[`Link applies button styles when rendering a button element 1`] = ` exports[`Link passes href down to link element 1`] = ` .c0 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { @@ -72,8 +72,8 @@ exports[`Link passes href down to link element 1`] = ` exports[`Link renders consistently 1`] = ` .c0 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { @@ -106,8 +106,8 @@ exports[`Link renders consistently 1`] = ` exports[`Link respects hoverColor prop 1`] = ` .c0 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { @@ -141,14 +141,14 @@ exports[`Link respects hoverColor prop 1`] = ` exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = ` .c0 { color: #656d76; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; color: #ffffff; } .c0:hover { - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; color: #0969da; } @@ -178,13 +178,13 @@ exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = ` exports[`Link respects the "muted" prop 1`] = ` .c0 { color: #656d76; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; color: #0969da; } diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index cc1f8de9391..d5cd78ceef7 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -196,8 +196,8 @@ exports[`NavList renders a simple list 1`] = ` .c3 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; padding-left: 8px; padding-right: 8px; padding-top: 6px; @@ -212,8 +212,6 @@ exports[`NavList renders a simple list 1`] = ` flex-grow: 1; border-radius: 6px; color: inherit; - -webkit-text-decoration: none; - text-decoration: none; } .c3:hover { @@ -608,8 +606,8 @@ exports[`NavList renders with groups 1`] = ` .c7 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; padding-left: 8px; padding-right: 8px; padding-top: 6px; @@ -624,8 +622,6 @@ exports[`NavList renders with groups 1`] = ` flex-grow: 1; border-radius: 6px; color: inherit; - -webkit-text-decoration: none; - text-decoration: none; } .c7:hover { @@ -1095,8 +1091,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav .c11 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; padding-left: 16px; padding-right: 8px; padding-top: 6px; @@ -1111,8 +1107,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; border-radius: 6px; color: inherit; - -webkit-text-decoration: none; - text-decoration: none; font-size: 12px; font-weight: 400; } @@ -1579,8 +1573,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t .c11 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; padding-left: 16px; padding-right: 8px; padding-top: 6px; @@ -1595,8 +1589,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t flex-grow: 1; border-radius: 6px; color: inherit; - -webkit-text-decoration: none; - text-decoration: none; font-size: 12px; font-weight: 400; } diff --git a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap index e2683254421..7087305ccb7 100644 --- a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap +++ b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap @@ -94,8 +94,8 @@ exports[`UnderlineNav renders consistently 1`] = ` .c4 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -182,8 +182,8 @@ exports[`UnderlineNav renders consistently 1`] = ` .c7 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap index 37336e1d5ec..d54bec24567 100644 --- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap +++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap @@ -3,8 +3,8 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` .c0 { color: #0969da; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c0:hover { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 72d9a22ed98..8b9b35e4245 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1710,13 +1710,11 @@ exports[`TextInput renders trailingAction icon button 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); } .c4[href]:hover { - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c4:hover { @@ -2361,13 +2359,11 @@ exports[`TextInput renders trailingAction text button 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); } .c3[href]:hover { - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c3:hover { @@ -2764,13 +2760,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); } .c4[href]:hover { - -webkit-text-decoration: var(--prefers-link-underlines,underline); - text-decoration: var(--prefers-link-underlines,underline); + -webkit-text-decoration: none; + text-decoration: none; } .c4:hover { diff --git a/src/drafts/Button2/styles.ts b/src/drafts/Button2/styles.ts index 240a8c0044f..474a9e81991 100644 --- a/src/drafts/Button2/styles.ts +++ b/src/drafts/Button2/styles.ts @@ -106,12 +106,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme backgroundColor: 'transparent', borderColor: 'transparent', boxShadow: 'none', - '&[href]': { - textDecoration: 'var(--prefers-link-underlines, underline)', - '&:hover': { - textDecoration: 'var(--prefers-link-underlines, underline)', - }, - }, '&:hover:not([disabled])': { backgroundColor: 'btn.hoverBg', }, diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx index 9a3719e242c..a48dcea9208 100644 --- a/src/utils/story-helpers.tsx +++ b/src/utils/story-helpers.tsx @@ -9,7 +9,7 @@ import {Icon} from '@primer/octicons-react' // we don't import StoryContext from storybook because of exports that conflict // with primer/react more: https://github.com/primer/react/runs/6129115026?check_suite_focus=true type StoryContext = Record & { - globals: {colorScheme: string; showSurroundingElements?: boolean; prefersLinkUnderlines?: 'true' | 'false'} + globals: {colorScheme: string; showSurroundingElements?: boolean} parameters: Record } @@ -59,7 +59,7 @@ export const withThemeProvider = (Story: React.FC -
- {Story(context)} -
+
{Story(context)}
@@ -102,9 +100,7 @@ export const withThemeProvider = (Story: React.FC -
- {Story(context)} -
+
{Story(context)}
) @@ -122,16 +118,6 @@ export const toolbarTypes = { }, showSurroundingElements: {}, }, - prefersLinkUnderlines: { - name: 'Force link underlines', - description: 'Whether to force underlines on links that are not otherwise underlined', - defaultValue: 'false', - toolbar: { - icon: 'link', - items: ['true', 'false'], - title: 'Force link underlines', - }, - }, } export const inputWrapperArgTypes: ArgTypes = {