Skip to content

Commit f35d4fa

Browse files
bennypowersbennypowers
authored
docs: new demo syntax (#2925)
* docs: move demo index files * docs: move slot jsdoc to inline * fix(tools): manifest main demo is index demo * docs: update demo references * docs: move css part docs inline * docs: move css props to inline docs * chore: update cem * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths * fix(tools): windows paths
1 parent bd40a73 commit f35d4fa

File tree

120 files changed

+1623
-2293
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+1623
-2293
lines changed

‎.changeset/cold-tools-follow.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@patternfly/elements": patch
3+
---
4+
5+
Use inline slot documentation instead of JSDoc
6+

‎.changeset/little-lizards-jog.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@patternfly/pfe-tools": patch
3+
---
4+
5+
Adjust dev server for new cem output
6+

‎docs/components/demos.11tydata.cjs‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,9 @@
1-
const { dirname } = require('path');
21
module.exports = {
32
templateEngineOverride: 'njk',
43
permalink: '{{ demo.permalink }}',
54
pagination: {
65
data: 'demos',
76
alias: 'demo',
87
size: 1,
9-
// somehow the main pf-icon demo is being printed twice.
10-
// so we'll group by tag name, and only take the first of each.
11-
before: demos => Object.values(Object.groupBy(demos
12-
.filter(demo => demo.permalink?.includes(demo.tagName))
13-
.map(demo => {
14-
if (demo.filePath?.endsWith(`${demo.tagName}.html`)) {
15-
return {
16-
...demo,
17-
permalink: `${dirname(demo.permalink)}/`,
18-
};
19-
} else {
20-
return demo;
21-
}
22-
}), demo => demo.tagName)).map(([x]) => x),
238
},
249
};

‎docs/docs/develop/html.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ render() {
4949
}
5050
```
5151

52-
We'll also need to update `/demo/pf-cool-element.html`
52+
We'll also need to update `/demo/index.html`
5353
so that the user's name is passed into the slot that we added in `pf-cool-element.ts`:
5454

5555
```html

‎elements/.config/cem.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ generate:
1010
noDefaultExcludes: false
1111
demoDiscovery:
1212
fileGlob: '*/demo/*.html'
13-
urlPattern: pf-(?P<tag>[\w-]+)/demo/(?P<demo>[\w-]+).html
14-
urlTemplate: https://patternflyelements.org/components/{tag}/demo/{demo}/
13+
urlPattern: ':tag/demo/:demo.html'
14+
urlTemplate: https://patternflyelements.org/components/{{.tag | alias | slug}}/demo/{{.demo | slug}}/

‎elements/pf-accordion/demo/pf-accordion.html‎ renamed to ‎elements/pf-accordion/demo/index.html‎

File renamed without changes.

‎elements/pf-accordion/pf-accordion-header.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
:host {
22
--pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
33

4+
/**
5+
* Sets the font color for the accordion header.
6+
*/
47
color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
58
background-color: var(--pf-global--BackgroundColor--100, #ffffff);
69
}
710

811
:host([large]) {
12+
/** Sets the top padding for the accordion header. */
913
--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
14+
/** Sets the right padding for the accordion header. */
1015
--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
16+
/** Sets the bottom padding for the accordion header. */
1117
--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
18+
/** Sets the left padding for the accordion header. */
1219
--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
20+
/** Sets the font family for the accordion header. */
1321
--pf-c-accordion__toggle--FontFamily:
1422
var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
1523
"RedHatDisplayUpdated",
@@ -19,6 +27,7 @@
1927
arial,
2028
sans-serif
2129
);
30+
/** Sets the font size for the accordion header. */
2231
--pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
2332
--pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);
2433
--pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);
@@ -47,10 +56,14 @@ a {
4756
.toggle:after {
4857
padding: 0;
4958
margin: 0;
59+
/** Sets the background color for the accordion header toggle element. */
5060
background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
5161
}
5262

5363
.icon {
64+
/**
65+
* Sets the transition animation for the accordion header.
66+
*/
5467
transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
5568
}
5669

@@ -74,12 +87,18 @@ a {
7487
arial,
7588
sans-serif));
7689
font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
90+
/**
91+
* Sets the font weight for the accordion header.
92+
*/
7793
font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
7894
color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
7995
}
8096

8197
.toggle[aria-expanded="true"] {
8298
--pf-c-accordion__toggle--after--BackgroundColor:
99+
/**
100+
* Sets the hover expanded before background color for the accordion header.
101+
*/
83102
var(
84103
--pf-c-accordion__toggle--expanded--before--BackgroundColor,
85104
var(
@@ -91,7 +110,13 @@ a {
91110

92111
.toggle:after {
93112
top: var(--pf-c-accordion__toggle--before--Top, -1px);
113+
/**
114+
* Sets the sidebar width for the accordion header.
115+
*/
94116
width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
117+
/**
118+
* Sets the background color for the after element for the accordion header toggle element.
119+
*/
95120
background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
96121
content: "";
97122
position: absolute;
@@ -103,17 +128,26 @@ span {
103128
overflow: hidden;
104129
text-overflow: ellipsis;
105130
white-space: nowrap;
131+
/**
132+
* Sets the max width for the text inside the accordion header.
133+
*/
106134
max-width: var(--pf-c-accordion__toggle-text--MaxWidth,
107135
calc(100% - var(--pf-global--spacer--lg, 1.5rem)));
108136
}
109137

110138
.toggle[aria-expanded="true"] .icon {
139+
/**
140+
* Sets the expanded icon rotation degrees for the accordion header.
141+
*/
111142
rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
112143
}
113144

114145
.toggle:hover,
115146
.toggle:active,
116147
.toggle:focus {
148+
/**
149+
* Sets the active background color for the accordion header.
150+
*/
117151
background-color:
118152
var(--pf-c-accordion__toggle--active--BackgroundColor,
119153
var(--pf-global--BackgroundColor--200, #f0f0f0));
@@ -122,6 +156,9 @@ span {
122156
.toggle:hover span,
123157
.toggle:focus span,
124158
.toggle:active span {
159+
/**
160+
* Sets the active text color for the accordion header.
161+
*/
125162
color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
126163
}
127164

‎elements/pf-accordion/pf-accordion-header.ts‎

Lines changed: 9 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -30,68 +30,7 @@ export class PfAccordionHeaderChangeEvent extends Event {
3030

3131
/**
3232
* Accordion Header
33-
* @csspart text - inline element containing the heading text or slotted heading content
34-
* @csspart accents - container for accents within the header
35-
* @csspart icon - caret icon
36-
* @slot
37-
* We expect the light DOM of the pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)
38-
* @slot accents
39-
* These elements will appear inline with the accordion header, between the header and the chevron
40-
* (or after the chevron and header in disclosure mode).
4133
* @fires {AccordionHeaderChangeEvent} change - when the open panels change
42-
* @cssprop {<color>} [--pf-c-accordion__toggle--Color=var(--pf-global--Color--100, #151515)]
43-
* Sets the font color for the accordion header.
44-
*
45-
* @cssprop {<color>} [--pf-c-accordion__toggle--BackgroundColor=transparent]
46-
* Sets the background color for the accordion header toggle element.
47-
*
48-
* @cssprop {<color>} [--pf-c-accordion__toggle--after--BackgroundColor=transparent]
49-
* Sets the background color for the after element for the accordion header toggle element.
50-
*
51-
* @cssprop {<length>} [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
52-
* Sets the top padding for the accordion header.
53-
*
54-
* @cssprop {<length>} [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]
55-
* Sets the right padding for the accordion header.
56-
*
57-
* @cssprop {<length>} [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
58-
* Sets the bottom padding for the accordion header.
59-
*
60-
* @cssprop {<length>} [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
61-
* Sets the left padding for the accordion header.
62-
*
63-
* @cssprop {<length>} [--pf-c-accordion__toggle--FontSize=var(--pf-global--FontSize--lg, 1rem)]
64-
* Sets the sidebar background color for the accordion header.
65-
*
66-
* @cssprop {<color>} [--pf-c-accordion__toggle--FontFamily=var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif)]
67-
* Sets the font family for the accordion header.
68-
*
69-
* @cssprop [--pf-c-accordion__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]
70-
* Sets the font weight for the accordion header.
71-
*
72-
* @cssprop {<color>} [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
73-
* Sets the active backgrdound color for the accordion header.
74-
*
75-
* @cssprop {<color>} [--pf-c-accordion__toggle--active-text--Color=var(--pf-global--link--Color, #0066cc)]
76-
* Sets the active text color for the accordion header.
77-
*
78-
* @cssprop [--pf-c-accordion__toggle--active-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
79-
* Sets the active text font weight for the accordion header.
80-
*
81-
* @cssprop {<color>} [--pf-c-accordion__toggle--expanded--before--BackgroundColor=var(--pf-global--link--Color, #0066cc)]
82-
* Sets the hover expanded before background color for the accordion header.
83-
*
84-
* @cssprop [--pf-c-accordion__toggle--expanded-icon--Rotate=90deg]
85-
* Sets the expanded icon rotation degrees for the accordion header.
86-
*
87-
* @cssprop {<length>} [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]
88-
* Sets the max width for the text inside the accordion header.
89-
*
90-
* @cssprop [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
91-
* Sets the sidebar width for the accordion header.
92-
*
93-
* @cssprop [--pf-c-accordion__toggle-icon--Transition=0.2s ease-in 0s]
94-
* Sets the transition animation for the accordion header.
9534
*
9635
*/
9736
@customElement('pf-accordion-header')
@@ -136,12 +75,21 @@ export class PfAccordionHeader extends LitElement {
13675
class="toggle"
13776
@click="${this.#onClick}"
13877
aria-expanded="${String(!!this.expanded) as 'true' | 'false'}">
78+
<!-- summary: inline element containing the heading text or slotted heading content -->
13979
<span part="text">${headingText ?? html`
80+
<!-- summary: A heading level tag (h1, h2, h3, h4, h5, h6) -->
14081
<slot></slot>`}
14182
</span>
83+
<!-- summary: container for accents within the header -->
14284
<span part="accents" ?hidden="${this.#slots.isEmpty('accents')}">
85+
<!-- summary: Header accent elements like tag or icon
86+
description: |
87+
These elements will appear inline with the accordion header,
88+
between the header and the chevron
89+
(or after the chevron and header in disclosure mode). -->
14390
<slot name="accents"></slot>
14491
</span>
92+
<!-- summary: caret icon -->
14593
<pf-icon part="icon"
14694
class="icon"
14795
size="lg"

‎elements/pf-accordion/pf-accordion-panel.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
overflow: hidden;
55
will-change: height;
66
color: var(--pf-global--Color--100, #151515);
7+
/** Background color for accordion panel */
78
background-color:
89
var(
910
--pf-c-accordion--BackgroundColor,
@@ -12,10 +13,15 @@
1213
}
1314

1415
.body {
16+
/** Padding for accordion panel body */
1517
padding:
18+
/** Top padding for panel content */
1619
var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
20+
/** Right padding for panel content */
1721
var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))
22+
/** Bottom padding for panel content */
1823
var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
24+
/** Left padding for panel content */
1925
var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
2026
}
2127

@@ -25,7 +31,9 @@
2531
top: 0;
2632
bottom: 0;
2733
left: 0;
34+
/** Before width for panel content */
2835
width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
36+
/** Background color for panel content before element */
2937
background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
3038
}
3139

@@ -50,12 +58,15 @@
5058
}
5159

5260
.content {
61+
/** Font color for panel content */
5362
color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
63+
/** Font size for panel content */
5464
font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
5565
}
5666

5767
:host([fixed]) {
5868
overflow-y: auto;
69+
/** Maximum height for panel content when fixed */
5970
max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
6071
}
6172

@@ -66,6 +77,7 @@
6677

6778
.content[expanded],
6879
:host([expanded]) .content {
80+
/** Sidebar color for panel when expanded */
6981
--pf-c-accordion__panel-body--before--BackgroundColor:
7082
var(
7183
--pf-c-accordion__panel--content-body--before--BackgroundColor,

‎elements/pf-accordion/pf-accordion-panel.ts‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,40 +9,6 @@ import style from './pf-accordion-panel.css';
99
/**
1010
* Accordion Panel
1111
* @slot - Panel content
12-
* @cssprop {<color>} [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #ffffff)]
13-
* Sets the background color for the panel content.
14-
*
15-
* @cssprop {<color>} [--pf-c-accordion__panel--Color=var(--pf-global--Color--dark-200, #6a6e73)]
16-
* Sets the font color for the panel content.
17-
*
18-
* @cssprop {<length>} [--pf-c-accordion__panel--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
19-
* Sets the font size for the panel content.
20-
*
21-
* @cssprop {<color>} [--pf-c-accordion__panel--content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #0066cc)]
22-
* Sets the sidebar color for the panel when the context is expanded.
23-
*
24-
* @cssprop {<length>} [--pf-c-accordion__panel--m-fixed--MaxHeight=9.375rem]
25-
* Sets the maximum height for the panel content.
26-
* Will only be used if the `fixed` attribute is used.
27-
*
28-
* @cssprop {<length>} [--pf-c-accordion__panel-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
29-
* Sets the padding top for the panel content.
30-
*
31-
* @cssprop {<length>} [--pf-c-accordion__panel-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
32-
* Sets the padding right for the panel content.
33-
*
34-
* @cssprop {<length>} [--pf-c-accordion__panel-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
35-
* Sets the padding bottom for the panel content.
36-
*
37-
* @cssprop {<length>} [--pf-c-accordion__panel-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
38-
* Sets the padding left for the panel content.
39-
*
40-
* @cssprop {<color>} [--pf-c-accordion__panel-body--before--BackgroundColor=transparent]
41-
* Sets the background color for the panel content.
42-
*
43-
* @cssprop [--pf-c-accordion__panel-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
44-
* Sets the before width for the panel content.
45-
*
4612
*/
4713
@customElement('pf-accordion-panel')
4814
export class PfAccordionPanel extends LitElement {

0 commit comments

Comments
 (0)