@patternfly/patternfly 4.175.0 → 4.176.3
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/AlertGroup/alert-group.css +36 -0
- package/components/AlertGroup/alert-group.scss +41 -0
- package/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/components/Label/label.css +43 -12
- package/components/Label/label.scss +45 -13
- package/components/Nav/nav.css +11 -0
- package/components/Nav/nav.scss +14 -0
- package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
- package/docs/components/Label/examples/Label.md +33 -67
- package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
- package/docs/components/LogViewer/examples/LogViewer.md +9 -9
- package/docs/components/Menu/examples/Menu.md +43 -42
- package/docs/components/Nav/examples/Navigation.md +23 -44
- package/docs/demos/Alert/examples/Alert.md +52 -359
- package/docs/demos/BackToTop/examples/BackToTop.md +5 -505
- package/docs/demos/Card/examples/Card.md +42 -36
- package/docs/demos/ContextSelector/examples/ContextSelector.md +46 -1051
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -1225
- package/docs/demos/Masthead/examples/Masthead.md +14 -6
- package/docs/demos/Nav/examples/Nav.md +9 -301
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +162 -3084
- package/docs/demos/Table/examples/Table.md +183 -18031
- package/docs/demos/Tabs/examples/Tabs.md +686 -7389
- package/docs/demos/Toolbar/examples/Toolbar.md +44 -1027
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +100 -21
- package/patternfly.css +100 -21
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -5,371 +5,64 @@ section: components
|
|
|
5
5
|
|
|
6
6
|
### Toast
|
|
7
7
|
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<button
|
|
18
|
-
class="pf-c-button pf-m-plain"
|
|
19
|
-
type="button"
|
|
20
|
-
id="alert-toast-example-nav-toggle"
|
|
21
|
-
aria-label="Global navigation"
|
|
22
|
-
aria-expanded="true"
|
|
23
|
-
aria-controls="alert-toast-example-primary-nav"
|
|
24
|
-
>
|
|
25
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
26
|
-
</button>
|
|
27
|
-
</div>
|
|
28
|
-
<a href="#" class="pf-c-page__header-brand-link">
|
|
29
|
-
<img
|
|
30
|
-
class="pf-c-brand"
|
|
31
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
32
|
-
alt="PatternFly logo"
|
|
33
|
-
/>
|
|
34
|
-
</a>
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
<div class="pf-c-page__header-tools">
|
|
38
|
-
<div class="pf-c-page__header-tools-group">
|
|
39
|
-
<div
|
|
40
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
41
|
-
>
|
|
42
|
-
<button
|
|
43
|
-
class="pf-c-button pf-m-plain"
|
|
44
|
-
type="button"
|
|
45
|
-
aria-label="Settings"
|
|
46
|
-
>
|
|
47
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
48
|
-
</button>
|
|
49
|
-
</div>
|
|
50
|
-
<div
|
|
51
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
52
|
-
>
|
|
53
|
-
<button
|
|
54
|
-
class="pf-c-button pf-m-plain"
|
|
55
|
-
type="button"
|
|
56
|
-
aria-label="Help"
|
|
57
|
-
>
|
|
58
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
59
|
-
</button>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
<div class="pf-c-page__header-tools-group">
|
|
63
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
64
|
-
<div class="pf-c-dropdown">
|
|
65
|
-
<button
|
|
66
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
67
|
-
id="alert-toast-example-dropdown-kebab-1-button"
|
|
68
|
-
aria-expanded="false"
|
|
69
|
-
type="button"
|
|
70
|
-
aria-label="Actions"
|
|
71
|
-
>
|
|
72
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
73
|
-
</button>
|
|
74
|
-
<ul
|
|
75
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
76
|
-
aria-labelledby="alert-toast-example-dropdown-kebab-1-button"
|
|
77
|
-
hidden
|
|
78
|
-
>
|
|
79
|
-
<li>
|
|
80
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
81
|
-
</li>
|
|
82
|
-
<li>
|
|
83
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
84
|
-
</li>
|
|
85
|
-
<li>
|
|
86
|
-
<a
|
|
87
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
88
|
-
href="#"
|
|
89
|
-
aria-disabled="true"
|
|
90
|
-
tabindex="-1"
|
|
91
|
-
>Disabled link</a>
|
|
92
|
-
</li>
|
|
93
|
-
<li>
|
|
94
|
-
<button
|
|
95
|
-
class="pf-c-dropdown__menu-item"
|
|
96
|
-
type="button"
|
|
97
|
-
disabled
|
|
98
|
-
>Disabled action</button>
|
|
99
|
-
</li>
|
|
100
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
101
|
-
<li>
|
|
102
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
103
|
-
</li>
|
|
104
|
-
</ul>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
<div
|
|
108
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
109
|
-
>
|
|
110
|
-
<div class="pf-c-dropdown">
|
|
111
|
-
<button
|
|
112
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
113
|
-
id="alert-toast-example-dropdown-kebab-2-button"
|
|
114
|
-
aria-expanded="false"
|
|
115
|
-
type="button"
|
|
116
|
-
>
|
|
117
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
118
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
119
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
120
|
-
</span>
|
|
121
|
-
</button>
|
|
122
|
-
<ul
|
|
123
|
-
class="pf-c-dropdown__menu"
|
|
124
|
-
aria-labelledby="alert-toast-example-dropdown-kebab-2-button"
|
|
125
|
-
hidden
|
|
126
|
-
>
|
|
127
|
-
<li>
|
|
128
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
129
|
-
</li>
|
|
130
|
-
<li>
|
|
131
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
132
|
-
</li>
|
|
133
|
-
<li>
|
|
134
|
-
<a
|
|
135
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
136
|
-
href="#"
|
|
137
|
-
aria-disabled="true"
|
|
138
|
-
tabindex="-1"
|
|
139
|
-
>Disabled link</a>
|
|
140
|
-
</li>
|
|
141
|
-
<li>
|
|
142
|
-
<button
|
|
143
|
-
class="pf-c-dropdown__menu-item"
|
|
144
|
-
type="button"
|
|
145
|
-
disabled
|
|
146
|
-
>Disabled action</button>
|
|
147
|
-
</li>
|
|
148
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
149
|
-
<li>
|
|
150
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
151
|
-
</li>
|
|
152
|
-
</ul>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
<img
|
|
157
|
-
class="pf-c-avatar"
|
|
158
|
-
src="/assets/images/img_avatar.svg"
|
|
159
|
-
alt="Avatar image"
|
|
160
|
-
/>
|
|
161
|
-
</div>
|
|
162
|
-
</header>
|
|
163
|
-
<div class="pf-c-page__sidebar">
|
|
164
|
-
<div class="pf-c-page__sidebar-body">
|
|
165
|
-
<nav
|
|
166
|
-
class="pf-c-nav"
|
|
167
|
-
id="alert-toast-example-primary-nav"
|
|
168
|
-
aria-label="Global"
|
|
169
|
-
>
|
|
170
|
-
<ul class="pf-c-nav__list">
|
|
171
|
-
<li class="pf-c-nav__item">
|
|
172
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
173
|
-
</li>
|
|
174
|
-
<li class="pf-c-nav__item">
|
|
175
|
-
<a
|
|
176
|
-
href="#"
|
|
177
|
-
class="pf-c-nav__link pf-m-current"
|
|
178
|
-
aria-current="page"
|
|
179
|
-
>Policy</a>
|
|
180
|
-
</li>
|
|
181
|
-
<li class="pf-c-nav__item">
|
|
182
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
183
|
-
</li>
|
|
184
|
-
<li class="pf-c-nav__item">
|
|
185
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
186
|
-
</li>
|
|
187
|
-
<li class="pf-c-nav__item">
|
|
188
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
189
|
-
</li>
|
|
190
|
-
</ul>
|
|
191
|
-
</nav>
|
|
192
|
-
</div>
|
|
193
|
-
</div>
|
|
194
|
-
<main
|
|
195
|
-
class="pf-c-page__main"
|
|
196
|
-
tabindex="-1"
|
|
197
|
-
id="main-content-alert-toast-example"
|
|
198
|
-
>
|
|
199
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
200
|
-
<div class="pf-c-page__main-body">
|
|
201
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
202
|
-
<ol class="pf-c-breadcrumb__list">
|
|
203
|
-
<li class="pf-c-breadcrumb__item">
|
|
204
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
205
|
-
</li>
|
|
206
|
-
<li class="pf-c-breadcrumb__item">
|
|
207
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
208
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
209
|
-
</span>
|
|
210
|
-
|
|
211
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
212
|
-
</li>
|
|
213
|
-
<li class="pf-c-breadcrumb__item">
|
|
214
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
215
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
216
|
-
</span>
|
|
217
|
-
|
|
218
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
219
|
-
</li>
|
|
220
|
-
<li class="pf-c-breadcrumb__item">
|
|
221
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
222
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
223
|
-
</span>
|
|
224
|
-
|
|
225
|
-
<a
|
|
226
|
-
href="#"
|
|
227
|
-
class="pf-c-breadcrumb__link pf-m-current"
|
|
228
|
-
aria-current="page"
|
|
229
|
-
>Section landing</a>
|
|
230
|
-
</li>
|
|
231
|
-
</ol>
|
|
232
|
-
</nav>
|
|
233
|
-
</div>
|
|
234
|
-
</section>
|
|
235
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
236
|
-
<div class="pf-c-page__main-body">
|
|
237
|
-
<div class="pf-c-content">
|
|
238
|
-
<h1>Main title</h1>
|
|
239
|
-
<p>This is a demo of the page component.</p>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
</section>
|
|
243
|
-
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
244
|
-
<div class="pf-c-page__main-body">
|
|
245
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
246
|
-
<div class="pf-l-gallery__item">
|
|
247
|
-
<div class="pf-c-card">
|
|
248
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
249
|
-
</div>
|
|
250
|
-
</div>
|
|
251
|
-
<div class="pf-l-gallery__item">
|
|
252
|
-
<div class="pf-c-card">
|
|
253
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
<div class="pf-l-gallery__item">
|
|
257
|
-
<div class="pf-c-card">
|
|
258
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
259
|
-
</div>
|
|
260
|
-
</div>
|
|
261
|
-
<div class="pf-l-gallery__item">
|
|
262
|
-
<div class="pf-c-card">
|
|
263
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
264
|
-
</div>
|
|
265
|
-
</div>
|
|
266
|
-
<div class="pf-l-gallery__item">
|
|
267
|
-
<div class="pf-c-card">
|
|
268
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
<div class="pf-l-gallery__item">
|
|
272
|
-
<div class="pf-c-card">
|
|
273
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
274
|
-
</div>
|
|
275
|
-
</div>
|
|
276
|
-
<div class="pf-l-gallery__item">
|
|
277
|
-
<div class="pf-c-card">
|
|
278
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
279
|
-
</div>
|
|
280
|
-
</div>
|
|
281
|
-
<div class="pf-l-gallery__item">
|
|
282
|
-
<div class="pf-c-card">
|
|
283
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
284
|
-
</div>
|
|
285
|
-
</div>
|
|
286
|
-
<div class="pf-l-gallery__item">
|
|
287
|
-
<div class="pf-c-card">
|
|
288
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
289
|
-
</div>
|
|
290
|
-
</div>
|
|
291
|
-
<div class="pf-l-gallery__item">
|
|
292
|
-
<div class="pf-c-card">
|
|
293
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
294
|
-
</div>
|
|
295
|
-
</div>
|
|
296
|
-
</div>
|
|
297
|
-
</div>
|
|
298
|
-
</section>
|
|
299
|
-
</main>
|
|
300
|
-
</div>
|
|
301
|
-
<ul class="pf-c-alert-group pf-m-toast">
|
|
302
|
-
<li class="pf-c-alert-group__item">
|
|
303
|
-
<div class="pf-c-alert pf-m-success" aria-label="Success alert">
|
|
304
|
-
<div class="pf-c-alert__icon">
|
|
305
|
-
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
306
|
-
</div>
|
|
307
|
-
<p class="pf-c-alert__title">
|
|
308
|
-
<span class="pf-screen-reader">Success alert:</span>
|
|
8
|
+
```hbs isFullscreen
|
|
9
|
+
{{> page-demo-default page-demo-default--id="alert-toast-example"}}
|
|
10
|
+
{{#> alert-group alert-group--modifier="pf-m-toast"}}
|
|
11
|
+
{{#> alert-item}}
|
|
12
|
+
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
|
|
13
|
+
{{#> alert-icon alert-icon--type="check-circle"}}
|
|
14
|
+
{{/alert-icon}}
|
|
15
|
+
{{#> alert-title}}
|
|
16
|
+
{{#> screen-reader}}Success alert:{{/screen-reader}}
|
|
309
17
|
Newest notification
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
class="pf-c-button pf-m-plain"
|
|
314
|
-
type="button"
|
|
315
|
-
aria-label="Close success alert: Newest notification"
|
|
316
|
-
>
|
|
18
|
+
{{/alert-title}}
|
|
19
|
+
{{#> alert-action}}
|
|
20
|
+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Newest notification"'}}
|
|
317
21
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
<span class="pf-screen-reader">Info alert:</span>
|
|
22
|
+
{{/button}}
|
|
23
|
+
{{/alert-action}}
|
|
24
|
+
{{#> alert-description}}
|
|
25
|
+
This is a description of the notification content.
|
|
26
|
+
{{/alert-description}}
|
|
27
|
+
{{/alert}}
|
|
28
|
+
{{/alert-item}}
|
|
29
|
+
{{#> alert-item}}
|
|
30
|
+
{{#> alert alert--modifier="pf-m-warning" alert--attribute='aria-label="Warning alert"'}}
|
|
31
|
+
{{#> alert-icon alert-icon--type="exclamation-triangle"}}
|
|
32
|
+
{{/alert-icon}}
|
|
33
|
+
{{#> alert-title}}
|
|
34
|
+
{{#> screen-reader}}Info alert:{{/screen-reader}}
|
|
332
35
|
Second newest notification
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
class="pf-c-button pf-m-plain"
|
|
337
|
-
type="button"
|
|
338
|
-
aria-label="Close warning alert: second newest notification"
|
|
339
|
-
>
|
|
36
|
+
{{/alert-title}}
|
|
37
|
+
{{#> alert-action}}
|
|
38
|
+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close warning alert: second newest notification"'}}
|
|
340
39
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
<span class="pf-screen-reader">Last notification</span>
|
|
40
|
+
{{/button}}
|
|
41
|
+
{{/alert-action}}
|
|
42
|
+
{{#> alert-description}}
|
|
43
|
+
This is a description of the notification content.
|
|
44
|
+
{{/alert-description}}
|
|
45
|
+
{{/alert}}
|
|
46
|
+
{{/alert-item}}
|
|
47
|
+
{{#> alert-item}}
|
|
48
|
+
{{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger alert"'}}
|
|
49
|
+
{{#> alert-icon alert-icon--type="exclamation-circle"}}
|
|
50
|
+
{{/alert-icon}}
|
|
51
|
+
{{#> alert-title}}
|
|
52
|
+
{{#> screen-reader}}Last notification{{/screen-reader}}
|
|
355
53
|
Last notification
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
class="pf-c-button pf-m-plain"
|
|
360
|
-
type="button"
|
|
361
|
-
aria-label="Close danger alert: Last notification"
|
|
362
|
-
>
|
|
54
|
+
{{/alert-title}}
|
|
55
|
+
{{#> alert-action}}
|
|
56
|
+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close danger alert: Last notification"'}}
|
|
363
57
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
58
|
+
{{/button}}
|
|
59
|
+
{{/alert-action}}
|
|
60
|
+
{{#> alert-description}}
|
|
61
|
+
This is a description of the notification content.
|
|
62
|
+
{{/alert-description}}
|
|
63
|
+
{{/alert}}
|
|
64
|
+
{{/alert-item}}
|
|
65
|
+
{{/alert-group}}
|
|
373
66
|
```
|
|
374
67
|
|
|
375
68
|
### Inline Alert in Horizontal Form
|