@patternfly/patternfly 6.0.0-alpha.222 → 6.0.0-alpha.223

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/components/ExpandableSection/expandable-section.css +25 -84
  2. package/components/ExpandableSection/expandable-section.scss +24 -90
  3. package/components/_index.css +25 -84
  4. package/docs/components/CodeBlock/examples/CodeBlock.md +33 -22
  5. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  6. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +62 -54
  7. package/package.json +5 -5
  8. package/patternfly-no-globals.css +25 -84
  9. package/patternfly.css +25 -84
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -8,16 +8,16 @@ cssPrefix: pf-v6-c-expandable-section
8
8
 
9
9
  ```html
10
10
  <div class="pf-v6-c-expandable-section">
11
- <button
12
- type="button"
13
- class="pf-v6-c-expandable-section__toggle"
14
- aria-expanded="false"
15
- >
16
- <span class="pf-v6-c-expandable-section__toggle-icon">
17
- <i class="fas fa-angle-right" aria-hidden="true"></i>
18
- </span>
19
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
20
- </button>
11
+ <div class="pf-v6-c-expandable-section__toggle">
12
+ <button class="pf-v6-c-button pf-m-link" type="button">
13
+ <span class="pf-v6-c-button__icon pf-m-start">
14
+ <span class="pf-v6-c-expandable-section__toggle-icon">
15
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16
+ </span>
17
+ </span>
18
+ <span class="pf-v6-c-button__text">Show more</span>
19
+ </button>
20
+ </div>
21
21
  <div
22
22
  class="pf-v6-c-expandable-section__content"
23
23
  hidden
@@ -30,16 +30,16 @@ cssPrefix: pf-v6-c-expandable-section
30
30
 
31
31
  ```html
32
32
  <div class="pf-v6-c-expandable-section pf-m-expanded">
33
- <button
34
- type="button"
35
- class="pf-v6-c-expandable-section__toggle"
36
- aria-expanded="true"
37
- >
38
- <span class="pf-v6-c-expandable-section__toggle-icon">
39
- <i class="fas fa-angle-right" aria-hidden="true"></i>
40
- </span>
41
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
42
- </button>
33
+ <div class="pf-v6-c-expandable-section__toggle">
34
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
35
+ <span class="pf-v6-c-button__icon pf-m-start">
36
+ <span class="pf-v6-c-expandable-section__toggle-icon">
37
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
38
+ </span>
39
+ </span>
40
+ <span class="pf-v6-c-button__text">Show less</span>
41
+ </button>
42
+ </div>
43
43
  <div
44
44
  class="pf-v6-c-expandable-section__content"
45
45
  >This content is visible only when the component is expanded.</div>
@@ -51,16 +51,16 @@ cssPrefix: pf-v6-c-expandable-section
51
51
 
52
52
  ```html
53
53
  <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
54
- <button
55
- type="button"
56
- class="pf-v6-c-expandable-section__toggle"
57
- aria-expanded="true"
58
- >
59
- <span class="pf-v6-c-expandable-section__toggle-icon">
60
- <i class="fas fa-angle-right" aria-hidden="true"></i>
61
- </span>
62
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
63
- </button>
54
+ <div class="pf-v6-c-expandable-section__toggle">
55
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
56
+ <span class="pf-v6-c-button__icon pf-m-start">
57
+ <span class="pf-v6-c-expandable-section__toggle-icon">
58
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
59
+ </span>
60
+ </span>
61
+ <span class="pf-v6-c-button__text">Show less</span>
62
+ </button>
63
+ </div>
64
64
  <div
65
65
  class="pf-v6-c-expandable-section__content"
66
66
  >This content is visible only when the component is expanded.</div>
@@ -72,16 +72,16 @@ cssPrefix: pf-v6-c-expandable-section
72
72
 
73
73
  ```html
74
74
  <div class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width">
75
- <button
76
- type="button"
77
- class="pf-v6-c-expandable-section__toggle"
78
- aria-expanded="false"
79
- >
80
- <span class="pf-v6-c-expandable-section__toggle-icon">
81
- <i class="fas fa-angle-right" aria-hidden="true"></i>
82
- </span>
83
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
84
- </button>
75
+ <div class="pf-v6-c-expandable-section__toggle">
76
+ <button class="pf-v6-c-button pf-m-link" type="button">
77
+ <span class="pf-v6-c-button__icon pf-m-start">
78
+ <span class="pf-v6-c-expandable-section__toggle-icon">
79
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
80
+ </span>
81
+ </span>
82
+ <span class="pf-v6-c-button__text">Show more</span>
83
+ </button>
84
+ </div>
85
85
  <div
86
86
  class="pf-v6-c-expandable-section__content"
87
87
  hidden
@@ -96,16 +96,16 @@ cssPrefix: pf-v6-c-expandable-section
96
96
  <div
97
97
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
98
98
  >
99
- <button
100
- type="button"
101
- class="pf-v6-c-expandable-section__toggle"
102
- aria-expanded="true"
103
- >
104
- <span class="pf-v6-c-expandable-section__toggle-icon">
105
- <i class="fas fa-angle-right" aria-hidden="true"></i>
106
- </span>
107
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
108
- </button>
99
+ <div class="pf-v6-c-expandable-section__toggle">
100
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
101
+ <span class="pf-v6-c-button__icon pf-m-start">
102
+ <span class="pf-v6-c-expandable-section__toggle-icon">
103
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
104
+ </span>
105
+ </span>
106
+ <span class="pf-v6-c-button__text">Show less</span>
107
+ </button>
108
+ </div>
109
109
  <div
110
110
  class="pf-v6-c-expandable-section__content"
111
111
  >This content is visible only when the component is expanded.</div>
@@ -119,16 +119,16 @@ cssPrefix: pf-v6-c-expandable-section
119
119
  <div
120
120
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
121
  >
122
- <button
123
- type="button"
124
- class="pf-v6-c-expandable-section__toggle"
125
- aria-expanded="true"
126
- >
127
- <span class="pf-v6-c-expandable-section__toggle-icon">
128
- <i class="fas fa-angle-right" aria-hidden="true"></i>
129
- </span>
130
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
131
- </button>
122
+ <div class="pf-v6-c-expandable-section__toggle">
123
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
124
+ <span class="pf-v6-c-button__icon pf-m-start">
125
+ <span class="pf-v6-c-expandable-section__toggle-icon">
126
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
127
+ </span>
128
+ </span>
129
+ <span class="pf-v6-c-button__text">Show less</span>
130
+ </button>
131
+ </div>
132
132
  <div
133
133
  class="pf-v6-c-expandable-section__content"
134
134
  >This content is visible only when the component is expanded.</div>
@@ -151,17 +151,23 @@ cssPrefix: pf-v6-c-expandable-section
151
151
 
152
152
  <div class="pf-v6-l-stack__item">
153
153
  <div class="pf-v6-c-expandable-section pf-m-expanded">
154
- <button
155
- type="button"
156
- class="pf-v6-c-expandable-section__toggle"
157
- aria-expanded="true"
158
- aria-controls="detached-toggle-content"
159
- >
160
- <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
161
- <i class="fas fa-angle-right" aria-hidden="true"></i>
162
- </span>
163
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
164
- </button>
154
+ <div class="pf-v6-c-expandable-section__toggle">
155
+ <button
156
+ class="pf-v6-c-button pf-m-link"
157
+ type="button"
158
+ aria-expanded="true"
159
+ aria-controls="detached-toggle-content"
160
+ >
161
+ <span class="pf-v6-c-button__icon pf-m-start">
162
+ <span
163
+ class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
164
+ >
165
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
166
+ </span>
167
+ </span>
168
+ <span class="pf-v6-c-button__text">Show less</span>
169
+ </button>
170
+ </div>
165
171
  </div>
166
172
  </div>
167
173
  </div>
@@ -175,13 +181,11 @@ cssPrefix: pf-v6-c-expandable-section
175
181
  <div
176
182
  class="pf-v6-c-expandable-section__content"
177
183
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
178
- <button
179
- type="button"
180
- class="pf-v6-c-expandable-section__toggle"
181
- aria-expanded="false"
182
- >
183
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
184
- </button>
184
+ <div class="pf-v6-c-expandable-section__toggle">
185
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
186
+ <span class="pf-v6-c-button__text">Show more</span>
187
+ </button>
188
+ </div>
185
189
  </div>
186
190
 
187
191
  ```
@@ -193,13 +197,15 @@ cssPrefix: pf-v6-c-expandable-section
193
197
  <div
194
198
  class="pf-v6-c-expandable-section__content"
195
199
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
196
- <button
197
- type="button"
198
- class="pf-v6-c-expandable-section__toggle"
199
- aria-expanded="true"
200
- >
201
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
202
- </button>
200
+ <div class="pf-v6-c-expandable-section__toggle">
201
+ <button
202
+ class="pf-v6-c-button pf-m-inline pf-m-link"
203
+ type="button"
204
+ aria-expanded="true"
205
+ >
206
+ <span class="pf-v6-c-button__text">Show less</span>
207
+ </button>
208
+ </div>
203
209
  </div>
204
210
 
205
211
  ```
@@ -210,20 +216,19 @@ cssPrefix: pf-v6-c-expandable-section
210
216
 
211
217
  | Attribute | Applied to | Outcome |
212
218
  | -- | -- | -- |
213
- | `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
214
- | `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
219
+ | `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates that the expandable section content is visible. **Required** |
220
+ | `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates the the expandable section content is hidden. **Required** |
215
221
  | `hidden` | `.pf-v6-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
216
222
  | `aria-hidden="true"` | `.pf-v6-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
217
- | `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
218
- | `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle`. **Required** |
223
+ | `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Identifies the element controlled by the toggle button. **Required** |
224
+ | `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle .pf-v6-c-button`. **Required** |
219
225
 
220
226
  ### Usage
221
227
 
222
228
  | Class | Applied to | Outcome |
223
229
  | -- | -- | -- |
224
230
  | `.pf-v6-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
225
- | `.pf-v6-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
226
- | `.pf-v6-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
231
+ | `.pf-v6-c-expandable-section__toggle` | `<div>` | Initiates the expandable toggle wrapper. **Required** |
227
232
  | `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
228
233
  | `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
229
234
  | `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md CHANGED
@@ -138,25 +138,25 @@ cssPrefix: pf-v6-c-multiple-file-upload
138
138
  </div>
139
139
  <div class="pf-v6-c-multiple-file-upload__status">
140
140
  <div class="pf-v6-c-expandable-section">
141
- <button
142
- type="button"
143
- class="pf-v6-c-expandable-section__toggle"
144
- aria-expanded="false"
145
- >
146
- <span class="pf-v6-c-expandable-section__toggle-icon">
147
- <i class="fas fa-angle-right" aria-hidden="true"></i>
148
- </span>
149
- <span class="pf-v6-c-expandable-section__toggle-text">
150
- <div class="pf-v6-c-multiple-file-upload__status-progress">
151
- <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
152
- <i class="pf-v6-pficon pf-v6-pficon-in-progress"></i>
141
+ <div class="pf-v6-c-expandable-section__toggle">
142
+ <button class="pf-v6-c-button pf-m-link" type="button">
143
+ <span class="pf-v6-c-button__icon pf-m-start">
144
+ <span class="pf-v6-c-expandable-section__toggle-icon">
145
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
146
+ </span>
147
+ </span>
148
+ <span class="pf-v6-c-button__text">
149
+ <div class="pf-v6-c-multiple-file-upload__status-progress">
150
+ <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
151
+ <i class="pf-v6-pficon pf-v6-pficon-in-progress"></i>
152
+ </div>
153
+ <div
154
+ class="pf-v6-c-multiple-file-upload__status-progress-text"
155
+ >0 of 3 files uploaded</div>
153
156
  </div>
154
- <div
155
- class="pf-v6-c-multiple-file-upload__status-progress-text"
156
- >0 of 3 files uploaded</div>
157
- </div>
158
- </span>
159
- </button>
157
+ </span>
158
+ </button>
159
+ </div>
160
160
  <div class="pf-v6-c-expandable-section__content" hidden>
161
161
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
162
162
  <li class="pf-v6-c-multiple-file-upload__status-item">
@@ -345,25 +345,29 @@ cssPrefix: pf-v6-c-multiple-file-upload
345
345
  </div>
346
346
  <div class="pf-v6-c-multiple-file-upload__status">
347
347
  <div class="pf-v6-c-expandable-section pf-m-expanded">
348
- <button
349
- type="button"
350
- class="pf-v6-c-expandable-section__toggle"
351
- aria-expanded="true"
352
- >
353
- <span class="pf-v6-c-expandable-section__toggle-icon">
354
- <i class="fas fa-angle-right" aria-hidden="true"></i>
355
- </span>
356
- <span class="pf-v6-c-expandable-section__toggle-text">
357
- <div class="pf-v6-c-multiple-file-upload__status-progress">
358
- <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
359
- <i class="pf-v6-pficon pf-v6-pficon-in-progress"></i>
348
+ <div class="pf-v6-c-expandable-section__toggle">
349
+ <button
350
+ class="pf-v6-c-button pf-m-link"
351
+ type="button"
352
+ aria-expanded="true"
353
+ >
354
+ <span class="pf-v6-c-button__icon pf-m-start">
355
+ <span class="pf-v6-c-expandable-section__toggle-icon">
356
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
357
+ </span>
358
+ </span>
359
+ <span class="pf-v6-c-button__text">
360
+ <div class="pf-v6-c-multiple-file-upload__status-progress">
361
+ <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
362
+ <i class="pf-v6-pficon pf-v6-pficon-in-progress"></i>
363
+ </div>
364
+ <div
365
+ class="pf-v6-c-multiple-file-upload__status-progress-text"
366
+ >0 of 3 files uploaded</div>
360
367
  </div>
361
- <div
362
- class="pf-v6-c-multiple-file-upload__status-progress-text"
363
- >0 of 3 files uploaded</div>
364
- </div>
365
- </span>
366
- </button>
368
+ </span>
369
+ </button>
370
+ </div>
367
371
  <div class="pf-v6-c-expandable-section__content">
368
372
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
369
373
  <li class="pf-v6-c-multiple-file-upload__status-item">
@@ -552,25 +556,29 @@ cssPrefix: pf-v6-c-multiple-file-upload
552
556
  </div>
553
557
  <div class="pf-v6-c-multiple-file-upload__status">
554
558
  <div class="pf-v6-c-expandable-section pf-m-expanded">
555
- <button
556
- type="button"
557
- class="pf-v6-c-expandable-section__toggle"
558
- aria-expanded="true"
559
- >
560
- <span class="pf-v6-c-expandable-section__toggle-icon">
561
- <i class="fas fa-angle-right" aria-hidden="true"></i>
562
- </span>
563
- <span class="pf-v6-c-expandable-section__toggle-text">
564
- <div class="pf-v6-c-multiple-file-upload__status-progress">
565
- <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
566
- <i class="pf-v6-pficon pf-v6-pficon-in-progress"></i>
559
+ <div class="pf-v6-c-expandable-section__toggle">
560
+ <button
561
+ class="pf-v6-c-button pf-m-link"
562
+ type="button"
563
+ aria-expanded="true"
564
+ >
565
+ <span class="pf-v6-c-button__icon pf-m-start">
566
+ <span class="pf-v6-c-expandable-section__toggle-icon">
567
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
568
+ </span>
569
+ </span>
570
+ <span class="pf-v6-c-button__text">
571
+ <div class="pf-v6-c-multiple-file-upload__status-progress">
572
+ <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
573
+ <i class="pf-v6-pficon pf-v6-pficon-in-progress"></i>
574
+ </div>
575
+ <div
576
+ class="pf-v6-c-multiple-file-upload__status-progress-text"
577
+ >0 of 3 files uploaded</div>
567
578
  </div>
568
- <div
569
- class="pf-v6-c-multiple-file-upload__status-progress-text"
570
- >0 of 3 files uploaded</div>
571
- </div>
572
- </span>
573
- </button>
579
+ </span>
580
+ </button>
581
+ </div>
574
582
  <div class="pf-v6-c-expandable-section__content">
575
583
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
576
584
  <li class="pf-v6-c-multiple-file-upload__status-item">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.222",
4
+ "version": "6.0.0-alpha.223",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,11 +47,11 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.0.0-alpha.77",
50
+ "@patternfly/documentation-framework": "6.0.0-alpha.81",
51
51
  "@patternfly/patternfly-a11y": "4.3.1",
52
- "@patternfly/react-code-editor": "6.0.0-alpha.94",
53
- "@patternfly/react-core": "6.0.0-alpha.94",
54
- "@patternfly/react-table": "6.0.0-alpha.95",
52
+ "@patternfly/react-code-editor": "6.0.0-alpha.101",
53
+ "@patternfly/react-core": "6.0.0-alpha.101",
54
+ "@patternfly/react-table": "6.0.0-alpha.102",
55
55
  "@starptech/prettyhtml": "^0.10.0",
56
56
  "backstopjs": "^6.3.23",
57
57
  "cheerio": "^1.0.0-rc.12",
package/patternfly-no-globals.css CHANGED
@@ -12160,12 +12160,7 @@ ul) {
12160
12160
  }
12161
12161
 
12162
12162
  :where(:root, .pf-v6-c-expandable-section) {
12163
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12164
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12165
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12166
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12167
- --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
12168
- --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
12163
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
12169
12164
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
12170
12165
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
12171
12166
  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -12173,82 +12168,50 @@ ul) {
12173
12168
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
12174
12169
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
12175
12170
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
12176
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
12177
- --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
12178
- --pf-v6-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
12179
- --pf-v6-c-expandable-section__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12180
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12181
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12182
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12183
12171
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
12184
12172
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
12173
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12174
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12175
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
12176
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12177
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12185
12178
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12179
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
12186
12180
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
12187
12181
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
12188
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
12189
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12190
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12191
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12192
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
12193
- --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
12194
- --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
12195
- --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
12196
- --pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
12197
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12198
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12199
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12200
- --pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
12201
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
12202
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart));
12203
- --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart));
12204
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12205
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12206
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12207
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
12208
- --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12182
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
12209
12183
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
12184
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
12210
12185
  }
12211
12186
 
12187
+ .pf-v6-c-expandable-section {
12188
+ display: flex;
12189
+ flex-direction: column;
12190
+ gap: var(--pf-v6-c-expandable-section--Gap);
12191
+ align-items: start;
12192
+ }
12212
12193
  .pf-v6-c-expandable-section.pf-m-expanded {
12213
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section--m-expanded__toggle-text--Color);
12214
12194
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
12215
12195
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
12216
- --pf-v6-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
12217
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
12196
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
12218
12197
  }
12219
12198
  .pf-v6-c-expandable-section.pf-m-limit-width {
12220
12199
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
12221
12200
  }
12222
12201
  .pf-v6-c-expandable-section.pf-m-display-lg {
12223
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart);
12224
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd);
12225
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd);
12226
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart);
12227
- --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
12228
- --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
12229
- --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
12230
- --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
12231
- --pf-v6-c-expandable-section__toggle--Width: var(--pf-v6-c-expandable-section--m-display-lg__toggle--Width);
12232
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd);
12233
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd);
12234
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart);
12235
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart);
12202
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
12203
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
12204
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
12205
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
12236
12206
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
12237
- border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
12207
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
12238
12208
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
12239
12209
  }
12240
12210
  .pf-v6-c-expandable-section.pf-m-indented {
12241
12211
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
12242
12212
  }
12243
12213
  .pf-v6-c-expandable-section.pf-m-truncate {
12244
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: 0;
12245
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: 0;
12246
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd);
12247
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: 0;
12248
- --pf-v6-c-expandable-section__content--PaddingBlockStart: 0;
12249
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: 0;
12250
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: 0;
12251
- --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
12214
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
12252
12215
  }
12253
12216
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
12254
12217
  display: -webkit-box;
@@ -12257,24 +12220,8 @@ ul) {
12257
12220
  overflow: hidden;
12258
12221
  }
12259
12222
 
12260
- .pf-v6-c-expandable-section__toggle {
12261
- display: flex;
12262
- column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
12263
- width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
12264
- padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingBlockStart);
12265
- padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBlockEnd);
12266
- padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart);
12267
- padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingInlineEnd);
12268
- background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
12269
- border: none;
12270
- border-radius: var(--pf-v6-c-expandable-section__toggle--BorderRadius, 0);
12271
- }
12272
- .pf-v6-c-expandable-section__toggle:is(:hover, :focus) {
12273
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section__toggle-text--hover--Color);
12274
- --pf-v6-c-expandable-section__toggle--BackgroundColor: var(--pf-v6-c-expandable-section__toggle--hover--BackgroundColor, initial);
12275
- }
12276
-
12277
12223
  .pf-v6-c-expandable-section__toggle-icon {
12224
+ display: inline-block;
12278
12225
  min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
12279
12226
  color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
12280
12227
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
@@ -12288,16 +12235,10 @@ ul) {
12288
12235
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
12289
12236
  }
12290
12237
 
12291
- .pf-v6-c-expandable-section__toggle-text {
12292
- color: var(--pf-v6-c-expandable-section__toggle-text--Color);
12293
- }
12294
-
12295
12238
  .pf-v6-c-expandable-section__content {
12296
12239
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
12297
- padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingBlockStart);
12298
- padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd);
12299
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
12300
- padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingInlineEnd);
12240
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
12241
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
12301
12242
  }
12302
12243
 
12303
12244
  :where(:root, .pf-v6-c-file-upload) {