Remove deprecated underline prop from Link component

.changeset/swift-queens-smoke.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove deprecated underline prop from Link component.

e2e/components/Link.test.ts

@@ -15,10 +15,6 @@ const stories = [
     title: 'Muted',
     id: 'components-link-features--muted',
   },
-  {
-    title: 'Underline',
-    id: 'components-link-features--underline',
-  },
 ] as const
 
 test.describe('Link', () => {

packages/react/src/Link/Link.dev.stories.tsx

@@ -10,33 +10,13 @@ export default {
 export const Inline = () => (
   <div>
     <div style={{display: 'flex', flexDirection: 'column'}} data-a11y-link-underlines="true">
-      [data-a11y-link-underlines=true] (inline always underlines)
-      <Link href="#">inline: undefined, underline: undefined</Link>
-      <Link underline={true} href="#">
-        inline: undefined, underline: true
-      </Link>
-      <Link underline={false} href="#">
-        inline: undefined, underline: false
-      </Link>
-      <br />
+      [data-a11y-link-underlines=true] (inline links have underline)
+      <Link href="#">inline: undefined</Link>
       <Link inline={true} href="#">
-        inline: true, underline: undefined
+        inline: true
       </Link>
       <Link inline={false} href="#">
-        inline: false, underline: undefined
-      </Link>
-      <br />
-      <Link inline={true} underline={true} href="#">
-        inline: true, underline: true
-      </Link>
-      <Link inline={true} underline={false} href="#">
-        inline: true, underline: false
-      </Link>
-      <Link inline={false} underline={true} href="#">
-        inline: false, underline: true
-      </Link>
-      <Link inline={false} underline={false} href="#">
-        inline: false, underline: false
+        inline: false
       </Link>
       <br />
       <Link muted={true} inline={true} href="#">
@@ -45,33 +25,13 @@ export const Inline = () => (
     </div>
     <br />
     <div style={{display: 'flex', flexDirection: 'column'}} data-a11y-link-underlines="false">
-      [data-a11y-link-underlines=false] (inline does nothing)
-      <Link href="#">inline: undefined, underline: undefined</Link>
-      <Link underline={true} href="#">
-        inline: undefined, underline: true
-      </Link>
-      <Link underline={false} href="#">
-        inline: undefined, underline: false
-      </Link>
-      <br />
+      [data-a11y-link-underlines=false] (inline has no effect)
+      <Link href="#">inline: undefined</Link>
       <Link inline={true} href="#">
-        inline: true, underline: undefined
+        inline: true
       </Link>
       <Link inline={false} href="#">
-        inline: false, underline: undefined
-      </Link>
-      <br />
-      <Link inline={true} underline={true} href="#">
-        inline: true, underline: true
-      </Link>
-      <Link inline={true} underline={false} href="#">
-        inline: true, underline: false
-      </Link>
-      <Link inline={false} underline={true} href="#">
-        inline: false, underline: true
-      </Link>
-      <Link inline={false} underline={false} href="#">
-        inline: false, underline: false
+        inline: false
       </Link>
       <br />
       <Link muted={true} inline={true} href="#">

packages/react/src/Link/Link.docs.json

@@ -10,9 +10,6 @@
     {
       "id": "components-link-features--muted"
     },
-    {
-      "id": "components-link-features--underline"
-    },
     {
       "id": "components-link-features--inline"
     }
@@ -61,4 +58,4 @@
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/Link/Link.features.stories.tsx

@@ -13,12 +13,6 @@ export const Muted = () => (
   </Link>
 )
 
-export const Underline = () => (
-  <Link href="#" underline>
-    Link
-  </Link>
-)
-
 export const Inline = () => (
   <div data-a11y-link-underlines="true">
     <Link inline={true} href="#">

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

@@ -20,11 +20,8 @@
     text-decoration: underline;
   }
 
-  /* Deprecated: but need to support backwards compatibility */
-  &:where([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
+    Inline links (inside a text block) should have underline based on accessibility setting set in data-attribute
   */
   [data-a11y-link-underlines='true'] &:where([data-inline='true']) {
     text-decoration: underline;

packages/react/src/Link/Link.stories.tsx

@@ -15,7 +15,6 @@ Playground.args = {
   text: 'Link',
   href: '#',
   muted: false,
-  underline: false,
   inline: false,
 }
 

packages/react/src/Link/Link.tsx

@@ -10,8 +10,6 @@ type StyledLinkProps<As extends React.ElementType = 'a'> = {
   /** @deprecated use CSS modules to style hover color */
   hoverColor?: string
   muted?: boolean
-  /** @deprecated use `inline` to specify the type of link instead */
-  underline?: boolean
   // Link inside a text block
   inline?: boolean
 }
@@ -20,7 +18,7 @@ export const UnwrappedLink = <As extends React.ElementType = 'a'>(
   props: PolymorphicProps<As, 'a', StyledLinkProps>,
   ref: ForwardedRef<unknown>,
 ) => {
-  const {as: Component = 'a', className, inline, underline, hoverColor, ...restProps} = props
+  const {as: Component = 'a', className, inline, hoverColor, ...restProps} = props
   const innerRef = React.useRef<ElementRef<As>>(null)
   useRefObjectAsForwardedRef(ref, innerRef)
 
@@ -54,7 +52,6 @@ export const UnwrappedLink = <As extends React.ElementType = 'a'>(
       className={clsx(className, classes.Link)}
       data-muted={restProps.muted}
       data-inline={inline}
-      data-underline={underline}
       data-hover-color={hoverColor}
       {...restProps}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any