docs(Toolbar): Minor improvements

packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx

@@ -18,3 +18,11 @@ export const Large = (props: Partial<ToolbarProps>) => (
     <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
   </Toolbar>
 );
+
+Large.parameters = {
+  docs: {
+    description: {
+      story: ['Height of the container is 48px'].join('\n'),
+    },
+  },
+};

packages/react-components/react-toolbar/stories/Toolbar/ToolbarMedium.stories.tsx

@@ -18,3 +18,11 @@ export const Medium = (props: Partial<ToolbarProps>) => (
     <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
   </Toolbar>
 );
+
+Medium.parameters = {
+  docs: {
+    description: {
+      story: ['Height of the container is 40px'].join('\n'),
+    },
+  },
+};

packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx

@@ -228,3 +228,15 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
     </Overflow>
   </div>
 );
+
+OverflowItems.parameters = {
+  docs: {
+    description: {
+      story: [
+        'This example uses the',
+        '<a href="#" data-sb-kind="components-overflow--default">Overflow component and utilities</a>,',
+        'Please refer to the documentation for achieve more complex scenarios.',
+      ].join('\n'),
+    },
+  },
+};

packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx

@@ -18,3 +18,11 @@ export const Small = (props: Partial<ToolbarProps>) => (
     <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
   </Toolbar>
 );
+
+Small.parameters = {
+  docs: {
+    description: {
+      story: ['Height of the container is 32px'].join('\n'),
+    },
+  },
+};

packages/react-components/react-toolbar/stories/Toolbar/ToolbarSubtle.stories.tsx

@@ -5,9 +5,22 @@ import type { ToolbarProps } from '@fluentui/react-components';
 
 export const Subtle = (props: Partial<ToolbarProps>) => (
   <Toolbar aria-label="Subtle" {...props}>
-    <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
-    <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
     <ToolbarToggleButton
+      appearance="subtle"
+      aria-label="Bold"
+      icon={<TextBold24Regular />}
+      name="textOptions"
+      value="bold"
+    />
+    <ToolbarToggleButton
+      appearance="subtle"
+      aria-label="Italic"
+      icon={<TextItalic24Regular />}
+      name="textOptions"
+      value="italic"
+    />
+    <ToolbarToggleButton
+      appearance="subtle"
       aria-label="Underline"
       icon={<TextUnderline24Regular />}
       name="textOptions"

packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx

@@ -28,7 +28,6 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Insert Image</h3>
-            <Button>Example 1</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -45,7 +44,6 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Insert Table</h3>
-            <Button>Example 2</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -62,7 +60,6 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Insert Formula</h3>
-            <Button>Example 3</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -80,7 +77,6 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Quick Actions</h3>
-            <Button>Example 4</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>

packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx

@@ -1,4 +1,12 @@
-import { Toolbar } from '@fluentui/react-components';
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarDivider,
+  ToolbarGroup,
+  ToolbarRadioButton,
+  ToolbarRadioGroup,
+  ToolbarToggleButton,
+} from '@fluentui/react-components';
 
 import descriptionMd from './ToolbarDescription.md';
 import bestPracticesMd from './ToolbarBestPractices.md';
@@ -21,6 +29,14 @@ export { FarGroup } from './ToolbarFarGroup.stories';
 export default {
   title: 'Components/Toolbar',
   component: Toolbar,
+  subcomponents: {
+    ToolbarButton,
+    ToolbarDivider,
+    ToolbarGroup,
+    ToolbarRadioButton,
+    ToolbarRadioGroup,
+    ToolbarToggleButton,
+  },
   parameters: {
     docs: {
       description: {