diff --git a/packages/react-components/react-link/library/etc/react-link.api.md b/packages/react-components/react-link/library/etc/react-link.api.md index 0f4ea2bc696143..c4a0afbf5e7dc0 100644 --- a/packages/react-components/react-link/library/etc/react-link.api.md +++ b/packages/react-components/react-link/library/etc/react-link.api.md @@ -39,7 +39,8 @@ export type LinkContextValue = { // @public (undocumented) export type LinkProps = ComponentProps & { - 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 & Required> & { +export type LinkState = ComponentState & Required> & { backgroundAppearance?: BackgroundAppearanceContextValue; }; diff --git a/packages/react-components/react-link/library/src/components/Link/Link.types.ts b/packages/react-components/react-link/library/src/components/Link/Link.types.ts index ad557b7e89c62a..d4e2024f49695f 100644 --- a/packages/react-components/react-link/library/src/components/Link/Link.types.ts +++ b/packages/react-components/react-link/library/src/components/Link/Link.types.ts @@ -14,7 +14,15 @@ export type LinkProps = ComponentProps & { * 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 & { export type LinkBaseProps = DistributiveOmit; export type LinkState = ComponentState & - Required> & { + Required> & { backgroundAppearance?: BackgroundAppearanceContextValue; }; diff --git a/packages/react-components/react-link/library/src/components/Link/useLink.ts b/packages/react-components/react-link/library/src/components/Link/useLink.ts index 569892513c6876..882187ab6aabc4 100644 --- a/packages/react-components/react-link/library/src/components/Link/useLink.ts +++ b/packages/react-components/react-link/library/src/components/Link/useLink.ts @@ -40,7 +40,7 @@ export const useLinkBase_unstable = ( ref: React.Ref, ): 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, diff --git a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts index ca18dbc67086e0..56f55a00326655 100644 --- a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts +++ b/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, ); diff --git a/packages/react-components/react-link/stories/src/Link/LinkBold.stories.tsx b/packages/react-components/react-link/stories/src/Link/LinkBold.stories.tsx new file mode 100644 index 00000000000000..7c499f567223b5 --- /dev/null +++ b/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 => ( + + Bold link + +); + +Bold.parameters = { + docs: { + description: { + story: 'A link can be rendered with `bold` to apply a semibold font weight.', + }, + }, +}; diff --git a/packages/react-components/react-link/stories/src/Link/LinkInverted.stories.tsx b/packages/react-components/react-link/stories/src/Link/LinkInverted.stories.tsx new file mode 100644 index 00000000000000..c1f7d85a814a38 --- /dev/null +++ b/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 => ( +
+ + Inverted link + +
+); + +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.', + }, + }, +}; diff --git a/packages/react-components/react-link/stories/src/Link/index.stories.tsx b/packages/react-components/react-link/stories/src/Link/index.stories.tsx index 32fbce8d41b849..4beb6ebc7fde6f 100644 --- a/packages/react-components/react-link/stories/src/Link/index.stories.tsx +++ b/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';