feat(react-link): [CAP] adds a new bold prop and introduces the inverted appearance variant

packages/react-components/react-link/library/etc/react-link.api.md

@@ -39,7 +39,8 @@ export type LinkContextValue = {
 
 // @public (undocumented)
 export type LinkProps = ComponentProps<LinkSlots> & {
-    appearance?: 'default' | 'subtle';
+    appearance?: 'default' | 'subtle' | 'inverted';
+    bold?: boolean;
     disabled?: boolean;
     disabledFocusable?: boolean;
     inline?: boolean;
@@ -51,7 +52,7 @@ export type LinkSlots = {
 };
 
 // @public (undocumented)
-export type LinkState = ComponentState<LinkSlots> & Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {
+export type LinkState = ComponentState<LinkSlots> & Required<Pick<LinkProps, 'appearance' | 'bold' | 'disabled' | 'disabledFocusable' | 'inline'>> & {
     backgroundAppearance?: BackgroundAppearanceContextValue;
 };
 

packages/react-components/react-link/library/src/components/Link/Link.types.ts

@@ -14,7 +14,15 @@ export type LinkProps = ComponentProps<LinkSlots> & {
    * If not specified, the link appears with its default styling.
    * @default 'default'
    */
-  appearance?: 'default' | 'subtle';
+  appearance?: 'default' | 'subtle' | 'inverted';
+
+  /**
+   * Whether the link should be bold.
+   * If set true, the link will be rendered with font weight 600 (tokens.fontWeightSemibold).
+   *
+   * @default false
+   */
+  bold?: boolean;
 
   /**
    * Whether the link is disabled.
@@ -43,7 +51,7 @@ export type LinkProps = ComponentProps<LinkSlots> & {
 export type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;
 
 export type LinkState = ComponentState<LinkSlots> &
-  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {
+  Required<Pick<LinkProps, 'appearance' | 'bold' | 'disabled' | 'disabledFocusable' | 'inline'>> & {
     backgroundAppearance?: BackgroundAppearanceContextValue;
   };
 

packages/react-components/react-link/library/src/components/Link/useLink.ts

@@ -40,7 +40,7 @@ export const useLinkBase_unstable = (
   ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,
 ): LinkBaseState => {
   const { inline: inlineContext } = useLinkContext();
-  const { disabled = false, disabledFocusable = false, inline = false } = props;
+  const { bold = false, disabled = false, disabledFocusable = false, inline = false } = props;
 
   const elementType = props.as || (props.href ? 'a' : 'button');
 
@@ -54,6 +54,7 @@ export const useLinkBase_unstable = (
 
   const state: LinkBaseState = {
     // Props passed at the top-level
+    bold,
     disabled,
     disabledFocusable,
     inline: inline ?? !!inlineContext,

packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts

@@ -109,13 +109,28 @@ const useStyles = makeStyles({
       color: tokens.colorNeutralForegroundInvertedLinkPressed,
     },
   },
+  bold: {
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  appearanceInverted: {
+    color: tokens.colorNeutralForegroundInvertedLink,
+    ':hover': {
+      color: tokens.colorNeutralForegroundInvertedLinkHover,
+    },
+    ':hover:active': {
+      color: tokens.colorNeutralForegroundInvertedLinkPressed,
+    },
+    ':focus': {
+      textDecorationColor: tokens.colorNeutralForegroundInvertedLink,
+    },
+  },
 });
 
 export const useLinkStyles_unstable = (state: LinkState): LinkState => {
   'use no memo';
 
   const styles = useStyles();
-  const { appearance, disabled, inline, root, backgroundAppearance } = state;
+  const { appearance, bold, disabled, inline, root, backgroundAppearance } = state;
 
   state.root.className = mergeClasses(
     linkClassNames.root,
@@ -124,9 +139,11 @@ export const useLinkStyles_unstable = (state: LinkState): LinkState => {
     root.as === 'a' && root.href && styles.href,
     root.as === 'button' && styles.button,
     appearance === 'subtle' && styles.subtle,
+    appearance === 'inverted' && styles.appearanceInverted,
     backgroundAppearance === 'inverted' && styles.inverted,
     backgroundAppearance === 'brand' && styles.brand,
     inline && styles.inline,
+    bold && styles.bold,
     disabled && styles.disabled,
     state.root.className,
   );

packages/react-components/react-link/stories/src/Link/LinkBold.stories.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { JSXElement } from '@fluentui/react-components';
+import { Link } from '@fluentui/react-components';
+
+export const Bold = (): JSXElement => (
+  <Link bold href="https://www.bing.com">
+    Bold link
+  </Link>
+);
+
+Bold.parameters = {
+  docs: {
+    description: {
+      story: 'A link can be rendered with `bold` to apply a semibold font weight.',
+    },
+  },
+};

packages/react-components/react-link/stories/src/Link/LinkInverted.stories.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { JSXElement } from '@fluentui/react-components';
+import { Link } from '@fluentui/react-components';
+
+export const Inverted = (): JSXElement => (
+  <div style={{ backgroundColor: '#333', padding: '16px' }}>
+    <Link appearance="inverted" href="https://www.bing.com">
+      Inverted link
+    </Link>
+  </div>
+);
+
+Inverted.parameters = {
+  docs: {
+    description: {
+      story:
+        'A link can use `appearance="inverted"` to be styled for dark backgrounds, ' +
+        'using inverted foreground link tokens for default, hover, and pressed states.',
+    },
+  },
+};

packages/react-components/react-link/stories/src/Link/index.stories.tsx

@@ -6,6 +6,8 @@ import accessibilityMd from './LinkAccessibility.md';
 
 export { Default } from './LinkDefault.stories';
 export { Appearance } from './LinkAppearance.stories';
+export { Inverted } from './LinkInverted.stories';
+export { Bold } from './LinkBold.stories';
 export { Inline } from './LinkInline.stories';
 export { Disabled } from './LinkDisabled.stories';
 export { DisabledFocusable } from './LinkDisabledFocusable.stories';