Merge 53293fd into 7ce1fda

.changeset/quick-adults-buy.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Refactor Link component to use CSS modules using the feature flag `primer_react_css_modules`

packages/react/src/Blankslate/Blankslate.module.css

@@ -79,7 +79,6 @@
     margin-bottom: var(--stack-gap-condensed, var(--base-size-8));
   }
 
-  /* stylelint-disable-next-line selector-max-type */
   .Visual svg {
     width: 100%;
   }

packages/react/src/Link/Link.module.css

@@ -0,0 +1,40 @@
+.Link {
+  color: var(--fgColor-accent);
+  text-decoration: none;
+
+  /* Reset for button tags */
+  &: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;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  /* Deprecated: but need to support backwards compatibility */
+  &[data-underline='true'],
+  /*
+    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;
+  }
+
+  &[data-muted='true'] {
+    color: var(--fgColor-muted);
+
+    &:hover {
+      color: var(--fgColor-accent);
+      text-decoration: none;
+    }
+  }
+}

packages/react/src/Link/Link.tsx

@@ -1,10 +1,14 @@
+import cx 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'
 
@@ -57,7 +61,9 @@ const StyledLink = styled.a<StyledLinkProps>`
   ${sx};
 `
 
-const Link = forwardRef(({as: Component = 'a', ...props}, forwardedRef) => {
+const Link = forwardRef(({as: Component = 'a', className, ...props}, forwardedRef) => {
+  const enabled = useFeatureFlag('primer_react_css_modules')
+
   const innerRef = React.useRef<HTMLAnchorElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
@@ -85,9 +91,39 @@ const Link = forwardRef(({as: Component = 'a', ...props}, forwardedRef) => {
     }, [innerRef])
   }
 
+  if (enabled) {
+    if (props.sx) {
+      return (
+        <Box
+          as={Component}
+          className={cx(className, classes.Link)}
+          data-muted={props.muted}
+          data-inline={props.inline}
+          data-underline={props.underline}
+          {...props}
+          // @ts-ignore shh
+          ref={innerRef}
+        />
+      )
+    }
+
+    return (
+      <Component
+        className={cx(className, classes.Link)}
+        data-muted={props.muted}
+        data-inline={props.inline}
+        data-underline={props.underline}
+        {...props}
+        // @ts-ignore shh
+        ref={innerRef}
+      />
+    )
+  }
+
   return (
     <StyledLink
       as={Component}
+      className={className}
       data-inline={props.inline}
       {...props}
       // @ts-ignore shh

stylelint.config.mjs

@@ -3,7 +3,10 @@
  */
 export default {
   extends: ['@primer/stylelint-config'],
-  rules: {},
+  rules: {
+    // We want to allow type selectors like `button`
+    'selector-max-type': 1,
+  },
   overrides: [
     {
       files: ['examples/**/*.css'],