Remove the CSS modules feature flag from the Link component (#5019)

* Remove feature flag from Link component

* Create breezy-windows-speak.md

* Update snapshots and remove :where

* Refactor CSS selector for .Link class

* Update snapshot

* Remove color sx override from story

* test(vrt): update snapshots

---------

Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>

.changeset/breezy-windows-speak.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove the CSS modules feature flag from Link component

e2e/components/Link.test.ts

@@ -31,9 +31,6 @@ test.describe('Link', () => {
               id: story.id,
               globals: {
                 colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules_ga: true,
-                },
               },
             })
 
@@ -50,39 +47,6 @@ test.describe('Link', () => {
           })
 
           test('axe @aat', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules_ga: true,
-                },
-              },
-            })
-            await expect(page).toHaveNoViolations()
-          })
-
-          test('default (styled-component) @vrt', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
-              },
-            })
-
-            // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.png`)
-
-            // Hover state
-            await page.getByRole('link').hover()
-            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.hover.png`)
-
-            // Focus state
-            await page.keyboard.press('Tab')
-            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.focus.png`)
-          })
-
-          test('axe (styled-component) @aat', async ({page}) => {
             await visit(page, {
               id: story.id,
               globals: {

packages/react/src/Link/Link.tsx

@@ -1,13 +1,8 @@
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
-import styled from 'styled-components'
-import {system} from 'styled-system'
-import {get} from '../constants'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {SxProp} from '../sx'
-import sx from '../sx'
 import classes from './Link.module.css'
-import {useFeatureFlag} from '../FeatureFlags'
 import Box from '../Box'
 import type {ComponentProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
@@ -21,49 +16,7 @@ type StyledLinkProps = {
   inline?: boolean
 } & SxProp
 
-const hoverColor = system({
-  hoverColor: {
-    property: 'color',
-    scale: 'colors',
-  },
-})
-
-const StyledLink = styled.a<StyledLinkProps>`
-  color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
-
-  /* By default, Link does not have underline */
-  text-decoration: none;
-
-  /* You can add one by setting underline={true} */
-  text-decoration: ${props => (props.underline ? 'underline' : undefined)};
-
-  /* Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute */
-  /* Note: setting underline={false} does not override this */
-  [data-a11y-link-underlines='true'] &[data-inline='true'] {
-    text-decoration: underline;
-  }
-
-  &:hover {
-    text-decoration: ${props => (props.muted ? 'none' : 'underline')};
-    ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
-  }
-  &:is(button) {
-    display: inline-block;
-    padding: 0;
-    font-size: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    background-color: transparent;
-    border: 0;
-    appearance: none;
-  }
-  ${sx};
-`
-
 const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...props}, forwardedRef) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_ga')
-
   const innerRef = React.useRef<HTMLAnchorElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
@@ -91,24 +44,10 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
     }, [innerRef])
   }
 
-  if (enabled) {
-    if (props.sx) {
-      return (
-        <Box
-          as={Component}
-          className={clsx(className, classes.Link)}
-          data-muted={props.muted}
-          data-inline={inline}
-          data-underline={underline}
-          {...props}
-          // @ts-ignore shh
-          ref={innerRef}
-        />
-      )
-    }
-
+  if (props.sx) {
     return (
-      <Component
+      <Box
+        as={Component}
         className={clsx(className, classes.Link)}
         data-muted={props.muted}
         data-inline={inline}
@@ -121,11 +60,11 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
   }
 
   return (
-    <StyledLink
-      as={Component}
-      className={className}
+    <Component
+      className={clsx(className, classes.Link)}
+      data-muted={props.muted}
       data-inline={inline}
-      underline={underline}
+      data-underline={underline}
       {...props}
       // @ts-ignore shh
       ref={innerRef}

packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap

@@ -1,203 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Link applies button styles when rendering a button element 1`] = `
-.c1 {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c1:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c1:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <button
-  className="c0 c1"
+  className="Link"
 />
 `;
 
 exports[`Link passes href down to link element 1`] = `
-.c1 {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c1:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c1:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
-  className="c0 c1"
+  className="Link"
   href="https://github.com"
 />
 `;
 
 exports[`Link respects hoverColor prop 1`] = `
-.c1 {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c1:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-}
-
-.c1:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
-  className="c0 c1"
+  className="Link"
+  hoverColor="accent.fg"
 />
 `;
 
 exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
-.c1 {
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-text-decoration: none;
-  text-decoration: none;
+.c0 {
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
 }
 
-[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c1:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-}
-
-.c1:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
-  className="c0 c1"
+  className="c0 Link"
+  data-muted={true}
   muted={true}
 />
 `;
 
 exports[`Link respects the "muted" prop 1`] = `
-.c1 {
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c1:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-}
-
-.c1:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
-  className="c0 c1"
+  className="Link"
+  data-muted={true}
   muted={true}
 />
 `;