chore(docs): update misc web component Storybook docs (#19200)

* chore(docs): update modal wc sb docs

* chore(docs): update multi-select sb docs

* chore(docs): update notifications wc sb docs

* chore(docs): update number-input wc sb docs

* chore(docs): update overflow-menu wc sb docs

* chore(docs): update pagination wc sb docs

* chore(docs): remove unneeded comments

* chore(docs): update docs

* chore(docs): fix typos

Author: kennylam

packages/react/src/components/Modal/Modal.mdx

@@ -16,8 +16,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
  | 
 [Accessibility](https://www.carbondesignsystem.com/components/modal/accessibility)
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
-
 ## Table of Contents
 
 - [Modal](#modal)
@@ -35,8 +33,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 - [References](#references)
 - [Feedback](#feedback)
 
-{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}
-
 ## Overview
 
 `<Modal>` allows you to use its bespoke set of contents. `children` prop maps to
@@ -111,8 +107,6 @@ const ModalStateManager = ({
 };
 ```
 
-{/* <!-- prettier-ignore-start --> */}
-
 <Unstyled>
   <InlineNotification
     title="Warning"
@@ -130,7 +124,7 @@ const ModalStateManager = ({
 
 There are four responsive
 [modal sizes](https://www.carbondesignsystem.com/components/modal/usage/#modal-sizes):
-`xs`, `small`, default, and `large`. You can set it via the `size` prop.
+`xs`, `sm`, `md` (default), and `lg`. You can set it via the `size` prop.
 
 ```jsx
 <ComposedModal size="lg">

packages/react/src/components/MultiSelect/MultiSelect.mdx

@@ -34,10 +34,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 ## Overview
 
 The `MultiSelect` component is a variant of the `Dropdown` component that allows
-for multiple items to be selected. `MultiSelect` stays open while items are The
-`MultiSelect` component is a variant of the `Dropdown` component that allows for
-multiple items to be selected. `MultiSelect` stays open while items are being
-selected.
+for multiple items to be selected. `MultiSelect` stays open while items are
+being selected.
 
 <Canvas
   of={MultiSelect.Default}

packages/react/src/components/Notification/Notification.mdx

@@ -13,9 +13,9 @@ import { Canvas, ArgTypes, Meta } from '@storybook/blocks';
 ## Table of Contents
 
 - [Notification](#Notification)
-    - [Overview](#overview)
-    - [ActionableNotification](#ActionableNotification)
-    - [InlineNotification & ToastNotification](#InlineNotification-and-ToastNotification)
+  - [Overview](#overview)
+  - [ActionableNotification](#actionablenotification)
+  - [InlineNotification & ToastNotification](#inlinenotification-and-toastnotification)
 - [Component API](#component-api)
 - [Actionable](#actionable)
 - [Inline](#inline)

packages/react/src/components/OverflowMenu/OverflowMenu.mdx

@@ -14,6 +14,13 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 ## Table of Contents
 
+- [Overview](#overview)
+- [data-floating-menu-container](#data-floating-menu-container)
+- [Render Custom Icon](#render-custom-icon)
+- [Customizing the tooltip](#customizing-the-tooltip)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
 ## Overview
 
 The overflow menu component is a clickable element that contains additional

packages/web-components/.storybook/_container.scss

@@ -66,3 +66,19 @@ body {
   block-size: 100vh;
   inline-size: 100%;
 }
+
+// Following styles are needed to ensure that the Canvas containers render correctly
+.docs-story div div {
+  transform: none;
+}
+
+// Disable stylelint max-nesting-depth
+/* stylelint-disable */
+.sbdocs {
+  &.sbdocs-preview,
+  .docs-story,
+  .docs-story div {
+    overflow: visible;
+  }
+}
+/* stylelint-enable */

packages/web-components/src/components/badge-indicator/badge-indicator.ts

@@ -36,7 +36,7 @@ class CDSBadgeIndicator extends LitElement {
     return html`${displayCount}`;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSBadgeIndicator;

packages/web-components/src/components/button/button-skeleton.ts

@@ -73,7 +73,7 @@ class CDSButtonSkeleton extends CDSButton {
         `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSButtonSkeleton;

packages/web-components/src/components/button/button.mdx

@@ -413,13 +413,13 @@ in a position and will render the tooltip accordingly. Accepted options are
 By using the `stacked` attribute with the `button-set` component, you can
 arrange your two `button` elements vertically
 
-<cds-button-set stacked="">
+<cds-button-set stacked>
   <cds-button kind="secondary">Secondary button</cds-button>
   <cds-button kind="primary">Primary button</cds-button>
 </cds-button-set>
 
 ```html
-<cds-button-set stacked="">
+<cds-button-set stacked>
   <cds-button kind="secondary">Secondary button</cds-button>
   <cds-button kind="primary">Primary button</cds-button>
 </cds-button-set>

packages/web-components/src/components/data-table/table-expanded-row.ts

@@ -92,7 +92,7 @@ class CDSTableExpandedRow extends HostListenerMixin(LitElement) {
     return `${prefix}-table-row`;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSTableExpandedRow;

packages/web-components/src/components/form/form-item.ts

@@ -21,7 +21,7 @@ class CDSFormItem extends LitElement {
     return html` <slot></slot> `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSFormItem;

packages/web-components/src/components/icon-button/icon-button.ts

@@ -119,7 +119,7 @@ class CDSIconButton extends CDSButton {
     `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSIconButton;

packages/web-components/src/components/icon-indicator/icon-indicator.ts

@@ -119,7 +119,7 @@ class CDSIconIndicator extends LitElement {
     return html`${icon()}${this.label}`;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSIconIndicator;

packages/web-components/src/components/inline-loading/inline-loading.ts

@@ -130,7 +130,7 @@ class CDSInlineLoading extends LitElement {
     `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSInlineLoading;

packages/web-components/src/components/link/link.ts

@@ -218,7 +218,7 @@ class CDSLink extends FocusMixin(LitElement) {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSLink;

packages/web-components/src/components/menu/menu-item-divider.ts

@@ -22,6 +22,6 @@ class CDSmenuItemDivider extends LitElement {
     }
     super.connectedCallback();
   }
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 export default CDSmenuItemDivider;

packages/web-components/src/components/menu/menu-item-group.ts

@@ -31,6 +31,6 @@ class CDSmenuItemGroup extends LitElement {
       </ul>
     `;
   }
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 export default CDSmenuItemGroup;

packages/web-components/src/components/menu/menu-item-radio-group.ts

@@ -103,6 +103,6 @@ class CDSmenuItemRadioGroup extends LitElement {
       </ul>
     `;
   }
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 export default CDSmenuItemRadioGroup;

packages/web-components/src/components/menu/menu-item-selectable.ts

@@ -93,6 +93,6 @@ class CDSmenuItemSelectable extends LitElement {
       </cds-menu-item>
     `;
   }
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 export default CDSmenuItemSelectable;

packages/web-components/src/components/menu/menu-item.ts

@@ -299,6 +299,6 @@ class CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {
     }
   };
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 export default CDSmenuItem;

packages/web-components/src/components/menu/menu.ts

@@ -512,6 +512,6 @@ class CDSMenu extends HostListenerMixin(LitElement) {
     const activeEl = this.activeitems[0]?.item ?? document.activeElement;
     activeEl.focus();
   };
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 export default CDSMenu;

packages/web-components/src/components/modal/docs/overview.mdx

@@ -21,7 +21,7 @@ class CDSModalBodyContent extends LitElement {
     return html`<slot></slot>`;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSModalBodyContent;

packages/web-components/src/components/modal/modal-body-content.ts

@@ -21,7 +21,7 @@ class CDSModalBody extends LitElement {
     return html` <slot></slot> `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSModalBody;

packages/web-components/src/components/modal/modal-body.ts

@@ -18,7 +18,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-modal-footer-button`)
 class CDSModalFooterButton extends CDSButton {
-  static styles = [buttonStyles, styles]; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = [buttonStyles, styles];
 }
 
 export default CDSModalFooterButton;

packages/web-components/src/components/modal/modal-footer-button.ts

@@ -51,7 +51,7 @@ class CDSModalFooter extends LitElement {
     return `${prefix}-button,${prefix}-modal-footer-button`;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSModalFooter;

packages/web-components/src/components/modal/modal-footer.ts

@@ -21,7 +21,7 @@ class CDSModalHeading extends LitElement {
     return html` <slot></slot> `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+  static styles = styles;
 }
 
 export default CDSModalHeading;