From 19694317e6746e6ad9a795cfafddd422bad0b0a1 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Tue, 30 Jun 2026 12:18:52 +0200 Subject: [PATCH 1/2] feat(react-storybook-addon): allow theme picker options configuration (#36358) --- ...k-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json | 7 +++++++ .../react-storybook-addon/.storybook/preview.js | 6 +++++- .../etc/react-storybook-addon.api.md | 12 +++++++++++- .../src/components/ThemePicker.tsx | 11 ++++++----- .../react-storybook-addon/src/constants.ts | 1 + .../src/docs/FluentDocsPage.tsx | 8 +++++--- .../react-storybook-addon/src/docs/ThemePicker.tsx | 6 +++--- .../react-storybook-addon/src/hooks.ts | 6 ++++-- .../react-storybook-addon/src/index.ts | 4 ++-- .../react-storybook-addon/src/theme.ts | 5 +++-- 10 files changed, 47 insertions(+), 19 deletions(-) create mode 100644 change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json diff --git a/change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json b/change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json new file mode 100644 index 0000000000000..6a1f97e6014f5 --- /dev/null +++ b/change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: allow theme picker options configuration", + "packageName": "@fluentui/react-storybook-addon", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-storybook-addon/.storybook/preview.js b/packages/react-components/react-storybook-addon/.storybook/preview.js index 89133e4790d47..5c9ce2703f499 100644 --- a/packages/react-components/react-storybook-addon/.storybook/preview.js +++ b/packages/react-components/react-storybook-addon/.storybook/preview.js @@ -1,9 +1,13 @@ import * as rootPreview from '../../../../.storybook/preview'; +import { themes } from '../src'; /** @type {typeof rootPreview.decorators} */ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ -export const parameters = { ...rootPreview.parameters }; +export const parameters = { + ...rootPreview.parameters, + fluentThemes: themes.filter(theme => theme.id === 'web-light' || theme.id === 'web-dark'), +}; export const tags = ['autodocs']; diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index 977601745fed0..2aefadc8791a9 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -36,6 +36,8 @@ export interface FluentGlobals extends Args { [STRICT_MODE_ID]?: boolean; // (undocumented) [THEME_ID]?: ThemeIds; + // (undocumented) + [THEMES]?: Theme[]; } // @public @@ -45,6 +47,8 @@ export interface FluentParameters extends Parameters_2 { // (undocumented) fluentTheme?: ThemeIds; // (undocumented) + fluentThemes?: Theme[]; + // (undocumented) mode?: 'default' | 'vr-test'; // (undocumented) reactStorybookAddon?: { @@ -67,11 +71,17 @@ export interface FluentStoryContext extends StoryContext { // @public (undocumented) export function parameters(options?: FluentParameters): FluentParameters; +// @public (undocumented) +export type Theme = (typeof themes)[number]; + // @public (undocumented) export const THEME_ID: "storybook_fluentui-react-addon_theme"; // @public (undocumented) -export type ThemeIds = (typeof themes)[number]['id']; +export type ThemeIds = Theme['id']; + +// @public (undocumented) +export const THEMES: "storybook_fluentui-react-addon_themes"; // @public (undocumented) export const themes: readonly [{ diff --git a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx index e842554172b41..4a3f002ebdc87 100644 --- a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx +++ b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx @@ -4,9 +4,9 @@ import { ArrowDownIcon } from '@storybook/icons'; import { useParameter } from 'storybook/manager-api'; import type { JSXElement } from '@fluentui/react-utilities'; -import type { ThemeIds } from '../theme'; -import { themes, defaultTheme } from '../theme'; -import { THEME_ID } from '../constants'; +import type { ThemeIds, Theme } from '../theme'; +import { themes as defaultThemes, defaultTheme } from '../theme'; +import { THEME_ID, THEMES } from '../constants'; import type { FluentParameters } from '../hooks'; import { useGlobals } from '../hooks'; @@ -19,7 +19,7 @@ export interface ThemeSelectorItem { } function createThemeItems( - value: typeof themes, + value: Theme[], changeTheme: (id: ThemeIds) => void, getCurrentTheme: () => ThemeIds, ): ThemeSelectorItem[] { @@ -39,6 +39,7 @@ function createThemeItems( export const ThemePicker = (): JSXElement => { const [globals, updateGlobals] = useGlobals(); const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme'); + const themes: Theme[] = useParameter('fluentThemes') ?? globals[THEMES] ?? defaultThemes; const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id; const selectedTheme = themes.find(entry => entry.id === selectedThemeId); @@ -67,7 +68,7 @@ export const ThemePicker = (): JSXElement => { /> ); }, - [selectedThemeId, setTheme], + [selectedThemeId, setTheme, themes], ); return ( diff --git a/packages/react-components/react-storybook-addon/src/constants.ts b/packages/react-components/react-storybook-addon/src/constants.ts index 277499ae0c169..571373a69182f 100644 --- a/packages/react-components/react-storybook-addon/src/constants.ts +++ b/packages/react-components/react-storybook-addon/src/constants.ts @@ -3,3 +3,4 @@ export const ADDON_ID = 'storybook_fluentui-react-addon'; export const DIR_ID = `${ADDON_ID}_dir` as const; export const STRICT_MODE_ID = `${ADDON_ID}_strict-mode` as const; export const THEME_ID = `${ADDON_ID}_theme` as const; +export const THEMES = `${ADDON_ID}_themes` as const; diff --git a/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx b/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx index 57728961cff7f..c3da8281816c5 100644 --- a/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx +++ b/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx @@ -19,8 +19,8 @@ import { makeStyles } from '@griffel/react'; import { InfoFilled } from '@fluentui/react-icons'; import type { JSXElement } from '@fluentui/react-utilities'; -import { DIR_ID, THEME_ID } from '../constants'; -import { themes } from '../theme'; +import { DIR_ID, THEME_ID, THEMES } from '../constants'; +import { themes as defaultThemes, type Theme } from '../theme'; import { getDocsPageConfig } from './utils'; import { DirSwitch } from './DirSwitch'; @@ -371,6 +371,8 @@ export const FluentDocsPage = ({ assertStoryMetaValues(primaryStory); const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr'; + const themes: Theme[] = + primaryStoryContext.parameters?.fluentThemes ?? primaryStoryContext.globals?.[THEMES] ?? defaultThemes; const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]); const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable); @@ -421,7 +423,7 @@ export const FluentDocsPage = ({
{(showThemePicker || showDirSwitcher || showCopyAsMarkdown) && (
- {showThemePicker && } + {showThemePicker && } {showDirSwitcher && } {showCopyAsMarkdown && }
diff --git a/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx index 30b500cd73b54..832f4f1d83b41 100644 --- a/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx +++ b/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx @@ -6,8 +6,8 @@ import type { MenuProps } from '@fluentui/react-menu'; import { MenuButton } from '@fluentui/react-button'; import { makeStyles } from '@griffel/react'; -import type { ThemeIds } from '..'; -import { themes, THEME_ID } from '..'; +import type { ThemeIds, Theme } from '..'; +import { THEME_ID } from '..'; const useStyles = makeStyles({ menuButton: { @@ -27,7 +27,7 @@ const useStyles = makeStyles({ /** * Theme picker used in the react-components docs header */ -export const ThemePicker: React.FC<{ selectedThemeId?: string }> = ({ selectedThemeId }) => { +export const ThemePicker: React.FC<{ selectedThemeId?: string; themes: Theme[] }> = ({ selectedThemeId, themes }) => { const styles = useStyles(); const [currentThemeId, setCurrentThemeId] = React.useState(selectedThemeId ?? null); diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts index c054b4bda33f2..8c13791cb2564 100644 --- a/packages/react-components/react-storybook-addon/src/hooks.ts +++ b/packages/react-components/react-storybook-addon/src/hooks.ts @@ -1,8 +1,8 @@ import { useGlobals as useStorybookGlobals } from 'storybook/manager-api'; import type { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react-webpack5'; -import type { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants'; -import type { ThemeIds } from './theme'; +import type { DIR_ID, STRICT_MODE_ID, THEME_ID, THEMES } from './constants'; +import type { Theme, ThemeIds } from './theme'; export interface FluentStoryContext extends StorybookContext { globals: FluentGlobals; @@ -15,6 +15,7 @@ export interface FluentStoryContext extends StorybookContext { export interface FluentGlobals extends StorybookArgs { [DIR_ID]?: 'ltr' | 'rtl'; [THEME_ID]?: ThemeIds; + [THEMES]?: Theme[]; [STRICT_MODE_ID]?: boolean; } @@ -24,6 +25,7 @@ export interface FluentGlobals extends StorybookArgs { export interface FluentParameters extends Parameters { dir?: 'ltr' | 'rtl'; fluentTheme?: ThemeIds; + fluentThemes?: Theme[]; mode?: 'default' | 'vr-test'; reactStorybookAddon?: { disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode']; diff --git a/packages/react-components/react-storybook-addon/src/index.ts b/packages/react-components/react-storybook-addon/src/index.ts index d15dce947e768..41d4145596b52 100644 --- a/packages/react-components/react-storybook-addon/src/index.ts +++ b/packages/react-components/react-storybook-addon/src/index.ts @@ -1,7 +1,7 @@ export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks'; -export type { ThemeIds } from './theme'; +export type { ThemeIds, Theme } from './theme'; export { themes } from './theme'; -export { DIR_ID, THEME_ID } from './constants'; +export { DIR_ID, THEME_ID, THEMES } from './constants'; export { parameters } from './hooks'; export { FluentCanvas, FluentDocsPage, FluentStory } from './docs'; export type { FluentDocsPageProps } from './docs'; diff --git a/packages/react-components/react-storybook-addon/src/theme.ts b/packages/react-components/react-storybook-addon/src/theme.ts index b019229b17ff5..220ec68e35965 100644 --- a/packages/react-components/react-storybook-addon/src/theme.ts +++ b/packages/react-components/react-storybook-addon/src/theme.ts @@ -10,5 +10,6 @@ export const themes = [ export const defaultTheme = themes[0]; -export type ThemeIds = (typeof themes)[number]['id']; -export type ThemeLabels = (typeof themes)[number]['label']; +export type Theme = (typeof themes)[number]; +export type ThemeIds = Theme['id']; +export type ThemeLabels = Theme['label']; From e287a20abcf5146c41ae0a6243c04358fddca40c Mon Sep 17 00:00:00 2001 From: Fluent UI Build Date: Tue, 30 Jun 2026 10:28:33 +0000 Subject: [PATCH 2/2] release: applying package updates - tools --- ...ddon-9cfa7856-61b2-4200-bdbe-090cca848493.json | 7 ------- .../react-storybook-addon/CHANGELOG.json | 15 +++++++++++++++ .../react-storybook-addon/CHANGELOG.md | 11 ++++++++++- .../react-storybook-addon/package.json | 2 +- 4 files changed, 26 insertions(+), 9 deletions(-) delete mode 100644 change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json diff --git a/change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json b/change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json deleted file mode 100644 index 6a1f97e6014f5..0000000000000 --- a/change/@fluentui-react-storybook-addon-9cfa7856-61b2-4200-bdbe-090cca848493.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "feat: allow theme picker options configuration", - "packageName": "@fluentui/react-storybook-addon", - "email": "dmytrokirpa@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/react-components/react-storybook-addon/CHANGELOG.json b/packages/react-components/react-storybook-addon/CHANGELOG.json index 5cf4b591d8316..4ea1bf3a37ca3 100644 --- a/packages/react-components/react-storybook-addon/CHANGELOG.json +++ b/packages/react-components/react-storybook-addon/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-storybook-addon", "entries": [ + { + "date": "Tue, 30 Jun 2026 10:28:26 GMT", + "tag": "@fluentui/react-storybook-addon_v0.7.1", + "version": "0.7.1", + "comments": { + "patch": [ + { + "author": "dmytrokirpa@microsoft.com", + "package": "@fluentui/react-storybook-addon", + "commit": "19694317e6746e6ad9a795cfafddd422bad0b0a1", + "comment": "feat: allow theme picker options configuration" + } + ] + } + }, { "date": "Tue, 16 Jun 2026 18:28:45 GMT", "tag": "@fluentui/react-storybook-addon_v0.7.0", diff --git a/packages/react-components/react-storybook-addon/CHANGELOG.md b/packages/react-components/react-storybook-addon/CHANGELOG.md index a039ad0d0dd3a..a2823fbb60b08 100644 --- a/packages/react-components/react-storybook-addon/CHANGELOG.md +++ b/packages/react-components/react-storybook-addon/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-storybook-addon -This log was last generated on Tue, 16 Jun 2026 18:28:45 GMT and should not be manually modified. +This log was last generated on Tue, 30 Jun 2026 10:28:26 GMT and should not be manually modified. +## [0.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.7.1) + +Tue, 30 Jun 2026 10:28:26 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.7.0..@fluentui/react-storybook-addon_v0.7.1) + +### Patches + +- feat: allow theme picker options configuration ([PR #36358](https://github.com/microsoft/fluentui/pull/36358) by dmytrokirpa@microsoft.com) + ## [0.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.7.0) Tue, 16 Jun 2026 18:28:45 GMT diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json index 3beb87e6bf190..f9e16a091939b 100644 --- a/packages/react-components/react-storybook-addon/package.json +++ b/packages/react-components/react-storybook-addon/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-storybook-addon", - "version": "0.7.0", + "version": "0.7.1", "description": "fluentui react storybook addon", "main": "lib-commonjs/index.js", "module": "lib/index.js",