@patternfly/patternfly 6.5.0-prerelease.45 → 6.5.0-prerelease.47
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/Accordion/accordion.css +1 -1
- package/components/Accordion/accordion.scss +1 -1
- package/components/Card/card.css +1 -1
- package/components/Card/card.scss +1 -1
- package/components/ClipboardCopy/clipboard-copy.css +1 -1
- package/components/ClipboardCopy/clipboard-copy.scss +1 -1
- package/components/DataList/data-list.css +1 -1
- package/components/DataList/data-list.scss +1 -1
- package/components/DualListSelector/dual-list-selector.css +1 -1
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/ExpandableSection/expandable-section.css +2 -2
- package/components/ExpandableSection/expandable-section.scss +2 -2
- package/components/Form/form.css +1 -1
- package/components/Form/form.scss +1 -1
- package/components/JumpLinks/jump-links.css +1 -1
- package/components/JumpLinks/jump-links.scss +1 -1
- package/components/Nav/nav.css +1 -1
- package/components/Nav/nav.scss +1 -1
- package/components/NotificationDrawer/notification-drawer.css +11 -3
- package/components/NotificationDrawer/notification-drawer.scss +12 -5
- package/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/components/Tabs/tabs.css +2 -2
- package/components/Tabs/tabs.scss +2 -2
- package/components/Toolbar/toolbar.css +1 -1
- package/components/Toolbar/toolbar.scss +1 -1
- package/components/TreeView/tree-view.css +1 -1
- package/components/TreeView/tree-view.scss +1 -1
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/components/_index.css +28 -20
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
- package/docs/components/Accordion/examples/Accordion.md +390 -30
- package/docs/components/ActionList/examples/ActionList.md +10 -10
- package/docs/components/Alert/examples/Alert.md +30 -30
- package/docs/components/Banner/examples/Banner.md +65 -5
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +16 -16
- package/docs/components/Card/examples/Card.md +52 -4
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +78 -6
- package/docs/components/CodeBlock/examples/CodeBlock.md +26 -2
- package/docs/components/DataList/examples/DataList.md +221 -17
- package/docs/components/Drawer/examples/Drawer.md +42 -42
- package/docs/components/DualListSelector/examples/DualListSelector.md +961 -85
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
- package/docs/components/Form/examples/Form.md +78 -6
- package/docs/components/Icon/examples/Icon.md +91 -7
- package/docs/components/InlineEdit/examples/InlineEdit.md +16 -16
- package/docs/components/JumpLinks/examples/JumpLinks.md +52 -4
- package/docs/components/Label/examples/Label.md +2812 -220
- package/docs/components/Menu/examples/Menu.md +1456 -112
- package/docs/components/MenuToggle/examples/MenuToggle.md +13 -1
- package/docs/components/ModalBox/examples/ModalBox.md +121 -37
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +57 -21
- package/docs/components/Nav/examples/Navigation.md +710 -62
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +576 -48
- package/docs/components/Popover/examples/Popover.md +110 -38
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +273 -21
- package/docs/components/Slider/examples/Slider.md +52 -4
- package/docs/components/Table/examples/Table.md +819 -63
- package/docs/components/Tabs/examples/Tabs.md +1959 -339
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +509 -41
- package/docs/components/Toolbar/examples/Toolbar.md +48 -48
- package/docs/components/TreeView/examples/TreeView.md +1300 -100
- package/docs/components/Wizard/examples/Wizard.md +349 -85
- package/docs/demos/AboutModal/examples/AboutModal.md +41 -5
- package/docs/demos/Alert/examples/Alert.md +123 -15
- package/docs/demos/BackToTop/examples/BackToTop.md +39 -3
- package/docs/demos/Banner/examples/Banner.md +78 -6
- package/docs/demos/Card/examples/Card.md +310 -34
- package/docs/demos/CardView/examples/CardView.md +78 -6
- package/docs/demos/Compass/examples/Compass.md +73 -37
- package/docs/demos/Dashboard/examples/Dashboard.md +128 -14
- package/docs/demos/DataList/examples/DataList.md +234 -18
- package/docs/demos/DescriptionList/examples/DescriptionList.md +119 -11
- package/docs/demos/Drawer/examples/Drawer.md +147 -21
- package/docs/demos/Form/examples/BasicForms.md +169 -13
- package/docs/demos/JumpLinks/examples/JumpLinks.md +220 -31
- package/docs/demos/Masthead/examples/Masthead.md +370 -34
- package/docs/demos/Modal/examples/Modal.md +246 -30
- package/docs/demos/Nav/examples/Nav.md +320 -32
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1063 -115
- package/docs/demos/Page/examples/Page.md +548 -44
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +371 -47
- package/docs/demos/Skeleton/examples/Skeleton.md +39 -3
- package/docs/demos/Table/examples/Table.md +934 -73
- package/docs/demos/Tabs/examples/Tabs.md +261 -27
- package/docs/demos/Toolbar/examples/Toolbar.md +102 -30
- package/docs/demos/Wizard/examples/Wizard.md +641 -92
- package/package.json +1 -1
- package/patternfly-no-globals.css +28 -20
- package/patternfly.css +28 -20
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -71,7 +71,7 @@ cssPrefix: pf-v6-c-action-list
|
|
|
71
71
|
<span class="pf-v6-c-button__icon">
|
|
72
72
|
<svg
|
|
73
73
|
class="pf-v6-svg"
|
|
74
|
-
viewBox="0 0
|
|
74
|
+
viewBox="0 0 20 20"
|
|
75
75
|
fill="currentColor"
|
|
76
76
|
aria-hidden="true"
|
|
77
77
|
role="img"
|
|
@@ -79,7 +79,7 @@ cssPrefix: pf-v6-c-action-list
|
|
|
79
79
|
height="1em"
|
|
80
80
|
>
|
|
81
81
|
<path
|
|
82
|
-
d="
|
|
82
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
83
83
|
/>
|
|
84
84
|
</svg>
|
|
85
85
|
</span>
|
|
@@ -117,7 +117,7 @@ cssPrefix: pf-v6-c-action-list
|
|
|
117
117
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
118
118
|
<svg
|
|
119
119
|
class="pf-v6-svg"
|
|
120
|
-
viewBox="0 0
|
|
120
|
+
viewBox="0 0 20 20"
|
|
121
121
|
fill="currentColor"
|
|
122
122
|
aria-hidden="true"
|
|
123
123
|
role="img"
|
|
@@ -125,7 +125,7 @@ cssPrefix: pf-v6-c-action-list
|
|
|
125
125
|
height="1em"
|
|
126
126
|
>
|
|
127
127
|
<path
|
|
128
|
-
d="
|
|
128
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
129
129
|
/>
|
|
130
130
|
</svg>
|
|
131
131
|
</span>
|
|
@@ -165,7 +165,7 @@ cssPrefix: pf-v6-c-action-list
|
|
|
165
165
|
<span class="pf-v6-c-button__icon">
|
|
166
166
|
<svg
|
|
167
167
|
class="pf-v6-svg"
|
|
168
|
-
viewBox="0 0
|
|
168
|
+
viewBox="0 0 20 20"
|
|
169
169
|
fill="currentColor"
|
|
170
170
|
aria-hidden="true"
|
|
171
171
|
role="img"
|
|
@@ -173,7 +173,7 @@ cssPrefix: pf-v6-c-action-list
|
|
|
173
173
|
height="1em"
|
|
174
174
|
>
|
|
175
175
|
<path
|
|
176
|
-
d="
|
|
176
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
177
177
|
/>
|
|
178
178
|
</svg>
|
|
179
179
|
</span>
|
|
@@ -322,7 +322,7 @@ Icons, in two groups
|
|
|
322
322
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
323
323
|
<svg
|
|
324
324
|
class="pf-v6-svg"
|
|
325
|
-
viewBox="0 0
|
|
325
|
+
viewBox="0 0 20 20"
|
|
326
326
|
fill="currentColor"
|
|
327
327
|
aria-hidden="true"
|
|
328
328
|
role="img"
|
|
@@ -330,7 +330,7 @@ Icons, in two groups
|
|
|
330
330
|
height="1em"
|
|
331
331
|
>
|
|
332
332
|
<path
|
|
333
|
-
d="
|
|
333
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
334
334
|
/>
|
|
335
335
|
</svg>
|
|
336
336
|
</span>
|
|
@@ -370,7 +370,7 @@ Icons, in two groups
|
|
|
370
370
|
<span class="pf-v6-c-button__icon">
|
|
371
371
|
<svg
|
|
372
372
|
class="pf-v6-svg"
|
|
373
|
-
viewBox="0 0
|
|
373
|
+
viewBox="0 0 20 20"
|
|
374
374
|
fill="currentColor"
|
|
375
375
|
aria-hidden="true"
|
|
376
376
|
role="img"
|
|
@@ -378,7 +378,7 @@ Icons, in two groups
|
|
|
378
378
|
height="1em"
|
|
379
379
|
>
|
|
380
380
|
<path
|
|
381
|
-
d="
|
|
381
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
382
382
|
/>
|
|
383
383
|
</svg>
|
|
384
384
|
</span>
|
|
@@ -79,7 +79,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
79
79
|
<span class="pf-v6-c-button__icon">
|
|
80
80
|
<svg
|
|
81
81
|
class="pf-v6-svg"
|
|
82
|
-
viewBox="0 0
|
|
82
|
+
viewBox="0 0 20 20"
|
|
83
83
|
fill="currentColor"
|
|
84
84
|
aria-hidden="true"
|
|
85
85
|
role="img"
|
|
@@ -87,7 +87,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
87
87
|
height="1em"
|
|
88
88
|
>
|
|
89
89
|
<path
|
|
90
|
-
d="
|
|
90
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
91
91
|
/>
|
|
92
92
|
</svg>
|
|
93
93
|
</span>
|
|
@@ -123,7 +123,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
123
123
|
<span class="pf-v6-c-button__icon">
|
|
124
124
|
<svg
|
|
125
125
|
class="pf-v6-svg"
|
|
126
|
-
viewBox="0 0
|
|
126
|
+
viewBox="0 0 20 20"
|
|
127
127
|
fill="currentColor"
|
|
128
128
|
aria-hidden="true"
|
|
129
129
|
role="img"
|
|
@@ -131,7 +131,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
131
131
|
height="1em"
|
|
132
132
|
>
|
|
133
133
|
<path
|
|
134
|
-
d="
|
|
134
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
135
135
|
/>
|
|
136
136
|
</svg>
|
|
137
137
|
</span>
|
|
@@ -162,7 +162,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
162
162
|
<span class="pf-v6-c-button__icon">
|
|
163
163
|
<svg
|
|
164
164
|
class="pf-v6-svg"
|
|
165
|
-
viewBox="0 0
|
|
165
|
+
viewBox="0 0 20 20"
|
|
166
166
|
fill="currentColor"
|
|
167
167
|
aria-hidden="true"
|
|
168
168
|
role="img"
|
|
@@ -170,7 +170,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
170
170
|
height="1em"
|
|
171
171
|
>
|
|
172
172
|
<path
|
|
173
|
-
d="
|
|
173
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
174
174
|
/>
|
|
175
175
|
</svg>
|
|
176
176
|
</span>
|
|
@@ -203,7 +203,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
203
203
|
<span class="pf-v6-c-button__icon">
|
|
204
204
|
<svg
|
|
205
205
|
class="pf-v6-svg"
|
|
206
|
-
viewBox="0 0
|
|
206
|
+
viewBox="0 0 20 20"
|
|
207
207
|
fill="currentColor"
|
|
208
208
|
aria-hidden="true"
|
|
209
209
|
role="img"
|
|
@@ -211,7 +211,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
211
211
|
height="1em"
|
|
212
212
|
>
|
|
213
213
|
<path
|
|
214
|
-
d="
|
|
214
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
215
215
|
/>
|
|
216
216
|
</svg>
|
|
217
217
|
</span>
|
|
@@ -356,7 +356,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
356
356
|
<span class="pf-v6-c-button__icon">
|
|
357
357
|
<svg
|
|
358
358
|
class="pf-v6-svg"
|
|
359
|
-
viewBox="0 0
|
|
359
|
+
viewBox="0 0 20 20"
|
|
360
360
|
fill="currentColor"
|
|
361
361
|
aria-hidden="true"
|
|
362
362
|
role="img"
|
|
@@ -364,7 +364,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
364
364
|
height="1em"
|
|
365
365
|
>
|
|
366
366
|
<path
|
|
367
|
-
d="
|
|
367
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
368
368
|
/>
|
|
369
369
|
</svg>
|
|
370
370
|
</span>
|
|
@@ -400,7 +400,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
400
400
|
<span class="pf-v6-c-button__icon">
|
|
401
401
|
<svg
|
|
402
402
|
class="pf-v6-svg"
|
|
403
|
-
viewBox="0 0
|
|
403
|
+
viewBox="0 0 20 20"
|
|
404
404
|
fill="currentColor"
|
|
405
405
|
aria-hidden="true"
|
|
406
406
|
role="img"
|
|
@@ -408,7 +408,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
408
408
|
height="1em"
|
|
409
409
|
>
|
|
410
410
|
<path
|
|
411
|
-
d="
|
|
411
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
412
412
|
/>
|
|
413
413
|
</svg>
|
|
414
414
|
</span>
|
|
@@ -439,7 +439,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
439
439
|
<span class="pf-v6-c-button__icon">
|
|
440
440
|
<svg
|
|
441
441
|
class="pf-v6-svg"
|
|
442
|
-
viewBox="0 0
|
|
442
|
+
viewBox="0 0 20 20"
|
|
443
443
|
fill="currentColor"
|
|
444
444
|
aria-hidden="true"
|
|
445
445
|
role="img"
|
|
@@ -447,7 +447,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
447
447
|
height="1em"
|
|
448
448
|
>
|
|
449
449
|
<path
|
|
450
|
-
d="
|
|
450
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
451
451
|
/>
|
|
452
452
|
</svg>
|
|
453
453
|
</span>
|
|
@@ -557,7 +557,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
557
557
|
<span class="pf-v6-c-button__icon">
|
|
558
558
|
<svg
|
|
559
559
|
class="pf-v6-svg"
|
|
560
|
-
viewBox="0 0
|
|
560
|
+
viewBox="0 0 20 20"
|
|
561
561
|
fill="currentColor"
|
|
562
562
|
aria-hidden="true"
|
|
563
563
|
role="img"
|
|
@@ -565,7 +565,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
565
565
|
height="1em"
|
|
566
566
|
>
|
|
567
567
|
<path
|
|
568
|
-
d="
|
|
568
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
569
569
|
/>
|
|
570
570
|
</svg>
|
|
571
571
|
</span>
|
|
@@ -620,7 +620,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
620
620
|
<span class="pf-v6-c-button__icon">
|
|
621
621
|
<svg
|
|
622
622
|
class="pf-v6-svg"
|
|
623
|
-
viewBox="0 0
|
|
623
|
+
viewBox="0 0 20 20"
|
|
624
624
|
fill="currentColor"
|
|
625
625
|
aria-hidden="true"
|
|
626
626
|
role="img"
|
|
@@ -628,7 +628,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
628
628
|
height="1em"
|
|
629
629
|
>
|
|
630
630
|
<path
|
|
631
|
-
d="
|
|
631
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
632
632
|
/>
|
|
633
633
|
</svg>
|
|
634
634
|
</span>
|
|
@@ -683,7 +683,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
683
683
|
<span class="pf-v6-c-button__icon">
|
|
684
684
|
<svg
|
|
685
685
|
class="pf-v6-svg"
|
|
686
|
-
viewBox="0 0
|
|
686
|
+
viewBox="0 0 20 20"
|
|
687
687
|
fill="currentColor"
|
|
688
688
|
aria-hidden="true"
|
|
689
689
|
role="img"
|
|
@@ -691,7 +691,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
691
691
|
height="1em"
|
|
692
692
|
>
|
|
693
693
|
<path
|
|
694
|
-
d="
|
|
694
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
695
695
|
/>
|
|
696
696
|
</svg>
|
|
697
697
|
</span>
|
|
@@ -746,7 +746,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
746
746
|
<span class="pf-v6-c-button__icon">
|
|
747
747
|
<svg
|
|
748
748
|
class="pf-v6-svg"
|
|
749
|
-
viewBox="0 0
|
|
749
|
+
viewBox="0 0 20 20"
|
|
750
750
|
fill="currentColor"
|
|
751
751
|
aria-hidden="true"
|
|
752
752
|
role="img"
|
|
@@ -754,7 +754,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
754
754
|
height="1em"
|
|
755
755
|
>
|
|
756
756
|
<path
|
|
757
|
-
d="
|
|
757
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
758
758
|
/>
|
|
759
759
|
</svg>
|
|
760
760
|
</span>
|
|
@@ -876,7 +876,7 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
876
876
|
<span class="pf-v6-c-button__icon">
|
|
877
877
|
<svg
|
|
878
878
|
class="pf-v6-svg"
|
|
879
|
-
viewBox="0 0
|
|
879
|
+
viewBox="0 0 20 20"
|
|
880
880
|
fill="currentColor"
|
|
881
881
|
aria-hidden="true"
|
|
882
882
|
role="img"
|
|
@@ -884,7 +884,7 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
884
884
|
height="1em"
|
|
885
885
|
>
|
|
886
886
|
<path
|
|
887
|
-
d="
|
|
887
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
888
888
|
/>
|
|
889
889
|
</svg>
|
|
890
890
|
</span>
|
|
@@ -906,12 +906,12 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
906
906
|
<button
|
|
907
907
|
class="pf-v6-c-button pf-m-plain"
|
|
908
908
|
type="button"
|
|
909
|
-
aria-label="Close
|
|
909
|
+
aria-label="Close danger alert: Danger alert title"
|
|
910
910
|
>
|
|
911
911
|
<span class="pf-v6-c-button__icon">
|
|
912
912
|
<svg
|
|
913
913
|
class="pf-v6-svg"
|
|
914
|
-
viewBox="0 0
|
|
914
|
+
viewBox="0 0 20 20"
|
|
915
915
|
fill="currentColor"
|
|
916
916
|
aria-hidden="true"
|
|
917
917
|
role="img"
|
|
@@ -919,7 +919,7 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
919
919
|
height="1em"
|
|
920
920
|
>
|
|
921
921
|
<path
|
|
922
|
-
d="
|
|
922
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
923
923
|
/>
|
|
924
924
|
</svg>
|
|
925
925
|
</span>
|
|
@@ -947,12 +947,12 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
947
947
|
<button
|
|
948
948
|
class="pf-v6-c-button pf-m-plain"
|
|
949
949
|
type="button"
|
|
950
|
-
aria-label="Close
|
|
950
|
+
aria-label="Close info alert: Info alert title"
|
|
951
951
|
>
|
|
952
952
|
<span class="pf-v6-c-button__icon">
|
|
953
953
|
<svg
|
|
954
954
|
class="pf-v6-svg"
|
|
955
|
-
viewBox="0 0
|
|
955
|
+
viewBox="0 0 20 20"
|
|
956
956
|
fill="currentColor"
|
|
957
957
|
aria-hidden="true"
|
|
958
958
|
role="img"
|
|
@@ -960,7 +960,7 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
960
960
|
height="1em"
|
|
961
961
|
>
|
|
962
962
|
<path
|
|
963
|
-
d="
|
|
963
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
964
964
|
/>
|
|
965
965
|
</svg>
|
|
966
966
|
</span>
|
|
@@ -107,7 +107,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
|
|
|
107
107
|
<div class="pf-v6-l-flex__item">
|
|
108
108
|
<span class="pf-v6-screen-reader">Success banner:</span>
|
|
109
109
|
|
|
110
|
-
<
|
|
110
|
+
<svg
|
|
111
|
+
class="pf-v6-svg"
|
|
112
|
+
viewBox="0 0 32 32"
|
|
113
|
+
fill="currentColor"
|
|
114
|
+
aria-hidden="true"
|
|
115
|
+
role="img"
|
|
116
|
+
width="1em"
|
|
117
|
+
height="1em"
|
|
118
|
+
>
|
|
119
|
+
<path
|
|
120
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
121
|
+
/>
|
|
122
|
+
</svg>
|
|
111
123
|
</div>
|
|
112
124
|
<div class="pf-v6-l-flex__item">Success banner</div>
|
|
113
125
|
</div>
|
|
@@ -120,7 +132,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
|
|
|
120
132
|
<div class="pf-v6-l-flex__item">
|
|
121
133
|
<span class="pf-v6-screen-reader">Warning banner:</span>
|
|
122
134
|
|
|
123
|
-
<
|
|
135
|
+
<svg
|
|
136
|
+
class="pf-v6-svg"
|
|
137
|
+
viewBox="0 0 32 32"
|
|
138
|
+
fill="currentColor"
|
|
139
|
+
aria-hidden="true"
|
|
140
|
+
role="img"
|
|
141
|
+
width="1em"
|
|
142
|
+
height="1em"
|
|
143
|
+
>
|
|
144
|
+
<path
|
|
145
|
+
d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
|
|
146
|
+
/>
|
|
147
|
+
</svg>
|
|
124
148
|
</div>
|
|
125
149
|
<div class="pf-v6-l-flex__item">Warning banner</div>
|
|
126
150
|
</div>
|
|
@@ -133,7 +157,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
|
|
|
133
157
|
<div class="pf-v6-l-flex__item">
|
|
134
158
|
<span class="pf-v6-screen-reader">Danger banner:</span>
|
|
135
159
|
|
|
136
|
-
<
|
|
160
|
+
<svg
|
|
161
|
+
class="pf-v6-svg"
|
|
162
|
+
viewBox="0 0 32 32"
|
|
163
|
+
fill="currentColor"
|
|
164
|
+
aria-hidden="true"
|
|
165
|
+
role="img"
|
|
166
|
+
width="1em"
|
|
167
|
+
height="1em"
|
|
168
|
+
>
|
|
169
|
+
<path
|
|
170
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
|
|
171
|
+
/>
|
|
172
|
+
</svg>
|
|
137
173
|
</div>
|
|
138
174
|
<div class="pf-v6-l-flex__item">Danger banner</div>
|
|
139
175
|
</div>
|
|
@@ -146,7 +182,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
|
|
|
146
182
|
<div class="pf-v6-l-flex__item">
|
|
147
183
|
<span class="pf-v6-screen-reader">Custom status banner:</span>
|
|
148
184
|
|
|
149
|
-
<
|
|
185
|
+
<svg
|
|
186
|
+
class="pf-v6-svg"
|
|
187
|
+
viewBox="0 0 32 32"
|
|
188
|
+
fill="currentColor"
|
|
189
|
+
aria-hidden="true"
|
|
190
|
+
role="img"
|
|
191
|
+
width="1em"
|
|
192
|
+
height="1em"
|
|
193
|
+
>
|
|
194
|
+
<path
|
|
195
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
|
|
196
|
+
/>
|
|
197
|
+
</svg>
|
|
150
198
|
</div>
|
|
151
199
|
<div class="pf-v6-l-flex__item">Info banner</div>
|
|
152
200
|
</div>
|
|
@@ -159,7 +207,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
|
|
|
159
207
|
<div class="pf-v6-l-flex__item">
|
|
160
208
|
<span class="pf-v6-screen-reader">Custom status banner:</span>
|
|
161
209
|
|
|
162
|
-
<
|
|
210
|
+
<svg
|
|
211
|
+
class="pf-v6-svg"
|
|
212
|
+
viewBox="0 0 32 32"
|
|
213
|
+
fill="currentColor"
|
|
214
|
+
aria-hidden="true"
|
|
215
|
+
role="img"
|
|
216
|
+
width="1em"
|
|
217
|
+
height="1em"
|
|
218
|
+
>
|
|
219
|
+
<path
|
|
220
|
+
d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
|
|
221
|
+
/>
|
|
222
|
+
</svg>
|
|
163
223
|
</div>
|
|
164
224
|
<div class="pf-v6-l-flex__item">Custom banner</div>
|
|
165
225
|
</div>
|