From f70229dbc254eb3be494f710998d8af291084bc7 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Sat, 4 Apr 2026 20:41:39 +0200 Subject: [PATCH 1/3] feat(react-storybook-addon): add shared SB preview styles --- .storybook/preview.js | 2 +- .../.storybook/docs-root-v9.css | 24 -------------- apps/public-docsite-v9/.storybook/preview.js | 2 -- .../react-storybook-addon/package.json | 6 +++- .../react-storybook-addon/project.json | 11 ++++++- .../react-storybook-addon/src/styles.css | 32 +++++++++++++++++-- 6 files changed, 46 insertions(+), 31 deletions(-) delete mode 100644 apps/public-docsite-v9/.storybook/docs-root-v9.css rename .storybook/docs-root.css => packages/react-components/react-storybook-addon/src/styles.css (93%) diff --git a/.storybook/preview.js b/.storybook/preview.js index 52c3e3b943640..04fd8067731b1 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,4 @@ -import './docs-root.css'; +import '../packages/react-components/react-storybook-addon/src/styles.css'; import '../packages/react-components/react-storybook-addon-export-to-sandbox/src/styles.css'; import { withLinks } from '@storybook/addon-links'; diff --git a/apps/public-docsite-v9/.storybook/docs-root-v9.css b/apps/public-docsite-v9/.storybook/docs-root-v9.css deleted file mode 100644 index 28896582b36cf..0000000000000 --- a/apps/public-docsite-v9/.storybook/docs-root-v9.css +++ /dev/null @@ -1,24 +0,0 @@ -/* remove the docs wrapper bg to let page bg show through */ -/* remove unnecessary padding now that theme switcher is not taking up space */ -#storybook-docs .sbdocs-wrapper { - background: transparent !important; - padding: 0 48px; -} - -/* sb-show-main is missing during page transitions causing a page shift */ -/* todo: cleanup once we no longer inherit docs-root */ -.sb-show-main.sb-main-fullscreen, -.sb-main-fullscreen { - margin: 0; - padding: 0; - display: block; -} - -/* remove loading overlay */ -.sb-preparing-story, -.sb-preparing-docs, -.sb-nopreview, -.sb-errordisplay, -.sidebar-container .search-field + div { - display: none !important; -} diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index 2742ddd665d87..91b0f90310b6a 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -1,7 +1,5 @@ import * as rootPreview from '../../../.storybook/preview'; -import './docs-root-v9.css'; - /** @type {NonNullable} */ export const decorators = rootPreview.decorators; diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json index 0b475c396fe09..41cadaa620193 100644 --- a/packages/react-components/react-storybook-addon/package.json +++ b/packages/react-components/react-storybook-addon/package.json @@ -5,7 +5,6 @@ "main": "lib-commonjs/index.js", "module": "lib/index.js", "typings": "./dist/index.d.ts", - "sideEffects": false, "repository": { "type": "git", "url": "https://github.com/microsoft/fluentui" @@ -53,11 +52,16 @@ "require": "./lib-commonjs/index.js" }, "./preset": "./preset.js", + "./styles.css": "./dist/styles.css", "./package.json": "./package.json" }, + "sideEffects": [ + "./dist/styles.css" + ], "files": [ "*.md", "dist/*.d.ts", + "dist/styles.css", "lib", "lib-commonjs", "preset.js" diff --git a/packages/react-components/react-storybook-addon/project.json b/packages/react-components/react-storybook-addon/project.json index 62a91f586e5fc..605f6e60e4871 100644 --- a/packages/react-components/react-storybook-addon/project.json +++ b/packages/react-components/react-storybook-addon/project.json @@ -26,7 +26,16 @@ ], "target": "build" } - ] + ], + "options": { + "assets": [ + { + "input": "{projectRoot}/src", + "output": "dist", + "glob": "styles.css" + } + ] + } } } } diff --git a/.storybook/docs-root.css b/packages/react-components/react-storybook-addon/src/styles.css similarity index 93% rename from .storybook/docs-root.css rename to packages/react-components/react-storybook-addon/src/styles.css index aae3c097b2045..247fc275864f0 100644 --- a/.storybook/docs-root.css +++ b/packages/react-components/react-storybook-addon/src/styles.css @@ -198,6 +198,7 @@ padding: 0; border-collapse: collapse; } + #storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) tr { border-top: 1px solid rgba(0, 0, 0, 0.1); } @@ -428,9 +429,11 @@ h1.fluent { h1.fluent .fluent-version { display: block; - font-size: 24px; /* --font-size-base-600 */ + font-size: 24px; + /* --font-size-base-600 */ line-height: 32px; - color: #707070; /* --color-neutral-foreground-3 */ + color: #707070; + /* --color-neutral-foreground-3 */ } h2.fluent { @@ -440,3 +443,28 @@ h2.fluent { line-height: 36px; letter-spacing: -0.16px; } + +/* remove the docs wrapper bg to let page bg show through */ +/* remove unnecessary padding now that theme switcher is not taking up space */ +#storybook-docs .sbdocs-wrapper { + background: transparent !important; + padding: 0 48px; +} + +/* sb-show-main is missing during page transitions causing a page shift */ +/* todo: cleanup once we no longer inherit docs-root */ +.sb-show-main.sb-main-fullscreen, +.sb-main-fullscreen { + margin: 0; + padding: 0; + display: block; +} + +/* remove loading overlay */ +.sb-preparing-story, +.sb-preparing-docs, +.sb-nopreview, +.sb-errordisplay, +.sidebar-container .search-field + div { + display: none !important; +} From 0c8340e95d8935ac4e6ccc46acd28788767cf298 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Sat, 4 Apr 2026 20:42:15 +0200 Subject: [PATCH 2/3] change --- ...orybook-addon-9245e22e-52fe-44b7-8705-378deea7edf6.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-storybook-addon-9245e22e-52fe-44b7-8705-378deea7edf6.json diff --git a/change/@fluentui-react-storybook-addon-9245e22e-52fe-44b7-8705-378deea7edf6.json b/change/@fluentui-react-storybook-addon-9245e22e-52fe-44b7-8705-378deea7edf6.json new file mode 100644 index 0000000000000..b3e94ade8cae3 --- /dev/null +++ b/change/@fluentui-react-storybook-addon-9245e22e-52fe-44b7-8705-378deea7edf6.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add shared SB preview styles", + "packageName": "@fluentui/react-storybook-addon", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} From 5ebcf6bd1245661e3581e9904fcdf042e15fb7e2 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Tue, 7 Apr 2026 14:48:38 +0200 Subject: [PATCH 3/3] update readme --- .../react-components/react-storybook-addon/README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-components/react-storybook-addon/README.md b/packages/react-components/react-storybook-addon/README.md index cccc4b86b6084..1ce937b7db812 100644 --- a/packages/react-components/react-storybook-addon/README.md +++ b/packages/react-components/react-storybook-addon/README.md @@ -38,6 +38,15 @@ export const ThemePicker: React.FC<{ context: FluentStoryContext }> = ({ context }; ``` +### Shared Storybook Preview Styles + +The package ships a `styles.css` file with shared Storybook preview styles (docs layout, table formatting, theme-aware backgrounds, etc.). Import it once in your Storybook `preview.js`/`preview.ts`: + +```js +// .storybook/preview.js +import '@fluentui/react-storybook-addon/styles.css'; +``` + ### Augmented Docs Blocks This presets uses [custom docs container and page](https://storybook.js.org/docs/7/writing-docs/autodocs#customize-the-docs-container) for unified FluentUI experience including: