Support link underline preference

.changeset/happy-rivers-attend.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Adds draft Prose component to support styling within text blocks

e2e/components/Prose.test.ts

@@ -0,0 +1,71 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Prose', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-prose--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          expect(await page.screenshot()).toMatchSnapshot(`Prose.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-prose--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Full Width', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-prose-features--full-width',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          expect(await page.screenshot()).toMatchSnapshot(`Prose.FullWidth.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-prose--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+})

src/ActionList/LinkItem.tsx

@@ -32,6 +32,7 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
 
     // inherit Item styles
     color: 'inherit',
+    textDecoration: 'none',
     '&:hover': {color: 'inherit', textDecoration: 'none'},
   }
 

src/BaseStyles.tsx

@@ -26,6 +26,13 @@ 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<SystemTypographyProps & SystemCommonProps>`

src/BranchName/BranchName.tsx

@@ -11,7 +11,7 @@ const BranchName = styled.a<SxProp>`
   color: ${get('colors.accent.fg')};
   background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
-  text-decoration: none;
+  text-decoration: var(--prefers-link-underlines, underline);
 
   ${sx};
 `

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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 <a

src/Breadcrumbs/Breadcrumbs.tsx

@@ -66,7 +66,7 @@ const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
   color: ${get('colors.accent.fg')};
   display: inline-block;
   font-size: ${get('fontSizes.1')};
-  text-decoration: none;
+  text-decoration: var(--prefers-link-underlines, underline);
   &:hover {
     text-decoration: underline;
   }

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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .c0:hover {
@@ -32,8 +32,8 @@ exports[`Breadcrumbs.Item renders consistently 1`] = `
   color: #0969da;
   display: inline-block;
   font-size: 14px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .c0:hover {

src/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -1511,11 +1511,13 @@ 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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .c0:hover {

src/Button/styles.ts

@@ -109,6 +109,12 @@ 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',
       },

src/Heading/Heading.tsx

@@ -39,6 +39,7 @@ const Heading = forwardRef(({as: Component = 'h2', ...props}, forwardedRef) => {
   return (
     <StyledHeading
       as={Component}
+      className="pc-Heading"
       {...props}
       // @ts-ignore shh
       ref={innerRef}

src/Heading/__tests__/__snapshots__/Heading.test.tsx.snap

@@ -8,6 +8,6 @@ exports[`Heading renders consistently 1`] = `
 }
 
 <h2
-  className="c0"
+  className="c0 pc-Heading"
 />
 `;

src/Link/Link.tsx

@@ -22,9 +22,9 @@ const hoverColor = system({
 
 const StyledLink = styled.a<StyledLinkProps>`
   color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
-  text-decoration: ${props => (props.underline ? 'underline' : 'none')};
+  text-decoration: ${props => (props.underline ? 'underline' : 'var(--prefers-link-underlines, underline)')};
   &:hover {
-    text-decoration: ${props => (props.muted ? 'none' : 'underline')};
+    text-decoration: ${props => (props.muted ? 'var(--prefers-link-underlines, underline)' : 'underline')};
     ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
   }
   &:is(button) {

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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .c0:hover {
@@ -106,8 +106,8 @@ exports[`Link renders consistently 1`] = `
 exports[`Link respects hoverColor prop 1`] = `
 .c0 {
   color: #0969da;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
   color: #ffffff;
 }
 
 .c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
   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: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
 }
 
 .c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
   color: #0969da;
 }
 

src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -196,8 +196,8 @@ exports[`NavList renders a simple list 1`] = `
 
 .c3 {
   color: #0969da;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 6px;
@@ -212,6 +212,8 @@ exports[`NavList renders a simple list 1`] = `
   flex-grow: 1;
   border-radius: 6px;
   color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .c3:hover {
@@ -601,8 +603,8 @@ exports[`NavList renders with groups 1`] = `
 
 .c7 {
   color: #0969da;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 6px;
@@ -617,6 +619,8 @@ exports[`NavList renders with groups 1`] = `
   flex-grow: 1;
   border-radius: 6px;
   color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .c7:hover {
@@ -1082,8 +1086,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 
 .c11 {
   color: #0969da;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
   padding-left: 16px;
   padding-right: 8px;
   padding-top: 6px;
@@ -1098,6 +1102,8 @@ 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;
 }
@@ -1560,8 +1566,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 
 .c11 {
   color: #0969da;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: var(--prefers-link-underlines,underline);
+  text-decoration: var(--prefers-link-underlines,underline);
   padding-left: 16px;
   padding-right: 8px;
   padding-top: 6px;
@@ -1576,6 +1582,8 @@ 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;
 }