@patternfly/patternfly 6.5.0-prerelease.3 → 6.5.0-prerelease.5
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.
- package/components/Table/table.css +3 -0
- package/components/Table/table.scss +5 -0
- package/components/_index.css +3 -0
- package/docs/components/Drawer/examples/Drawer.md +1 -1
- package/docs/components/Table/examples/Table.md +88 -0
- package/docs/components/Wizard/examples/Wizard.md +15 -15
- package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
- package/docs/demos/Drawer/examples/Drawer.md +31 -33
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
- package/docs/demos/Wizard/examples/Wizard.md +31 -34
- package/package.json +1 -1
- package/patternfly-no-globals.css +3 -0
- package/patternfly.css +3 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -207,6 +207,9 @@
|
|
|
207
207
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
208
208
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
209
209
|
}
|
|
210
|
+
.pf-v6-c-table.pf-m-plain {
|
|
211
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
212
|
+
}
|
|
210
213
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
211
214
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
212
215
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -324,6 +324,11 @@
|
|
|
324
324
|
}
|
|
325
325
|
}
|
|
326
326
|
|
|
327
|
+
// - Table plain
|
|
328
|
+
&.pf-m-plain {
|
|
329
|
+
--#{$table}--BackgroundColor: transparent;
|
|
330
|
+
}
|
|
331
|
+
|
|
327
332
|
// - Table striped
|
|
328
333
|
// stylelint-disable
|
|
329
334
|
&.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
|
package/components/_index.css
CHANGED
|
@@ -17826,6 +17826,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
17826
17826
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
17827
17827
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
17828
17828
|
}
|
|
17829
|
+
.pf-v6-c-table.pf-m-plain {
|
|
17830
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
17831
|
+
}
|
|
17829
17832
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
17830
17833
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
17831
17834
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -449,7 +449,7 @@ cssPrefix: pf-v6-c-drawer
|
|
|
449
449
|
</div>
|
|
450
450
|
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
451
451
|
<div
|
|
452
|
-
class="pf-v6-c-drawer__body
|
|
452
|
+
class="pf-v6-c-drawer__body"
|
|
453
453
|
style="--pf-v6-c-drawer__panel__body--PaddingInlineStart: 48px;"
|
|
454
454
|
>Drawer panel body content with modified inline start padding</div>
|
|
455
455
|
</div>
|
|
@@ -8179,6 +8179,94 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
|
|
|
8179
8179
|
| `.pf-m-no-background` | `.pf-v6-c-table__expandable-row-content` | Modifies the expandable row content to have a transparent background. For in compound expandable when the parent expandable row has no padding with `.pf-m-no-padding`. |
|
|
8180
8180
|
| `.pf-m-no-animate-expand` | `.pf-v6-c-table__control-row.pf-m-expanded` | Disables animation on a compound expandable row. **Note:** Used to disable the animation when clicking between compound expandable items. |
|
|
8181
8181
|
|
|
8182
|
+
## Plain variant
|
|
8183
|
+
|
|
8184
|
+
### Plain example
|
|
8185
|
+
|
|
8186
|
+
```html isBeta
|
|
8187
|
+
<table
|
|
8188
|
+
class="pf-v6-c-table pf-m-grid-md pf-m-plain"
|
|
8189
|
+
role="grid"
|
|
8190
|
+
aria-label="This is a plain table example"
|
|
8191
|
+
id="table-plain"
|
|
8192
|
+
>
|
|
8193
|
+
<caption class="pf-v6-c-table__caption">This is the table caption</caption>
|
|
8194
|
+
|
|
8195
|
+
<thead class="pf-v6-c-table__thead">
|
|
8196
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
8197
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>
|
|
8198
|
+
|
|
8199
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th>
|
|
8200
|
+
|
|
8201
|
+
<th
|
|
8202
|
+
class="pf-v6-c-table__th"
|
|
8203
|
+
role="columnheader"
|
|
8204
|
+
scope="col"
|
|
8205
|
+
>Pull requests</th>
|
|
8206
|
+
|
|
8207
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th>
|
|
8208
|
+
|
|
8209
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th>
|
|
8210
|
+
</tr>
|
|
8211
|
+
</thead>
|
|
8212
|
+
|
|
8213
|
+
<tbody class="pf-v6-c-table__tbody" role="rowgroup">
|
|
8214
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
8215
|
+
<td
|
|
8216
|
+
class="pf-v6-c-table__td"
|
|
8217
|
+
role="cell"
|
|
8218
|
+
data-label="Repository name"
|
|
8219
|
+
>Repository 1</td>
|
|
8220
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
8221
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
8222
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
8223
|
+
<td
|
|
8224
|
+
class="pf-v6-c-table__td"
|
|
8225
|
+
role="cell"
|
|
8226
|
+
data-label="Last commit"
|
|
8227
|
+
>2 days ago</td>
|
|
8228
|
+
</tr>
|
|
8229
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
8230
|
+
<td
|
|
8231
|
+
class="pf-v6-c-table__td"
|
|
8232
|
+
role="cell"
|
|
8233
|
+
data-label="Repository name"
|
|
8234
|
+
>Repository 2</td>
|
|
8235
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
8236
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
8237
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
8238
|
+
<td
|
|
8239
|
+
class="pf-v6-c-table__td"
|
|
8240
|
+
role="cell"
|
|
8241
|
+
data-label="Last commit"
|
|
8242
|
+
>2 days ago</td>
|
|
8243
|
+
</tr>
|
|
8244
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
8245
|
+
<td
|
|
8246
|
+
class="pf-v6-c-table__td"
|
|
8247
|
+
role="cell"
|
|
8248
|
+
data-label="Repository name"
|
|
8249
|
+
>Repository 3</td>
|
|
8250
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
8251
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
8252
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
8253
|
+
<td
|
|
8254
|
+
class="pf-v6-c-table__td"
|
|
8255
|
+
role="cell"
|
|
8256
|
+
data-label="Last commit"
|
|
8257
|
+
>2 days ago</td>
|
|
8258
|
+
</tr>
|
|
8259
|
+
</tbody>
|
|
8260
|
+
</table>
|
|
8261
|
+
|
|
8262
|
+
```
|
|
8263
|
+
|
|
8264
|
+
### Plain variant usage
|
|
8265
|
+
|
|
8266
|
+
| Class | Applied to | Outcome |
|
|
8267
|
+
| -- | -- | -- |
|
|
8268
|
+
| `.pf-m-plain` | `.pf-v6-c-table` | Modifies the table to have a transparent background. |
|
|
8269
|
+
|
|
8182
8270
|
## Compact variant
|
|
8183
8271
|
|
|
8184
8272
|
### Compact example
|
|
@@ -846,23 +846,23 @@ wrapperTag: div
|
|
|
846
846
|
</div>
|
|
847
847
|
</div>
|
|
848
848
|
<div class="pf-v6-c-drawer__panel pf-m-width-33">
|
|
849
|
-
<div class="pf-v6-c-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
</div>drawer-panel
|
|
849
|
+
<div class="pf-v6-c-drawer__head">
|
|
850
|
+
drawer-panel
|
|
851
|
+
<div class="pf-v6-c-drawer__actions">
|
|
852
|
+
<div class="pf-v6-c-drawer__close">
|
|
853
|
+
<button
|
|
854
|
+
class="pf-v6-c-button pf-m-plain"
|
|
855
|
+
type="button"
|
|
856
|
+
aria-label="Close drawer panel"
|
|
857
|
+
>
|
|
858
|
+
<span class="pf-v6-c-button__icon">
|
|
859
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
860
|
+
</span>
|
|
861
|
+
</button>
|
|
862
|
+
</div>
|
|
864
863
|
</div>
|
|
865
864
|
</div>
|
|
865
|
+
<div class="pf-v6-c-drawer__body">drawer-body</div>
|
|
866
866
|
</div>
|
|
867
867
|
</div>
|
|
868
868
|
<footer class="pf-v6-c-wizard__footer">
|
|
@@ -727,46 +727,44 @@ cssPrefix: pf-d-description-list
|
|
|
727
727
|
</div>
|
|
728
728
|
</div>
|
|
729
729
|
<div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg">
|
|
730
|
-
<div class="pf-v6-c-
|
|
731
|
-
<div class="pf-v6-c-
|
|
732
|
-
<
|
|
730
|
+
<div class="pf-v6-c-drawer__head">
|
|
731
|
+
<div class="pf-v6-c-drawer__actions">
|
|
732
|
+
<button
|
|
733
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
734
|
+
type="button"
|
|
735
|
+
aria-expanded="false"
|
|
736
|
+
aria-label="Menu toggle"
|
|
737
|
+
id="description-list-in-drawer-example-toggle"
|
|
738
|
+
>
|
|
739
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
740
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
741
|
+
</span>
|
|
742
|
+
</button>
|
|
743
|
+
<div class="pf-v6-c-drawer__close">
|
|
733
744
|
<button
|
|
734
|
-
class="pf-v6-c-
|
|
745
|
+
class="pf-v6-c-button pf-m-plain"
|
|
735
746
|
type="button"
|
|
736
|
-
aria-
|
|
737
|
-
aria-label="Menu toggle"
|
|
738
|
-
id="description-list-in-drawer-example-toggle"
|
|
747
|
+
aria-label="Close drawer panel"
|
|
739
748
|
>
|
|
740
|
-
<span class="pf-v6-c-
|
|
741
|
-
<i class="fas fa-
|
|
749
|
+
<span class="pf-v6-c-button__icon">
|
|
750
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
742
751
|
</span>
|
|
743
752
|
</button>
|
|
744
|
-
<div class="pf-v6-c-drawer__close">
|
|
745
|
-
<button
|
|
746
|
-
class="pf-v6-c-button pf-m-plain"
|
|
747
|
-
type="button"
|
|
748
|
-
aria-label="Close drawer panel"
|
|
749
|
-
>
|
|
750
|
-
<span class="pf-v6-c-button__icon">
|
|
751
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
752
|
-
</span>
|
|
753
|
-
</button>
|
|
754
|
-
</div>
|
|
755
753
|
</div>
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
</span>
|
|
754
|
+
</div>
|
|
755
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
756
|
+
<div class="pf-v6-l-flex__item">
|
|
757
|
+
<span class="pf-v6-c-label pf-m-compact pf-m-blue">
|
|
758
|
+
<span class="pf-v6-c-label__content">
|
|
759
|
+
<span class="pf-v6-c-label__text">DC</span>
|
|
762
760
|
</span>
|
|
763
|
-
</
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
</
|
|
761
|
+
</span>
|
|
762
|
+
</div>
|
|
763
|
+
<div class="pf-v6-l-flex__item">
|
|
764
|
+
<h2
|
|
765
|
+
class="pf-v6-c-title pf-m-xl"
|
|
766
|
+
id="description-list-in-drawer-example-drawer-label"
|
|
767
|
+
>mary-test</h2>
|
|
770
768
|
</div>
|
|
771
769
|
</div>
|
|
772
770
|
</div>
|
|
@@ -338,46 +338,44 @@ wrapperTag: div
|
|
|
338
338
|
</div>
|
|
339
339
|
</div>
|
|
340
340
|
<div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg" hidden>
|
|
341
|
-
<div class="pf-v6-c-
|
|
342
|
-
<div class="pf-v6-c-
|
|
343
|
-
<
|
|
341
|
+
<div class="pf-v6-c-drawer__head">
|
|
342
|
+
<div class="pf-v6-c-drawer__actions">
|
|
343
|
+
<button
|
|
344
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
345
|
+
type="button"
|
|
346
|
+
aria-expanded="false"
|
|
347
|
+
aria-label="Menu toggle"
|
|
348
|
+
id="drawer-collapsed-example-toggle"
|
|
349
|
+
>
|
|
350
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
351
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
352
|
+
</span>
|
|
353
|
+
</button>
|
|
354
|
+
<div class="pf-v6-c-drawer__close">
|
|
344
355
|
<button
|
|
345
|
-
class="pf-v6-c-
|
|
356
|
+
class="pf-v6-c-button pf-m-plain"
|
|
346
357
|
type="button"
|
|
347
|
-
aria-
|
|
348
|
-
aria-label="Menu toggle"
|
|
349
|
-
id="drawer-collapsed-example-toggle"
|
|
358
|
+
aria-label="Close drawer panel"
|
|
350
359
|
>
|
|
351
|
-
<span class="pf-v6-c-
|
|
352
|
-
<i class="fas fa-
|
|
360
|
+
<span class="pf-v6-c-button__icon">
|
|
361
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
353
362
|
</span>
|
|
354
363
|
</button>
|
|
355
|
-
<div class="pf-v6-c-drawer__close">
|
|
356
|
-
<button
|
|
357
|
-
class="pf-v6-c-button pf-m-plain"
|
|
358
|
-
type="button"
|
|
359
|
-
aria-label="Close drawer panel"
|
|
360
|
-
>
|
|
361
|
-
<span class="pf-v6-c-button__icon">
|
|
362
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
363
|
-
</span>
|
|
364
|
-
</button>
|
|
365
|
-
</div>
|
|
366
364
|
</div>
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
</span>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
367
|
+
<div class="pf-v6-l-flex__item">
|
|
368
|
+
<span class="pf-v6-c-label pf-m-compact pf-m-blue">
|
|
369
|
+
<span class="pf-v6-c-label__content">
|
|
370
|
+
<span class="pf-v6-c-label__text">DC</span>
|
|
373
371
|
</span>
|
|
374
|
-
</
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
</
|
|
372
|
+
</span>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="pf-v6-l-flex__item">
|
|
375
|
+
<h2
|
|
376
|
+
class="pf-v6-c-title pf-m-xl"
|
|
377
|
+
id="drawer-collapsed-example-drawer-label"
|
|
378
|
+
>mary-test</h2>
|
|
381
379
|
</div>
|
|
382
380
|
</div>
|
|
383
381
|
</div>
|