Improve Link component styles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/app/components/link/components.tsx

@@ -7,7 +7,9 @@ import { MemoryRouter } from 'react-router-dom';
 export const Default = () => {
   return (
     <MemoryRouter>
-      <Link href="/">Sign up for Backstage</Link>
+      <Link href="/" variant="body-large">
+        Sign up for Backstage
+      </Link>
     </MemoryRouter>
   );
 };
@@ -15,7 +17,7 @@ export const Default = () => {
 export const ExternalLink = () => {
   return (
     <MemoryRouter>
-      <Link href="https://backstage.io" target="_blank">
+      <Link href="https://backstage.io" target="_blank" variant="body-large">
         Sign up for Backstage
       </Link>
     </MemoryRouter>
@@ -58,22 +60,25 @@ export const AllVariants = () => {
 export const AllColors = () => {
   return (
     <MemoryRouter>
-      <Flex gap="4" direction="column">
-        <Link href="#" color="primary">
+      <Flex gap="2" direction="column">
+        <Link href="#" color="primary" variant="body-large">
           Primary
         </Link>
-        <Link href="#" color="secondary">
+        <Link href="#" color="secondary" variant="body-large">
           Secondary
         </Link>
-        <Link href="#" color="danger">
+        <Link href="#" color="danger" variant="body-large">
           Danger
         </Link>
-        <Link href="#" color="warning">
+        <Link href="#" color="warning" variant="body-large">
           Warning
         </Link>
-        <Link href="#" color="success">
+        <Link href="#" color="success" variant="body-large">
           Success
         </Link>
+        <Link href="#" color="info" variant="body-large">
+          Info
+        </Link>
       </Flex>
     </MemoryRouter>
   );
@@ -83,13 +88,28 @@ export const Weight = () => {
   return (
     <MemoryRouter>
       <Flex gap="4">
-        <Link href="#" weight="regular">
+        <Link href="#" weight="regular" variant="body-large">
           Regular
         </Link>
-        <Link href="#" weight="bold">
+        <Link href="#" weight="bold" variant="body-large">
           Bold
         </Link>
       </Flex>
     </MemoryRouter>
   );
 };
+
+export const Standalone = () => {
+  return (
+    <MemoryRouter>
+      <Flex gap="4">
+        <Link href="#" variant="body-large">
+          Default link
+        </Link>
+        <Link href="#" variant="body-large" standalone>
+          Standalone link
+        </Link>
+      </Flex>
+    </MemoryRouter>
+  );
+};

docs-ui/src/app/components/link/page.mdx

@@ -10,6 +10,7 @@ import {
   allVariantsSnippet,
   allColorsSnippet,
   weightSnippet,
+  standaloneSnippet,
 } from './snippets';
 import {
   Default,
@@ -17,6 +18,7 @@ import {
   AllVariants,
   AllColors,
   Weight,
+  Standalone,
 } from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -55,6 +57,7 @@ Use `target="_blank"` to open links in a new tab.
   py={4}
   preview={<ExternalLink />}
   code={externalLinkSnippet}
+  layout="side-by-side"
 />
 
 ### Variants
@@ -79,7 +82,13 @@ Status colors for contextual links.
 
 ### Weight
 
-<Snippet align="center" py={4} preview={<Weight />} code={weightSnippet} />
+<Snippet align="center" py={4} preview={<Weight />} code={weightSnippet} layout="side-by-side" />
+
+### Standalone
+
+Use `standalone` to remove the underline by default. The underline will appear on hover.
+
+<Snippet align="center" py={4} preview={<Standalone />} code={standaloneSnippet} layout="side-by-side" />
 
 <Theming definition={LinkDefinition} />
 

docs-ui/src/app/components/link/props-definition.tsx

@@ -66,6 +66,12 @@ export const linkPropDefs: Record<string, PropDef> = {
     type: 'boolean',
     description:
       'Truncates text with ellipsis when it overflows its container.',
+    default: 'false',
+  },
+  standalone: {
+    type: 'boolean',
+    description: 'Removes underline by default. Underline appears on hover.',
+    default: 'false',
   },
   ...childrenPropDefs,
   ...classNamePropDefs,

docs-ui/src/app/components/link/snippets.ts

@@ -4,7 +4,7 @@ export const linkUsageSnippet = `import { Link } from '@backstage/ui';
 
 export const defaultSnippet = `<Link href="/">Sign up for Backstage</Link>`;
 
-export const externalLinkSnippet = `<Link href="https://backstage.io" target="_blank">
+export const externalLinkSnippet = `<Link href="#" target="_blank">
   Sign up for Backstage
 </Link>`;
 
@@ -25,9 +25,15 @@ export const allColorsSnippet = `<Flex gap="4" direction="column">
   <Link href="#" color="danger">Danger</Link>
   <Link href="#" color="warning">Warning</Link>
   <Link href="#" color="success">Success</Link>
+  <Link href="#" color="info">Info</Link>
 </Flex>`;
 
 export const weightSnippet = `<Flex gap="4">
   <Link href="#" weight="regular">Regular</Link>
   <Link href="#" weight="bold">Bold</Link>
 </Flex>`;
+
+export const standaloneSnippet = `<Flex gap="4">
+  <Link href="#">Default link</Link>
+  <Link href="#" standalone>Standalone link</Link>
+</Flex>`;