Merge branch 'main' of github.com:primer/react into next-major

CHANGELOG.md

@@ -1,5 +1,13 @@
 # @primer/components
 
+## 35.32.1
+
+### Patch Changes
+
+- [#3839](https://github.com/primer/react/pull/3839) [`d463d547`](https://github.com/primer/react/commit/d463d547f564d225786df7b702b735c0c7da6fd6) Thanks [@joshblack](https://github.com/joshblack)! - Restore Link underline preference to original behavior
+
+- [#3836](https://github.com/primer/react/pull/3836) [`038a7899`](https://github.com/primer/react/commit/038a7899ccaa28f57bc5ececa5aed301bab3495d) Thanks [@xiaolou86](https://github.com/xiaolou86)! - docs: fix typo
+
 ## 35.32.0
 
 ### Minor Changes

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')
-      })
-    })
   })
 })

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')
-      })
-    })
   })
 })

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')
-      })
-    })
   })
 })

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', () => {

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}`
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "35.32.0",
+  "version": "35.32.1",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

src/ActionList/ActionList.examples.stories.tsx

@@ -32,9 +32,12 @@ export default meta
 
 type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
 const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
-  ({to, ...props}: {to: string; children: React.ReactNode}, ref) => {
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
-    return <a ref={ref} href={to} {...props} />
+  ({to, children, ...props}: {to: string; children: React.ReactNode}, ref) => {
+    return (
+      <a ref={ref} href={to} {...props}>
+        {children}
+      </a>
+    )
   },
 )
 

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'},
   }
 

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

src/Breadcrumbs/Breadcrumbs.tsx

@@ -65,7 +65,7 @@ const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(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;
   }

src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap

@@ -5,8 +5,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 {
@@ -30,8 +30,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 {

src/Button/LinkButton.features.stories.tsx

@@ -68,9 +68,12 @@ export const Large = () => (
 
 type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
 const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
-  ({to, ...props}: {to: string; children: React.ReactNode}, ref) => {
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
-    return <a ref={ref} href={to} {...props} />
+  ({to, children, ...props}: {to: string; children: React.ReactNode}, ref) => {
+    return (
+      <a ref={ref} href={to} {...props}>
+        {children}
+      </a>
+    )
   },
 )
 

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 {

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: 'actionListItem.default.hoverBg',
       },

src/Dialog/__snapshots__/Dialog.test.tsx.snap

@@ -147,13 +147,11 @@ exports[`Dialog renders consistently 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);
 }
 
 .c1[href]:hover {
-  -webkit-text-decoration: var(--prefers-link-underlines,underline);
-  text-decoration: var(--prefers-link-underlines,underline);
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .c1:hover {

src/Heading/Heading.tsx

@@ -39,7 +39,6 @@ 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 pc-Heading"
+  className="c0"
 />
 `;

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' : '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) {