microsoft · Hotell · Nov 5, 2025 · Oct 30, 2025 · Nov 4, 2025 · Hotell
@@ -36,13 +36,13 @@
 }
 
 #storybook-docs .sbdocs-img.featured-image {
-  max-width: 100%;
   margin: 48px 0;
   display: block;
+  border-radius: 24px;
 }
 
 #storybook-docs .sbdocs-img {
-  border-radius: 24px;
+  max-width: 100%;
 }
 
 #storybook-docs .sbdocs hr:not(.sbdocs-preview hr) {

@@ -4,6 +4,8 @@ const fs = require('fs');
 const {
   loadWorkspaceAddon,
   registerTsPaths,
+  registerRules,
+  rules,
   processBabelLoaderOptions,
   getImportMappingsForExportToSandboxAddon,
 } = require('@fluentui/scripts-storybook');
@@ -15,17 +17,13 @@ const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-hea
 module.exports = /** @type {import('./types').StorybookConfig} */ ({
   stories: [],
   addons: [
-    // external custom addons
-
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-links',
-    'storybook-addon-performance',
     // https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
     '@storybook/addon-mdx-gfm',
 
     // internal monorepo custom addons
-
     /**  {@link file://./../packages/react-components/react-storybook-addon/package.json} */
     loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }),
     /** {@link file://./../packages/react-components/react-storybook-addon-export-to-sandbox/package.json} */
@@ -43,6 +41,7 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({
     }),
   ],
   webpackFinal: config => {
+    registerRules({ config, rules: [rules.swcRule] });
     registerTsPaths({ config, configFile: tsConfigPath });
 
     if ((process.env.CI || process.env.TF_BUILD) && config.plugins) {
@@ -60,13 +59,9 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({
     options: {
       builder: {
         lazyCompilation: true,
-        useSWC: true,
       },
     },
   },
-  docs: {
-    autodocs: true,
-  },
   /**
    * Programmatically enhance previewHead as inheriting just static file `preview-head.html` doesn't work in monorepo
    * @see https://storybook.js.org/docs/addons/writing-presets#ui-configuration
@@ -76,28 +71,4 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
-
-  swc() {
-    return {
-      jsc: {
-        target: 'es2019',
-        parser: {
-          syntax: 'typescript',
-          tsx: true,
-          decorators: true,
-          dynamicImport: true,
-        },
-        transform: {
-          decoratorMetadata: true,
-          legacyDecorator: true,
-        },
-        keepClassNames: true,
-        externalHelpers: true,
-        loose: true,
-        minify: {
-          mangle: false,
-        },
-      },
-    };
-  },
 });
@@ -1,4 +1,7 @@
 import type { StorybookConfig as StorybookBaseConfig } from '@storybook/react-webpack5';
 
-export type StorybookConfig = StorybookBaseConfig &
-  Required<Pick<StorybookBaseConfig, 'stories' | 'addons' | 'webpackFinal'>>;
+export type StorybookConfig = Omit<StorybookBaseConfig, 'stories' | 'addons' | 'webpackFinal'> & {
+  stories: NonNullable<Exclude<StorybookBaseConfig['stories'], Function>>;
+  addons: NonNullable<Exclude<StorybookBaseConfig['addons'], Function>>;
+  webpackFinal: NonNullable<StorybookBaseConfig['webpackFinal']>;
+};
@@ -19,4 +19,6 @@ const preview: Preview & { parameters: import('@fluentui/react-storybook-addon')
   },
 };
 
+export const tags = ['autodocs'];
+
 export default preview;
@@ -10,13 +10,5 @@
     "../../../node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": ["../**/*.spec.ts", "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"],
-  "include": [
-    "../stories/**/*.stories.ts",
-    "../stories/**/*.stories.js",
-    "../stories/**/*.stories.jsx",
-    "../stories/**/*.stories.tsx",
-    "../stories/**/*.stories.mdx",
-    "*.ts",
-    "*.js"
-  ]
+  "include": ["*.tsx", "*.ts", "*.jsx", "*.js"]
 }
@@ -2,7 +2,7 @@
 /* remove unnecessary padding now that theme switcher is not taking up space */
 #storybook-docs .sbdocs-wrapper {
   background: transparent !important;
-  padding-top: 0;
+  padding: 0 48px;
 }
 
 /* sb-show-main is missing during page transitions causing a page shift */
@@ -18,6 +18,7 @@
 .sb-preparing-story,
 .sb-preparing-docs,
 .sb-nopreview,
-.sb-errordisplay {
+.sb-errordisplay,
+.sidebar-container .search-field + div {
   display: none !important;
 }
@@ -9,7 +9,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
   ...rootMain,
   stories: [
     ...rootMain.stories,
-    '../src/**/*.stories.mdx',
+    '../src/**/*.mdx',
     '../src/**/index.stories.@(ts|tsx)',
     ...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
     ...getPackageStoriesGlob({
@@ -37,7 +37,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     previewUrl: process.env.DEPLOY_PATH,
   },
   webpackFinal: (config, options) => {
-    const localConfig = /** @type config */ ({ ...rootMain.webpackFinal?.(config, options) });
+    const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) });
 
     // add your own webpack tweaks if needed
     registerTsPaths({ configFile: tsConfigAllPath, config: localConfig });

@@ -138,6 +138,10 @@
     color: #11100f !important;
   }
 
+  .sidebar-item a {
+    align-items: center !important;
+  }
+
   .sidebar-item[data-selected='true'] {
     font-weight: 600 !important;
     font-size: 14px !important;

@@ -2,7 +2,7 @@ import * as rootPreview from '../../../.storybook/preview';
 
 import './docs-root-v9.css';
 
-/** @type {NonNullable<import('@storybook/react').Story['decorators']>} */
+/** @type {NonNullable<import('@storybook/react').Decorator[]>} */
 export const decorators = rootPreview.decorators;
 
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters & typeof rootPreview.parameters} */
@@ -56,3 +56,5 @@ export const parameters = {
     docs: true,
   },
 };
+
+export const tags = ['autodocs'];
@@ -1,8 +1,8 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import { FullscreenLink } from './utils';
-export const parentPath = 'concepts-developer-accessibility-stories';
+export const parentPath = 'concepts-developer-accessibility-scenarios';
 
-<Meta title="Concepts/Developer/Accessibility/Stories/List of scenarios" />
+<Meta title="Concepts/Developer/Accessibility/Scenarios" />
 
 # Accessibility Scenarios
 

@@ -20,5 +20,7 @@ export { DeviceControlsToggleButtons } from './ToggleButton.stories';
 export { ButtonsWithTooltip } from './Tooltip.stories';
 
 export default {
-  title: 'Concepts/Developer/Accessibility/Stories',
+  title: 'Concepts/Developer/Accessibility/Scenarios',
+  // Hide from autogenerated docs, as we have a custom MDX doc file
+  tags: ['!autodocs'],
 };
@@ -1,4 +1,5 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
+import { FluentCanvas, FluentStory } from '@fluentui/react-storybook-addon';
 
 <Meta title="Concepts/Developer/Accessibility/Focus indicator" />
 
@@ -43,9 +44,9 @@ Both of the helper functions are powered using the method described above.
 
 The [AccordionHeader](?path=/docs/components-accordion--default) component uses `createFocusOutlineStyle` to style the default outline style when focus is detected
 
-<Canvas>
-  <Story id="components-accordion--default" />
-</Canvas>
+<FluentCanvas>
+  <FluentStory id="components-accordion--default" height={260} />
+</FluentCanvas>
 
 ```tsx
 import { makeStyles } from '@fluentui/react-components';
@@ -77,9 +78,9 @@ function Component() {
 
 The [Link](?path=/docs/components-link--default) component uses `createCustomFocusIndicatorStyle` to add a double underlined focus indication style
 
-<Canvas>
-  <Story id="components-link--default" />
-</Canvas>
+<FluentCanvas>
+  <FluentStory id="components-link--default" height={150} />
+</FluentCanvas>
 
 ```tsx
 import { makeStyles, createCustomFocusIndicatorStyle } from '@fluentui/react-components';

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Concepts/Developer/Advanced Configuration" />
 

@@ -165,7 +165,7 @@ You can look at the image below which describes what work is done during style r
 
 > 💡 NOTE: this work only happens once, during first render.
 
-<img src={imageFile} alt={'Illustration of work done by style resolution'} />
+<img className="sbdocs-img" src={imageFile} alt={'Illustration of work done by style resolution'} />
 
 The final result before the CSS rules are inserted into DOM can be compiled ahead of time during build time through
 the methods described above. Once the styles of our simple example are transformed at build time the resulting bundle contains

@@ -9,7 +9,11 @@ import { WhatsNewBoxes } from './components/WhatsNewBoxes';
   <span className="fluent-version">v{pkg.version}</span>
 </h1>
 
-<img src={require('../../public/fluentui-wide-banner.webp')} alt="An image of many user interface component designs." />
+<img
+  className="sbdocs-img"
+  src={require('../../public/fluentui-wide-banner.webp')}
+  alt="An image of many user interface component designs."
+/>
 
 <WhatsNewBoxes
   boxes={[

@@ -25,7 +25,7 @@ import { CardPreview } from '@fluentui/react-components';
 
 const Component = () => (
   <CardPreview>
-    <img src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
+    <img className="sbdocs-img" src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
   </CardPreview>
 );
 ```

@@ -72,7 +72,7 @@ export const SizedCard = () => {
   return (
     <Card size="small" orientation="horizontal">
       <CardPreview>
-        <img src="logo.svg" alt="Company Logo" />
+        <img className="sbdocs-img" src="logo.svg" alt="Company Logo" />
       </CardPreview>
 
       <CardHeader

@@ -49,7 +49,7 @@ export const Component = () => {
     <Card>
       <Text size={400}>Revenue stream proposal fiscal year 2016 version02.pptx</Text>
       <CardHeader
-        image={<img src="powerpoint_logo.svg" />}
+        image={<img className="sbdocs-img" src="powerpoint_logo.svg" />}
         header={<Text weight="bold">Annie Lindqvist</Text>}
         description={<Caption1>Created a few minutes ago</Caption1>}
       />

@@ -51,8 +51,8 @@ import { Card, CardHeader, CardPreview } from '@fluentui/react-card/unstable';
 export const Component = () => {
   return (
     <Card size="small" orientation="horizontal">
-      <CardPreview logo={<img src="word_logo.svg" alt="Microsoft Word logo" />}>
-        <img src="doc_template.png" alt="Preview of a Word document " />
+      <CardPreview logo={<img className="sbdocs-img" src="word_logo.svg" alt="Microsoft Word logo" />}>
+        <img className="sbdocs-img" src="doc_template.png" alt="Preview of a Word document " />
       </CardPreview>
     </Card>
   );
@@ -110,17 +110,17 @@ export const Default = () => {
     <Card orientation="horizontal">
       <div>
         <div>
-          <img src="powerpoint_logo.svg" alt="Powerpoint logo" />
+          <img className="sbdocs-img" src="powerpoint_logo.svg" alt="Powerpoint logo" />
           <Text truncate>Revenue stream proposal fiscal year 2016 version02</Text>
         </div>
 
         <div>
-          <img src="powerpoint_logo.svg" alt="Powerpoint logo" />
+          <img className="sbdocs-img" src="powerpoint_logo.svg" alt="Powerpoint logo" />
           <Text truncate>New Contoso Collaboration for Conference Presentation Draft</Text>
         </div>
 
         <div>
-          <img src="powerpoint_logo.svg" alt="Powerpoint logo" />
+          <img className="sbdocs-img" src="powerpoint_logo.svg" alt="Powerpoint logo" />
           <Text truncate>Spec Sheet for design</Text>
         </div>
 

@@ -48,7 +48,7 @@ Stack's approach to layout is slightly different from Northstar's Flex, and CSS
   <CodeExample>
 
     ```html
-    <div class="flex">
+    <div className="flex">
       ...
     </div>
     ```
@@ -544,8 +544,8 @@ The `wrap` prop will also change the rendering. As such find below the styles an
   <CodeExample>
 
     ```html
-    <div class="flex">
-      <div class="inner">
+    <div className="flex">
+      <div className="inner">
         ...
       </div>
     </div>

@@ -37,8 +37,8 @@ import { CodeComparison, CodeExample } from './utils.stories';
   <CodeExample>
 
     ```html
-    <div class="flex">
-      <div class="flex-item">Item</div>
+    <div className="flex">
+      <div className="flex-item">Item</div>
     </div>
     ```
 

@@ -50,7 +50,7 @@ test('renders Markdown source blocks', () => {
         code={`function test() {
           console.log("test");
         }`}
-        language="js"
+        language="jsextra"
       />,
     ],
   });
@@ -85,7 +85,7 @@ test.each([
   ['css', 'CSS'],
   ['js', 'JavaScript'],
   ['jsx', 'React'],
-])('for language %s uses the header %s', (language, expectedHeader) => {
+] as const)('for language %s uses the header %s', (language, expectedHeader) => {
   const renderer = createRenderer();
   renderer.render(
     <CodeExample>
@@ -99,7 +99,7 @@ test.each([
   const result = renderer.getRenderOutput();
 
   expect(result.props).toEqual({
-    children: [<h3>{expectedHeader}</h3>, <Source code={`Code`} language={language} />],
+    children: [<h3>{expectedHeader}</h3>, <Source code={`Code`} language={language === 'js' ? 'jsextra' : language} />],
   });
 });
 
@@ -117,6 +117,6 @@ test('overrides the default title', () => {
   const result = renderer.getRenderOutput();
 
   expect(result.props).toEqual({
-    children: [<h3>Custom title</h3>, <Source code={`Code`} language="js" />],
+    children: [<h3>Custom title</h3>, <Source code={`Code`} language="jsextra" />],
   });
 });
-Original file line number
+Diff line change
@@ Expand Up @@
       },
     };
+    export const tags = ['autodocs'];
     export default preview;