feat(react-storybook-addon): add shared SB preview styles (#35949)

Author: dmytrokirpa

.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';
 

apps/public-docsite-v9/.storybook/docs-root-v9.css

@@ -1,7 +1,5 @@
 import * as rootPreview from '../../../.storybook/preview';
 
-import './docs-root-v9.css';
-
 /** @type {NonNullable<import('@storybook/react').Decorator[]>} */
 export const decorators = rootPreview.decorators;
 

apps/public-docsite-v9/.storybook/preview.js

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add shared SB preview styles",
+  "packageName": "@fluentui/react-storybook-addon",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-storybook-addon-9245e22e-52fe-44b7-8705-378deea7edf6.json

@@ -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:

packages/react-components/react-storybook-addon/README.md

@@ -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"

packages/react-components/react-storybook-addon/package.json

@@ -26,7 +26,16 @@
           ],
           "target": "build"
         }
-      ]
+      ],
+      "options": {
+        "assets": [
+          {
+            "input": "{projectRoot}/src",
+            "output": "dist",
+            "glob": "styles.css"
+          }
+        ]
+      }
     }
   }
 }

packages/react-components/react-storybook-addon/project.json

@@ -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;
+}