Merge pull request #19183 from sonntag-philipp/sonntag-philipp/issues…

…-19167-18858-custom-elements-manifest-update Web-components: Fix custom-elements order of property application (cherry picked from commit abfc677)
storybookjs · Jun 13, 2023 · 4ea50bd · 4ea50bd
1 parent 3da9762
commit 4ea50bd
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 23 deletions.
diff --git a/...derers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot b/...derers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
@@ -84,7 +84,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "boolean",
     },
   },
   "backSide": Object {
@@ -126,7 +126,7 @@ Object {
     "name": "header",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "\\"Your Message\\"",
       },
@@ -152,7 +152,7 @@ Object {
     "name": "rows",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "[]",
       },

diff --git a/code/renderers/web-components/src/docs/custom-elements.ts b/code/renderers/web-components/src/docs/custom-elements.ts
@@ -39,8 +39,19 @@ interface Declaration {
 }
 
 function mapItem(item: TagItem, category: string): InputType {
-  const type =
-    category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
+  let type;
+  switch (category) {
+    case 'attributes':
+    case 'properties':
+      type = { name: item.type?.text || item.type };
+      break;
+    case 'slots':
+      type = { name: 'string' };
+      break;
+    default:
+      type = { name: 'void' };
+      break;
+  }
 
   return {
     name: item.name,
@@ -137,13 +148,13 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   const metaData = getMetaData(tagName, customElements);
   return (
     metaData && {
-      ...mapData(metaData.attributes, 'attributes'),
-      ...mapData(metaData.members, 'properties'),
-      ...mapData(metaData.properties, 'properties'),
-      ...mapData(metaData.events, 'events'),
-      ...mapData(metaData.slots, 'slots'),
-      ...mapData(metaData.cssProperties, 'css custom properties'),
-      ...mapData(metaData.cssParts, 'css shadow parts'),
+      ...mapData(metaData.members ?? [], 'properties'),
+      ...mapData(metaData.properties ?? [], 'properties'),
+      ...mapData(metaData.attributes ?? [], 'attributes'),
+      ...mapData(metaData.events ?? [], 'events'),
+      ...mapData(metaData.slots ?? [], 'slots'),
+      ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
+      ...mapData(metaData.cssParts ?? [], 'css shadow parts'),
     }
   );
 };

diff --git a/code/renderers/web-components/template/stories/custom-elements.json b/code/renderers/web-components/template/stories/custom-elements.json
@@ -51,8 +51,8 @@
           ],
           "slots": [
             {
-              "description": "This is an unnamed slot (the default slot)",
-              "name": ""
+              "name": "prefix",
+              "description": "Label prefix"
             }
           ],
           "members": [

diff --git a/code/renderers/web-components/template/stories/demo-wc-card.stories.js b/code/renderers/web-components/template/stories/demo-wc-card.stories.js
@@ -3,14 +3,22 @@ import './demo-wc-card';
 
 export default {
   component: 'demo-wc-card',
+  render: ({ backSide, header, rows, prefix }) =>
+    html`
+      <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
+        ><span slot="prefix">${prefix}</span>A simple card</demo-wc-card
+      >
+    `,
 };
 
-const Template = ({ backSide, header, rows }) =>
-  html`
-    <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
-      >A simple card</demo-wc-card
-    >
-  `;
+export const Front = {
+  args: { backSide: false, header: undefined, rows: [] },
+};
+
+export const Back = {
+  args: { backSide: true, header: undefined, rows: [] },
+};
 
-export const Front = Template.bind({});
-Front.args = { backSide: false, header: undefined, rows: [] };
+export const Prefix = {
+  args: { backSide: false, prefix: 'prefix:', header: 'my header', rows: [] },
+};
diff --git a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
@@ -69,7 +69,7 @@ export class DemoWcCard extends LitElement {
         </div>
       </div>
       <div id="back" part="back">
-        <div class="header">${this.header}</div>
+        <div class="header"><slot name="prefix"></slot> ${this.header}</div>
 
         <div class="content">
           ${this.rows.length === 0