run wrapper script, adjust storybook styles

Author: Lukas742

.storybook/preview-head.html

@@ -83,6 +83,27 @@
     position: static;
   }
 
+  /* table in props description (table in ArgsTable) */
+  .docblock-argstable-body table {
+    max-width: 10rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 1px;
+    text-align: center;
+  }
+  .docblock-argstable-body table th {
+    background-color: #eceff1;
+    color: #2e3438 !important;
+    border: 1px solid #dededf !important;
+    padding: 0px !important;
+    padding-block: 0.125rem !important;
+  }
+  .docblock-argstable-body table td {
+    border: 1px solid #dededf !important;
+    padding: 0px !important;
+    padding-block: 0.125rem !important;
+  }
+
   /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
   .docs-story > div > div[scale] {
     min-height: 20px;

packages/main/src/webComponents/AvatarGroup/index.tsx

@@ -74,12 +74,20 @@ interface AvatarGroupPropTypes
   /**
    * Fired when the component is activated either with a
    * click/tap or by using the Enter or Space key.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onClick?: (event: Ui5CustomEvent<AvatarGroupDomRef, AvatarGroupClickEventDetail>) => void;
 
   /**
    * Fired when the count of visible `Avatar` elements in the
    * component has changed
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onOverflow?: (event: Ui5CustomEvent<AvatarGroupDomRef>) => void;
 }

packages/main/src/webComponents/BarcodeScannerDialog/index.tsx

@@ -65,16 +65,28 @@ interface BarcodeScannerDialogPropTypes
    * Fired when the user closes the component.
    *
    * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onClose?: (event: Ui5CustomEvent<BarcodeScannerDialogDomRef>) => void;
 
   /**
    * Fires when the scan fails with error.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onScanError?: (event: Ui5CustomEvent<BarcodeScannerDialogDomRef, BarcodeScannerDialogScanErrorEventDetail>) => void;
 
   /**
    * Fires when the scan is completed successfuuly.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onScanSuccess?: (
     event: Ui5CustomEvent<BarcodeScannerDialogDomRef, BarcodeScannerDialogScanSuccessEventDetail>

packages/main/src/webComponents/Breadcrumbs/index.tsx

@@ -43,6 +43,10 @@ interface BreadcrumbsPropTypes
    * **Note:** You can prevent browser location change by calling `event.preventDefault()`.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ✅|✅|
    */
   onItemClick?: (event: Ui5CustomEvent<BreadcrumbsDomRef, BreadcrumbsItemClickEventDetail>) => void;
 }

packages/main/src/webComponents/Button/index.tsx

@@ -136,6 +136,10 @@ interface ButtonPropTypes extends ButtonAttributes, Omit<CommonProps, keyof Butt
    *
    * **Note:** The event will not be fired if the `disabled`
    * property is set to `true`.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onClick?: MouseEventHandler<ButtonDomRef>;
 }

packages/main/src/webComponents/Calendar/index.tsx

@@ -118,6 +118,10 @@ interface CalendarPropTypes
    * create instances of `CalendarDate` for the newly selected dates. In that case you should do this manually.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ✅|✅|
    */
   onSelectionChange?: (event: Ui5CustomEvent<CalendarDomRef, CalendarSelectionChangeEventDetail>) => void;
 }

packages/main/src/webComponents/CardHeader/index.tsx

@@ -61,6 +61,10 @@ interface CardHeaderPropTypes
    * Fired when the component is activated by mouse/tap or by using the Enter or Space key.
    *
    * **Note:** The event would be fired only if the `interactive` property is set to true.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onClick?: (event: Ui5CustomEvent<CardHeaderDomRef>) => void;
 }

packages/main/src/webComponents/Carousel/index.tsx

@@ -135,6 +135,10 @@ interface CarouselPropTypes
    * Fired whenever the page changes due to user interaction,
    * when the user clicks on the navigation arrows or while resizing,
    * based on the `items-per-page` property.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onNavigate?: (event: Ui5CustomEvent<CarouselDomRef, CarouselNavigateEventDetail>) => void;
 }

packages/main/src/webComponents/CheckBox/index.tsx

@@ -122,6 +122,10 @@ interface CheckBoxPropTypes extends CheckBoxAttributes, Omit<CommonProps, keyof
    * Fired when the component checked state changes.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ✅|✅|
    */
   onChange?: (event: Ui5CustomEvent<CheckBoxDomRef>) => void;
 }

packages/main/src/webComponents/ColorPalette/index.tsx

@@ -17,6 +17,10 @@ interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit<CommonProps
   children?: ReactNode | ReactNode[];
   /**
    * Fired when the user selects a color.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onItemClick?: (event: Ui5CustomEvent<ColorPaletteDomRef, ColorPaletteItemClickEventDetail>) => void;
 }