Skip to content

Commit

Permalink
Merge pull request #19183 from sonntag-philipp/sonntag-philipp/issues…
Browse files Browse the repository at this point in the history
…-19167-18858-custom-elements-manifest-update

Web-components: Fix custom-elements order of property application
(cherry picked from commit abfc677)
  • Loading branch information
shilman committed Jun 13, 2023
1 parent 3f37160 commit ead2b7a
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ Object {
},
},
"type": Object {
"name": "void",
"name": "boolean",
},
},
"backSide": Object {
Expand Down Expand Up @@ -126,7 +126,7 @@ Object {
"name": "header",
"required": false,
"table": Object {
"category": "properties",
"category": "attributes",
"defaultValue": Object {
"summary": "\\"Your Message\\"",
},
Expand All @@ -152,7 +152,7 @@ Object {
"name": "rows",
"required": false,
"table": Object {
"category": "properties",
"category": "attributes",
"defaultValue": Object {
"summary": "[]",
},
Expand Down
29 changes: 20 additions & 9 deletions code/renderers/web-components/src/docs/custom-elements.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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'),
}
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@
],
"slots": [
{
"description": "This is an unnamed slot (the default slot)",
"name": ""
"name": "prefix",
"description": "Label prefix"
}
],
"members": [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: [] },
};
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit ead2b7a

Please sign in to comment.