Merge branch 'main' into docs/storybook-v9

Author: Lukas742

.github/ISSUE_TEMPLATE/documentation.yml

@@ -46,5 +46,4 @@ body:
       description: By submitting this issue, I confirm to follow the recommendation not to disclose any internal or sensitive information.
       options:
         - label: I’m not disclosing any internal or sensitive information.
-    validations:
-      required: true
+          required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -54,5 +54,4 @@ body:
       description: By submitting this issue, I confirm to follow the recommendation not to disclose any internal or sensitive information.
       options:
         - label: I’m not disclosing any internal or sensitive information.
-    validations:
-      required: true
+          required: true

.github/workflows/open-source-security.yml

@@ -16,13 +16,13 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: artifactPrepareVersion
-        uses: SAP/[email protected].0
+        uses: SAP/[email protected].1
         with:
           step-name: artifactPrepareVersion
           flags: --versioningType cloud_noTag
 
       - name: detectExecuteScan
-        uses: SAP/[email protected].0
+        uses: SAP/[email protected].1
         with:
           step-name: detectExecuteScan
           flags: '--token ${{ secrets.DETECT_TOKEN }}'

.github/workflows/release.yml

@@ -92,7 +92,6 @@ jobs:
             --create-release github
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
 
       - name: build
@@ -102,7 +101,6 @@ jobs:
         run: ${GITHUB_WORKSPACE}/node_modules/.bin/lerna publish from-git
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
 
       ### Semantic Release Bot comments for issues and PRs ###

.nvmrc

@@ -1 +1 @@
-22.17.0
+22.18.0

.storybook/components/ArgTypesWithNote.tsx

@@ -1,3 +1,4 @@
+import { DomRefTable } from '@sb/components/DomRefTable.js';
 import { ArgTypes } from '@storybook/addon-docs/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { MessageStrip } from '@ui5/webcomponents-react';
@@ -12,20 +13,30 @@ interface ArgTypesWithNotePropTypes {
    * Defaults to: "This component supports all HTML attributes."
    */
   noteText?: ReactNode | ReactNode[];
+  /**
+   * If `true` all headings are rendered as `Heading`s instead of `Subheading`s.
+   */
+  isHeading?: boolean;
 }
 
 export function ArgTypesWithNote(props: ComponentProps<typeof ArgTypes> & ArgTypesWithNotePropTypes) {
-  const { hideHTMLPropsNote, noteText, ...rest } = props;
+  const { hideHTMLPropsNote, noteText, isHeading, ...rest } = props;
 
   if (hideHTMLPropsNote) {
-    return <ArgTypes {...rest} />;
+    return (
+      <>
+        <ArgTypes {...rest} />
+        <DomRefTable of={rest.of} isSubheading={!isHeading} />
+      </>
+    );
   }
   return (
     <div className={classes.tableContainer}>
       <MessageStrip design={MessageStripDesign.Information} hideCloseButton className={classes.strip}>
         {noteText ?? 'This component supports all HTML attributes.'}
       </MessageStrip>
       <ArgTypes {...rest} />
+      <DomRefTable of={rest.of} isSubheading={!isHeading} />
     </div>
   );
 }

.storybook/components/DomRefTable.tsx

@@ -1,5 +1,5 @@
 import type { Controls } from '@storybook/addon-docs/blocks';
-import { Heading, useOf } from '@storybook/addon-docs/blocks';
+import { Heading, Subheading, useOf } from '@storybook/addon-docs/blocks';
 import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
 import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
@@ -48,14 +48,20 @@ function Name(props: CEM.ClassMember) {
   );
 }
 
-export function DomRefTable({ of }: { of: ComponentProps<typeof Controls>['of'] }) {
+export function DomRefTable({
+  of,
+  isSubheading,
+}: {
+  of: ComponentProps<typeof Controls>['of'];
+  isSubheading?: boolean;
+}) {
   const { story: storyContext } = useOf<'story'>(of);
   const storyTags: string[] = storyContext.tags;
   const cemModuleName = storyTags?.find((tag) => tag.startsWith('cem-module:'));
-  const componentName = storyContext.component.displayName;
+  const componentName = of?.displayName ?? storyContext.component.displayName;
   const popoverRef = useRef(null);
 
-  const knownAttributes = new Set(Object.keys(storyContext.argTypes));
+  const knownAttributes = new Set(Object.keys(of?.__docgenInfo?.props ?? storyContext.argTypes));
   const cem = useGetCem(storyTags);
   const moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
 
@@ -69,12 +75,13 @@ export function DomRefTable({ of }: { of: ComponentProps<typeof Controls>['of']
       return !(knownAttributes.has(row.name) && !row.type?.text?.includes('HTMLElement'));
     }) ?? [];
   const cssParts: CEM.CssPart[] = componentMembers?.cssParts ?? [];
+  const HeadingComponent = isSubheading ? Subheading : Heading;
 
   return (
     <>
       {rows.length > 0 ? (
         <>
-          <Heading>DOM Properties & Methods</Heading>
+          <HeadingComponent>DOM Properties & Methods</HeadingComponent>
           <p>
             This component exposes public properties and methods. You can use them directly on the instance of the
             component, e.g. by using React Refs.
@@ -150,7 +157,7 @@ export function DomRefTable({ of }: { of: ComponentProps<typeof Controls>['of']
 
       {cssParts.length > 0 ? (
         <>
-          <Heading>CSS Shadow Parts</Heading>
+          <HeadingComponent>CSS Shadow Parts</HeadingComponent>
           <p>
             <Link target={'_blank'} href={'https://developer.mozilla.org/en-US/docs/Web/CSS/::part'}>
               CSS Shadow Parts

docs/knowledge-base/FAQ.mdx

@@ -14,7 +14,7 @@ import SbTagFilter from '@sb/images/sb-pkg-filter.png';
   children={
     <>
       Please also take a look at the FAQ of{' '}
-      <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-faq">
+      <ui5-link href="https://sap.github.io/ui5-webcomponents/docs/FAQ/">
         UI5 Web Components
       </ui5-link>
       .