chore(Link): Remove the CSS modules feature flag from the Link compon…

…ent (#5148) * Remove the CSS modules feature flag from Link * Create sour-flies-camp.md * Update snapshot * Deprecate hoverColor and underline props
primer · Oct 30, 2024 · 002be35 · 002be35
1 parent 2ab7b9e
commit 002be35
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 537 deletions.
diff --git a/.changeset/sour-flies-camp.md b/.changeset/sour-flies-camp.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove the CSS modules feature flag from the Link component
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
@@ -1,18 +1,14 @@
 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'
 
 type StyledLinkProps = {
+  /** @deprecated use CSS modules to style hover color */
   hoverColor?: string
   muted?: boolean
   /** @deprecated use `inline` to specify the type of link instead */
@@ -21,49 +17,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 +45,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 +61,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}

diff --git a/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/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}
 />
 `;