docs(Toolbar): outline part attributes (#6816)

Closes #6808

Author: Lukas742

.storybook/components/DomRefTable.tsx

@@ -46,6 +46,43 @@ function Name(props: CEM.ClassMember) {
   );
 }
 
+export function ShadowPartsTable({ componentName, cssParts }: { componentName: string; cssParts: CEM.CssPart[] }) {
+  return (
+    <>
+      <Heading>CSS Shadow Parts</Heading>
+      <p>
+        <Link target={'_blank'} href={'https://developer.mozilla.org/en-US/docs/Web/CSS/::part'}>
+          CSS Shadow Parts
+        </Link>{' '}
+        allow developers to style elements inside the Shadow DOM.
+      </p>
+      <p>
+        The <code>{componentName}</code> exposes the following CSS Shadow Parts:
+      </p>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {cssParts.map((part) => (
+            <tr key={part.name}>
+              <td>
+                <b>{part.name}</b>
+              </td>
+              <td>{part.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+ShadowPartsTable.displayName = 'ShadowPartsTable';
+
 export function DomRefTable() {
   const docsContext = useContext(DocsContext);
   const storyTags: string[] = docsContext.attachedCSFFile?.meta?.tags;
@@ -146,38 +183,7 @@ export function DomRefTable() {
         </>
       ) : null}
 
-      {cssParts.length > 0 ? (
-        <>
-          <Heading>CSS Shadow Parts</Heading>
-          <p>
-            <Link target={'_blank'} href={'https://developer.mozilla.org/en-US/docs/Web/CSS/::part'}>
-              CSS Shadow Parts
-            </Link>{' '}
-            allow developers to style elements inside the Shadow DOM.
-          </p>
-          <p>
-            The <code>{componentName}</code> exposes the following CSS Shadow Parts:
-          </p>
-          <table>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              {cssParts.map((part) => (
-                <tr key={part.name}>
-                  <td>
-                    <b>{part.name}</b>
-                  </td>
-                  <td>{part.description}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </>
-      ) : null}
+      {cssParts.length > 0 ? <ShadowPartsTable cssParts={cssParts} /> : null}
     </>
   );
 }

packages/main/src/components/Toolbar/Toolbar.mdx

@@ -10,6 +10,7 @@ import {
   ToolbarSpacer,
   ToolbarSeparator
 } from '../..';
+import { ShadowPartsTable } from '@sb/components/DomRefTable';
 
 <Meta of={ComponentStories} />
 
@@ -254,12 +255,28 @@ const ToolbarComponent = () => {
 
 <ArgTypesWithNote of={OverflowToolbarButton} />
 
+<ShadowPartsTable
+  componentName="OverflowToolbarButton"
+  cssParts={[
+    { name: 'button', description: 'Used to style the native button element' },
+    { name: 'icon', description: 'Used to style the ui5-icon element' }
+  ]}
+/>
+
 ## OverflowToolbarToggleButton
 
 <Description of={OverflowToolbarToggleButton} />
 
 <ArgTypesWithNote of={OverflowToolbarToggleButton} />
 
+<ShadowPartsTable
+  componentName="OverflowToolbarToggleButton"
+  cssParts={[
+    { name: 'button', description: 'Used to style the native button element' },
+    { name: 'icon', description: 'Used to style the ui5-icon element' }
+  ]}
+/>
+
 ## ToolbarSpacer
 
 <Description of={ToolbarSpacer} />