From 89acd54a87cf561a4c96d63135e9b2e65da30ec8 Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 27 Oct 2025 18:54:34 +0100 Subject: [PATCH 1/6] feat(vr-tests): add brand variant for Link --- .../src/stories/Link/AnchorLink.stories.tsx | 11 ++++++++++- .../src/stories/Link/ButtonLink.stories.tsx | 11 ++++++++++- .../src/stories/Link/SpanLink.stories.tsx | 13 +++++++++++-- .../src/stories/Link/utils.tsx | 16 ++++++++++++++++ 4 files changed, 47 insertions(+), 4 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx index 82bb6a566432ec..347e07e9116ef1 100644 --- a/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; -import { InvertedBackground, steps } from './utils'; +import { InvertedBackground, BrandBackground, steps } from './utils'; import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; import type { StoryParameters } from 'storywright'; @@ -70,6 +70,15 @@ export const InvertedDisabled = () => ( ); InvertedDisabled.storyName = 'Inverted disabled'; +export const Brand = () => ( + + Link on brand background + +); + +export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE); +export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST); + export const InvertedDisabledHighContrast = getStoryVariant(InvertedDisabled, HIGH_CONTRAST); export const InvertedDisabledDarkMode = getStoryVariant(InvertedDisabled, DARK_MODE); diff --git a/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx index 19ea19098ab67e..01edbf9125d2d5 100644 --- a/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; -import { InvertedBackground, steps } from './utils'; +import { InvertedBackground, BrandBackground, steps } from './utils'; import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; import type { StoryParameters } from 'storywright'; @@ -63,6 +63,15 @@ export const InvertedDisabled = () => ( ); InvertedDisabled.storyName = 'Inverted disabled'; +export const Brand = () => ( + + Link on brand background + +); + +export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE); +export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST); + export const InvertedDisabledHighContrast = getStoryVariant(InvertedDisabled, HIGH_CONTRAST); export const InvertedDisabledDarkMode = getStoryVariant(InvertedDisabled, DARK_MODE); diff --git a/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx index 1e1ca6bd270d36..2a0e978822a046 100644 --- a/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; -import { InvertedBackground, steps } from './utils'; +import { InvertedBackground, BrandBackground, steps } from './utils'; import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; import type { StoryParameters } from 'storywright'; @@ -42,7 +42,6 @@ export const InlineDisabledFocusable = () => ( used alongside other text content. ); - export const Inverted = () => ( Link on inverted background @@ -72,4 +71,14 @@ export const WrapsCorrectlyAsAnInlineElement = () => ( expected. ); + +export const Brand = () => ( + + Link on brand background + +); + +export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE); +export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST); + WrapsCorrectlyAsAnInlineElement.storyName = 'Wraps correctly as an inline element'; diff --git a/apps/vr-tests-react-components/src/stories/Link/utils.tsx b/apps/vr-tests-react-components/src/stories/Link/utils.tsx index dcb45302663bfe..9fa42ea2948b05 100644 --- a/apps/vr-tests-react-components/src/stories/Link/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/utils.tsx @@ -11,6 +11,13 @@ const useInvertedBackgroundStyles = makeStyles({ }, }); +const useBrandBackgroundStyles = makeStyles({ + root: { + ...shorthands.padding('14px'), + backgroundColor: tokens.colorBrandBackground, + }, +}); + export const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ children }) => { const styles = useInvertedBackgroundStyles(); return ( @@ -20,6 +27,15 @@ export const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ ch ); }; +export const BrandBackground: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const styles = useBrandBackgroundStyles(); + return ( +
+ {children} +
+ ); +}; + export const steps = new Steps() .snapshot('default') .hover('.fui-Link') From 18c4d78547f9668a56ee2390a42a26bb6447ec8a Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 27 Oct 2025 18:55:41 +0100 Subject: [PATCH 2/6] feat(react-link): add brand appearance variant based on background ctx --- .../src/components/Link/useLinkStyles.styles.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) 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 5d2c05bcd5acba..fab8c7cdef2f1d 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 @@ -91,8 +91,16 @@ const useStyles = makeStyles({ color: tokens.colorNeutralForegroundDisabled, }, }, - inverted: { + color: tokens.colorNeutralForegroundInverted2, + ':hover': { + color: tokens.colorNeutralForegroundInverted2, + }, + ':active': { + color: tokens.colorNeutralForegroundInverted2, + }, + }, + brand: { color: tokens.colorNeutralForegroundInvertedLink, ':hover': { color: tokens.colorNeutralForegroundInvertedLinkHover, @@ -117,6 +125,7 @@ export const useLinkStyles_unstable = (state: LinkState): LinkState => { root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, + backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className, From 8ba8bc570f227a9ca43462d45e21c6eadb5bdf7d Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 27 Oct 2025 18:56:05 +0100 Subject: [PATCH 3/6] feat(react-shared-contexts): add brand variant --- .../BackgroundAppearanceContext/BackgroundAppearanceContext.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-shared-contexts/library/src/BackgroundAppearanceContext/BackgroundAppearanceContext.ts b/packages/react-components/react-shared-contexts/library/src/BackgroundAppearanceContext/BackgroundAppearanceContext.ts index dee4d3e5b6e2f4..674ac9eff69abe 100644 --- a/packages/react-components/react-shared-contexts/library/src/BackgroundAppearanceContext/BackgroundAppearanceContext.ts +++ b/packages/react-components/react-shared-contexts/library/src/BackgroundAppearanceContext/BackgroundAppearanceContext.ts @@ -5,7 +5,7 @@ import * as React from 'react'; /** * @internal */ -export type BackgroundAppearanceContextValue = 'inverted' | undefined; +export type BackgroundAppearanceContextValue = 'inverted' | 'brand' | undefined; /** * @internal From b77695546e67e454c6afb78980188ff79a5ed3b7 Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 27 Oct 2025 18:57:16 +0100 Subject: [PATCH 4/6] chore: change files --- ...ui-react-link-be0dc59d-3e7e-4f18-b070-9f094e989eda.json | 7 +++++++ ...ared-contexts-c6042978-85d9-480f-a2b0-67d6c410a7bc.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-link-be0dc59d-3e7e-4f18-b070-9f094e989eda.json create mode 100644 change/@fluentui-react-shared-contexts-c6042978-85d9-480f-a2b0-67d6c410a7bc.json diff --git a/change/@fluentui-react-link-be0dc59d-3e7e-4f18-b070-9f094e989eda.json b/change/@fluentui-react-link-be0dc59d-3e7e-4f18-b070-9f094e989eda.json new file mode 100644 index 00000000000000..fbfcbf23a9a4dd --- /dev/null +++ b/change/@fluentui-react-link-be0dc59d-3e7e-4f18-b070-9f094e989eda.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add brand appearance variant", + "packageName": "@fluentui/react-link", + "email": "vgenaev@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-shared-contexts-c6042978-85d9-480f-a2b0-67d6c410a7bc.json b/change/@fluentui-react-shared-contexts-c6042978-85d9-480f-a2b0-67d6c410a7bc.json new file mode 100644 index 00000000000000..138b126daa34d6 --- /dev/null +++ b/change/@fluentui-react-shared-contexts-c6042978-85d9-480f-a2b0-67d6c410a7bc.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add brand appearance variant for background context", + "packageName": "@fluentui/react-shared-contexts", + "email": "vgenaev@gmail.com", + "dependentChangeType": "patch" +} From 320bb186bf883120f31a4f1d5f98f11b4154b61f Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 27 Oct 2025 19:15:08 +0100 Subject: [PATCH 5/6] chore: update api.md files --- .../library/etc/react-shared-contexts.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md index b159393377e917..32323a2d71971f 100644 --- a/packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md +++ b/packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md @@ -28,7 +28,7 @@ export { AnnounceProvider } export { AnnounceProvider as AnnounceProvider_unstable } // @internal (undocumented) -export type BackgroundAppearanceContextValue = 'inverted' | undefined; +export type BackgroundAppearanceContextValue = 'inverted' | 'brand' | undefined; // @internal (undocumented) export const BackgroundAppearanceProvider: React_2.Provider; From b4d69a4e04e5674b1860ab1eb30f072a25c6e8e0 Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 10 Nov 2025 14:12:38 +0100 Subject: [PATCH 6/6] fixup! feat(vr-tests): add brand variant for Link --- apps/vr-tests-react-components/src/stories/Link/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Link/utils.tsx b/apps/vr-tests-react-components/src/stories/Link/utils.tsx index 9fa42ea2948b05..8e2446b802963d 100644 --- a/apps/vr-tests-react-components/src/stories/Link/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/utils.tsx @@ -14,7 +14,7 @@ const useInvertedBackgroundStyles = makeStyles({ const useBrandBackgroundStyles = makeStyles({ root: { ...shorthands.padding('14px'), - backgroundColor: tokens.colorBrandBackground, + backgroundColor: tokens.colorBrandBackgroundStatic, }, });