@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.11
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/README.md +1 -1
- package/assets/images/icon-help.hbs +3 -0
- package/components/Alert/alert-group.css +52 -31
- package/components/Alert/alert-group.scss +77 -46
- package/components/CodeEditor/code-editor.css +3 -0
- package/components/CodeEditor/code-editor.scss +3 -1
- package/components/Drawer/drawer.css +28 -14
- package/components/Drawer/drawer.scss +28 -9
- package/components/ExpandableSection/expandable-section.css +30 -0
- package/components/ExpandableSection/expandable-section.scss +30 -0
- package/components/MenuToggle/menu-toggle.css +8 -4
- package/components/MenuToggle/menu-toggle.scss +15 -3
- package/components/Page/page.css +4 -3
- package/components/Page/page.scss +4 -2
- package/components/Skeleton/skeleton.css +22 -2
- package/components/Skeleton/skeleton.scss +25 -3
- package/components/Tabs/tabs.css +65 -0
- package/components/Tabs/tabs.scss +77 -0
- package/components/Truncate/truncate.css +5 -0
- package/components/Truncate/truncate.scss +6 -0
- package/components/_index.css +216 -54
- package/docs/components/Button/examples/Button.md +13 -1
- package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
- package/docs/components/Divider/examples/Divider.md +1 -1
- package/docs/components/Drawer/examples/Drawer.md +4 -0
- package/docs/components/Form/examples/Form.md +156 -12
- package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
- package/docs/components/ModalBox/examples/ModalBox.md +13 -1
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/Table/examples/Table.md +30 -6
- package/docs/components/Tabs/examples/Tabs.md +6741 -12
- package/docs/components/Truncate/examples/Truncate.md +53 -10
- package/docs/demos/Card/examples/Card.md +57 -0
- package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
- package/docs/demos/Drawer/examples/Drawer.md +38 -0
- package/docs/demos/Form/examples/BasicForms.md +130 -10
- package/docs/demos/Masthead/examples/Masthead.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +39 -3
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/docs/demos/Page/examples/Page.md +355 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
- package/docs/demos/Table/examples/Table.md +67 -23
- package/docs/demos/Tabs/examples/Tabs.md +570 -0
- package/package.json +6 -6
- package/patternfly-no-globals.css +216 -54
- package/patternfly.css +216 -54
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -21,7 +21,19 @@ cssPrefix: pf-v6-c-form
|
|
|
21
21
|
aria-describedby="form-vertical-name"
|
|
22
22
|
>
|
|
23
23
|
<span class="pf-v6-c-button__icon">
|
|
24
|
-
<
|
|
24
|
+
<svg
|
|
25
|
+
class="pf-v6-svg"
|
|
26
|
+
viewBox="0 0 1024 1024"
|
|
27
|
+
fill="currentColor"
|
|
28
|
+
aria-hidden="true"
|
|
29
|
+
role="img"
|
|
30
|
+
width="1em"
|
|
31
|
+
height="1em"
|
|
32
|
+
>
|
|
33
|
+
<path
|
|
34
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
35
|
+
/>
|
|
36
|
+
</svg>
|
|
25
37
|
</span>
|
|
26
38
|
</span></span>
|
|
27
39
|
</div>
|
|
@@ -71,7 +83,19 @@ cssPrefix: pf-v6-c-form
|
|
|
71
83
|
aria-describedby="form-horizontal-info"
|
|
72
84
|
>
|
|
73
85
|
<span class="pf-v6-c-button__icon">
|
|
74
|
-
<
|
|
86
|
+
<svg
|
|
87
|
+
class="pf-v6-svg"
|
|
88
|
+
viewBox="0 0 1024 1024"
|
|
89
|
+
fill="currentColor"
|
|
90
|
+
aria-hidden="true"
|
|
91
|
+
role="img"
|
|
92
|
+
width="1em"
|
|
93
|
+
height="1em"
|
|
94
|
+
>
|
|
95
|
+
<path
|
|
96
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
97
|
+
/>
|
|
98
|
+
</svg>
|
|
75
99
|
</span>
|
|
76
100
|
</span></span>
|
|
77
101
|
</div>
|
|
@@ -105,7 +129,19 @@ cssPrefix: pf-v6-c-form
|
|
|
105
129
|
aria-describedby="form-horizontal-checkbox-legend"
|
|
106
130
|
>
|
|
107
131
|
<span class="pf-v6-c-button__icon">
|
|
108
|
-
<
|
|
132
|
+
<svg
|
|
133
|
+
class="pf-v6-svg"
|
|
134
|
+
viewBox="0 0 1024 1024"
|
|
135
|
+
fill="currentColor"
|
|
136
|
+
aria-hidden="true"
|
|
137
|
+
role="img"
|
|
138
|
+
width="1em"
|
|
139
|
+
height="1em"
|
|
140
|
+
>
|
|
141
|
+
<path
|
|
142
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
143
|
+
/>
|
|
144
|
+
</svg>
|
|
109
145
|
</span>
|
|
110
146
|
</span></span>
|
|
111
147
|
</div>
|
|
@@ -161,7 +197,19 @@ cssPrefix: pf-v6-c-form
|
|
|
161
197
|
aria-describedby="form-horizontal-custom-breakpoint-name"
|
|
162
198
|
>
|
|
163
199
|
<span class="pf-v6-c-button__icon">
|
|
164
|
-
<
|
|
200
|
+
<svg
|
|
201
|
+
class="pf-v6-svg"
|
|
202
|
+
viewBox="0 0 1024 1024"
|
|
203
|
+
fill="currentColor"
|
|
204
|
+
aria-hidden="true"
|
|
205
|
+
role="img"
|
|
206
|
+
width="1em"
|
|
207
|
+
height="1em"
|
|
208
|
+
>
|
|
209
|
+
<path
|
|
210
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
211
|
+
/>
|
|
212
|
+
</svg>
|
|
165
213
|
</span>
|
|
166
214
|
</span></span>
|
|
167
215
|
</div>
|
|
@@ -473,7 +521,19 @@ cssPrefix: pf-v6-c-form
|
|
|
473
521
|
aria-describedby="form-additional-infoform-additional-info-name"
|
|
474
522
|
>
|
|
475
523
|
<span class="pf-v6-c-button__icon">
|
|
476
|
-
<
|
|
524
|
+
<svg
|
|
525
|
+
class="pf-v6-svg"
|
|
526
|
+
viewBox="0 0 1024 1024"
|
|
527
|
+
fill="currentColor"
|
|
528
|
+
aria-hidden="true"
|
|
529
|
+
role="img"
|
|
530
|
+
width="1em"
|
|
531
|
+
height="1em"
|
|
532
|
+
>
|
|
533
|
+
<path
|
|
534
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
535
|
+
/>
|
|
536
|
+
</svg>
|
|
477
537
|
</span>
|
|
478
538
|
</span></span>
|
|
479
539
|
</div>
|
|
@@ -514,7 +574,19 @@ cssPrefix: pf-v6-c-form
|
|
|
514
574
|
aria-describedby="form-additional-info-horizontalform-additional-info-horizontal-name"
|
|
515
575
|
>
|
|
516
576
|
<span class="pf-v6-c-button__icon">
|
|
517
|
-
<
|
|
577
|
+
<svg
|
|
578
|
+
class="pf-v6-svg"
|
|
579
|
+
viewBox="0 0 1024 1024"
|
|
580
|
+
fill="currentColor"
|
|
581
|
+
aria-hidden="true"
|
|
582
|
+
role="img"
|
|
583
|
+
width="1em"
|
|
584
|
+
height="1em"
|
|
585
|
+
>
|
|
586
|
+
<path
|
|
587
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
588
|
+
/>
|
|
589
|
+
</svg>
|
|
518
590
|
</span>
|
|
519
591
|
</span></span>
|
|
520
592
|
</div>
|
|
@@ -596,7 +668,19 @@ cssPrefix: pf-v6-c-form
|
|
|
596
668
|
aria-describedby="form-field-group-field-group-label1"
|
|
597
669
|
>
|
|
598
670
|
<span class="pf-v6-c-button__icon">
|
|
599
|
-
<
|
|
671
|
+
<svg
|
|
672
|
+
class="pf-v6-svg"
|
|
673
|
+
viewBox="0 0 1024 1024"
|
|
674
|
+
fill="currentColor"
|
|
675
|
+
aria-hidden="true"
|
|
676
|
+
role="img"
|
|
677
|
+
width="1em"
|
|
678
|
+
height="1em"
|
|
679
|
+
>
|
|
680
|
+
<path
|
|
681
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
682
|
+
/>
|
|
683
|
+
</svg>
|
|
600
684
|
</span>
|
|
601
685
|
</span></span>
|
|
602
686
|
</div>
|
|
@@ -626,7 +710,19 @@ cssPrefix: pf-v6-c-form
|
|
|
626
710
|
aria-describedby="form-field-group-field-group-label2"
|
|
627
711
|
>
|
|
628
712
|
<span class="pf-v6-c-button__icon">
|
|
629
|
-
<
|
|
713
|
+
<svg
|
|
714
|
+
class="pf-v6-svg"
|
|
715
|
+
viewBox="0 0 1024 1024"
|
|
716
|
+
fill="currentColor"
|
|
717
|
+
aria-hidden="true"
|
|
718
|
+
role="img"
|
|
719
|
+
width="1em"
|
|
720
|
+
height="1em"
|
|
721
|
+
>
|
|
722
|
+
<path
|
|
723
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
724
|
+
/>
|
|
725
|
+
</svg>
|
|
630
726
|
</span>
|
|
631
727
|
</span></span>
|
|
632
728
|
</div>
|
|
@@ -744,7 +840,19 @@ cssPrefix: pf-v6-c-form
|
|
|
744
840
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
745
841
|
>
|
|
746
842
|
<span class="pf-v6-c-button__icon">
|
|
747
|
-
<
|
|
843
|
+
<svg
|
|
844
|
+
class="pf-v6-svg"
|
|
845
|
+
viewBox="0 0 1024 1024"
|
|
846
|
+
fill="currentColor"
|
|
847
|
+
aria-hidden="true"
|
|
848
|
+
role="img"
|
|
849
|
+
width="1em"
|
|
850
|
+
height="1em"
|
|
851
|
+
>
|
|
852
|
+
<path
|
|
853
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
854
|
+
/>
|
|
855
|
+
</svg>
|
|
748
856
|
</span>
|
|
749
857
|
</span></span>
|
|
750
858
|
</div>
|
|
@@ -774,7 +882,19 @@ cssPrefix: pf-v6-c-form
|
|
|
774
882
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
775
883
|
>
|
|
776
884
|
<span class="pf-v6-c-button__icon">
|
|
777
|
-
<
|
|
885
|
+
<svg
|
|
886
|
+
class="pf-v6-svg"
|
|
887
|
+
viewBox="0 0 1024 1024"
|
|
888
|
+
fill="currentColor"
|
|
889
|
+
aria-hidden="true"
|
|
890
|
+
role="img"
|
|
891
|
+
width="1em"
|
|
892
|
+
height="1em"
|
|
893
|
+
>
|
|
894
|
+
<path
|
|
895
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
896
|
+
/>
|
|
897
|
+
</svg>
|
|
778
898
|
</span>
|
|
779
899
|
</span></span>
|
|
780
900
|
</div>
|
|
@@ -823,7 +943,19 @@ cssPrefix: pf-v6-c-form
|
|
|
823
943
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
824
944
|
>
|
|
825
945
|
<span class="pf-v6-c-button__icon">
|
|
826
|
-
<
|
|
946
|
+
<svg
|
|
947
|
+
class="pf-v6-svg"
|
|
948
|
+
viewBox="0 0 1024 1024"
|
|
949
|
+
fill="currentColor"
|
|
950
|
+
aria-hidden="true"
|
|
951
|
+
role="img"
|
|
952
|
+
width="1em"
|
|
953
|
+
height="1em"
|
|
954
|
+
>
|
|
955
|
+
<path
|
|
956
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
957
|
+
/>
|
|
958
|
+
</svg>
|
|
827
959
|
</span>
|
|
828
960
|
</span></span>
|
|
829
961
|
</div>
|
|
@@ -856,7 +988,19 @@ cssPrefix: pf-v6-c-form
|
|
|
856
988
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
857
989
|
>
|
|
858
990
|
<span class="pf-v6-c-button__icon">
|
|
859
|
-
<
|
|
991
|
+
<svg
|
|
992
|
+
class="pf-v6-svg"
|
|
993
|
+
viewBox="0 0 1024 1024"
|
|
994
|
+
fill="currentColor"
|
|
995
|
+
aria-hidden="true"
|
|
996
|
+
role="img"
|
|
997
|
+
width="1em"
|
|
998
|
+
height="1em"
|
|
999
|
+
>
|
|
1000
|
+
<path
|
|
1001
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
1002
|
+
/>
|
|
1003
|
+
</svg>
|
|
860
1004
|
</span>
|
|
861
1005
|
</span></span>
|
|
862
1006
|
</div>
|
|
@@ -558,7 +558,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
558
558
|
|
|
559
559
|
```html
|
|
560
560
|
<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
|
|
561
|
-
<span class="pf-v6-c-menu-toggle__icon
|
|
561
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
562
562
|
<img
|
|
563
563
|
class="pf-v6-c-avatar pf-m-sm"
|
|
564
564
|
alt="Avatar image"
|
|
@@ -579,7 +579,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
579
579
|
type="button"
|
|
580
580
|
aria-expanded="true"
|
|
581
581
|
>
|
|
582
|
-
<span class="pf-v6-c-menu-toggle__icon
|
|
582
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
583
583
|
<img
|
|
584
584
|
class="pf-v6-c-avatar pf-m-sm"
|
|
585
585
|
alt="Avatar image"
|
|
@@ -601,7 +601,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
601
601
|
aria-expanded="false"
|
|
602
602
|
disabled
|
|
603
603
|
>
|
|
604
|
-
<span class="pf-v6-c-menu-toggle__icon
|
|
604
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
605
605
|
<img
|
|
606
606
|
class="pf-v6-c-avatar pf-m-sm"
|
|
607
607
|
alt="Avatar image"
|
|
@@ -2157,4 +2157,3 @@ Shown with default, primary, and secondary styling
|
|
|
2157
2157
|
| `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
|
|
2158
2158
|
| `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
|
|
2159
2159
|
| `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |
|
|
2160
|
-
| `.pf-m-avatar` | `.pf-v6-c-menu-toggle__icon` | Modifies the menu toggle icon for avatar styles. |
|
|
@@ -68,7 +68,19 @@ cssPrefix: pf-v6-c-modal-box
|
|
|
68
68
|
<div class="pf-v6-c-modal-box__header-help">
|
|
69
69
|
<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Help">
|
|
70
70
|
<span class="pf-v6-c-button__icon">
|
|
71
|
-
<
|
|
71
|
+
<svg
|
|
72
|
+
class="pf-v6-svg"
|
|
73
|
+
viewBox="0 0 1024 1024"
|
|
74
|
+
fill="currentColor"
|
|
75
|
+
aria-hidden="true"
|
|
76
|
+
role="img"
|
|
77
|
+
width="1em"
|
|
78
|
+
height="1em"
|
|
79
|
+
>
|
|
80
|
+
<path
|
|
81
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
82
|
+
/>
|
|
83
|
+
</svg>
|
|
72
84
|
</span>
|
|
73
85
|
</button>
|
|
74
86
|
</div>
|
|
@@ -412,6 +412,7 @@ This component provides the basic chrome for a page, including sidebar and main
|
|
|
412
412
|
| `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
|
|
413
413
|
| `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
|
|
414
414
|
| `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
|
|
415
|
+
| `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
|
|
415
416
|
| `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
|
|
416
417
|
| `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
|
|
417
418
|
| `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
|
|
@@ -190,7 +190,19 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
190
190
|
aria-label="aria-label="More info""
|
|
191
191
|
>
|
|
192
192
|
<span class="pf-v6-c-button__icon">
|
|
193
|
-
<
|
|
193
|
+
<svg
|
|
194
|
+
class="pf-v6-svg"
|
|
195
|
+
viewBox="0 0 1024 1024"
|
|
196
|
+
fill="currentColor"
|
|
197
|
+
aria-hidden="true"
|
|
198
|
+
role="img"
|
|
199
|
+
width="1em"
|
|
200
|
+
height="1em"
|
|
201
|
+
>
|
|
202
|
+
<path
|
|
203
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
204
|
+
/>
|
|
205
|
+
</svg>
|
|
194
206
|
</span>
|
|
195
207
|
</button>
|
|
196
208
|
</span>
|
|
@@ -225,7 +237,19 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
225
237
|
aria-label="aria-label="More info""
|
|
226
238
|
>
|
|
227
239
|
<span class="pf-v6-c-button__icon">
|
|
228
|
-
<
|
|
240
|
+
<svg
|
|
241
|
+
class="pf-v6-svg"
|
|
242
|
+
viewBox="0 0 1024 1024"
|
|
243
|
+
fill="currentColor"
|
|
244
|
+
aria-hidden="true"
|
|
245
|
+
role="img"
|
|
246
|
+
width="1em"
|
|
247
|
+
height="1em"
|
|
248
|
+
>
|
|
249
|
+
<path
|
|
250
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
251
|
+
/>
|
|
252
|
+
</svg>
|
|
229
253
|
</span>
|
|
230
254
|
</button>
|
|
231
255
|
</span>
|
|
@@ -1150,7 +1174,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
|
|
|
1150
1174
|
class="pf-v6-c-button pf-m-plain"
|
|
1151
1175
|
id="table-expandable-expandable-toggle-thead"
|
|
1152
1176
|
type="button"
|
|
1153
|
-
aria-controls="table-expandable-content-
|
|
1177
|
+
aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4"
|
|
1154
1178
|
aria-labelledby="table-expandable-node-thead"
|
|
1155
1179
|
aria-label="Toggle all rows"
|
|
1156
1180
|
>
|
|
@@ -1620,7 +1644,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
|
|
|
1620
1644
|
id="expandable-set-width-columns-example-expandable-toggle-thead"
|
|
1621
1645
|
type="button"
|
|
1622
1646
|
aria-expanded="true"
|
|
1623
|
-
aria-controls="expandable-set-width-columns-example-content-
|
|
1647
|
+
aria-controls="expandable-set-width-columns-example-content-1 expandable-set-width-columns-example-content-2 expandable-set-width-columns-example-content-3 expandable-set-width-columns-example-content-4"
|
|
1624
1648
|
aria-labelledby="expandable-set-width-columns-example-node-thead"
|
|
1625
1649
|
aria-label="Toggle all rows"
|
|
1626
1650
|
aria-describedby="true"
|
|
@@ -2096,7 +2120,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
|
|
|
2096
2120
|
class="pf-v6-c-button pf-m-plain"
|
|
2097
2121
|
id="table-expandable-nested-table-expandable-toggle-thead"
|
|
2098
2122
|
type="button"
|
|
2099
|
-
aria-controls="table-expandable-nested-table-content-
|
|
2123
|
+
aria-controls="table-expandable-nested-table-content-1 table-expandable-nested-table-content-2 table-expandable-nested-table-content-3 table-expandable-nested-table-content-4"
|
|
2100
2124
|
aria-labelledby="table-expandable-nested-table-node-thead"
|
|
2101
2125
|
aria-label="Toggle all rows"
|
|
2102
2126
|
>
|
|
@@ -5285,7 +5309,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
|
|
|
5285
5309
|
class="pf-v6-c-button pf-m-small pf-m-plain"
|
|
5286
5310
|
id="table-compact-expandable-expandable-toggle-thead"
|
|
5287
5311
|
type="button"
|
|
5288
|
-
aria-controls="table-compact-expandable-content-
|
|
5312
|
+
aria-controls="table-compact-expandable-content-1 table-compact-expandable-content-2 table-compact-expandable-content-3 table-compact-expandable-content-4"
|
|
5289
5313
|
aria-labelledby="table-compact-expandable-node-thead"
|
|
5290
5314
|
aria-label="Toggle all rows"
|
|
5291
5315
|
>
|