@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.
Files changed (33) hide show
  1. package/components/AlertGroup/alert-group.css +36 -0
  2. package/components/AlertGroup/alert-group.scss +41 -0
  3. package/components/Dropdown/dropdown.css +10 -9
  4. package/components/Dropdown/dropdown.scss +17 -16
  5. package/components/Label/label.css +43 -12
  6. package/components/Label/label.scss +45 -13
  7. package/components/Nav/nav.css +11 -0
  8. package/components/Nav/nav.scss +14 -0
  9. package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
  10. package/docs/components/Label/examples/Label.md +33 -67
  11. package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
  12. package/docs/components/LogViewer/examples/LogViewer.md +9 -9
  13. package/docs/components/Menu/examples/Menu.md +43 -42
  14. package/docs/components/Nav/examples/Navigation.md +23 -44
  15. package/docs/demos/Alert/examples/Alert.md +52 -359
  16. package/docs/demos/BackToTop/examples/BackToTop.md +5 -505
  17. package/docs/demos/Card/examples/Card.md +42 -36
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +46 -1051
  19. package/docs/demos/Drawer/examples/Drawer.md +3 -3
  20. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -1225
  21. package/docs/demos/Masthead/examples/Masthead.md +14 -6
  22. package/docs/demos/Nav/examples/Nav.md +9 -301
  23. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  24. package/docs/demos/Page/examples/Page.md +162 -3084
  25. package/docs/demos/Table/examples/Table.md +183 -18031
  26. package/docs/demos/Tabs/examples/Tabs.md +686 -7389
  27. package/docs/demos/Toolbar/examples/Toolbar.md +44 -1027
  28. package/docs/demos/Wizard/examples/Wizard.md +2 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +100 -21
  31. package/patternfly.css +100 -21
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
@@ -1214,7 +1214,9 @@ wrapperTag: div
1214
1214
  <div class="pf-c-menu">
1215
1215
  <div class="pf-c-menu__content">
1216
1216
  <ul class="pf-c-menu__list">
1217
- <li class="pf-c-menu__list-item">
1217
+ <li
1218
+ class="pf-c-menu__list-item pf-m-drill-up"
1219
+ >
1218
1220
  <button
1219
1221
  class="pf-c-menu__item"
1220
1222
  type="button"
@@ -1281,7 +1283,9 @@ wrapperTag: div
1281
1283
  <div class="pf-c-menu">
1282
1284
  <div class="pf-c-menu__content">
1283
1285
  <ul class="pf-c-menu__list">
1284
- <li class="pf-c-menu__list-item">
1286
+ <li
1287
+ class="pf-c-menu__list-item pf-m-drill-up"
1288
+ >
1285
1289
  <button
1286
1290
  class="pf-c-menu__item"
1287
1291
  type="button"
@@ -1651,7 +1655,7 @@ wrapperTag: div
1651
1655
  <div class="pf-c-page__main-body">
1652
1656
  <div class="pf-c-content">
1653
1657
  <h1>Main title</h1>
1654
- <p>This is a demo of the page component.</p>
1658
+ <p>This is a full page demo.</p>
1655
1659
  </div>
1656
1660
  </div>
1657
1661
  </section>
@@ -2110,7 +2114,9 @@ wrapperTag: div
2110
2114
  <div class="pf-c-menu">
2111
2115
  <div class="pf-c-menu__content">
2112
2116
  <ul class="pf-c-menu__list">
2113
- <li class="pf-c-menu__list-item">
2117
+ <li
2118
+ class="pf-c-menu__list-item pf-m-drill-up"
2119
+ >
2114
2120
  <button
2115
2121
  class="pf-c-menu__item"
2116
2122
  type="button"
@@ -2177,7 +2183,9 @@ wrapperTag: div
2177
2183
  <div class="pf-c-menu">
2178
2184
  <div class="pf-c-menu__content">
2179
2185
  <ul class="pf-c-menu__list">
2180
- <li class="pf-c-menu__list-item">
2186
+ <li
2187
+ class="pf-c-menu__list-item pf-m-drill-up"
2188
+ >
2181
2189
  <button
2182
2190
  class="pf-c-menu__item"
2183
2191
  type="button"
@@ -2512,7 +2520,7 @@ wrapperTag: div
2512
2520
  <div class="pf-c-page__main-body">
2513
2521
  <div class="pf-c-content">
2514
2522
  <h1>Main title</h1>
2515
- <p>This is a demo of the page component.</p>
2523
+ <p>This is a full page demo.</p>
2516
2524
  </div>
2517
2525
  </div>
2518
2526
  </section>
@@ -5,300 +5,8 @@ section: components
5
5
 
6
6
  ### Default nav
7
7
 
8
- ```html isFullscreen
9
- <div class="pf-c-page" id="page-default-nav-example">
10
- <a
11
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
- href="#main-content-page-default-nav-example"
13
- >Skip to content</a>
14
- <header class="pf-c-page__header">
15
- <div class="pf-c-page__header-brand">
16
- <div class="pf-c-page__header-brand-toggle">
17
- <button
18
- class="pf-c-button pf-m-plain"
19
- type="button"
20
- id="page-default-nav-example-nav-toggle"
21
- aria-label="Global navigation"
22
- aria-expanded="true"
23
- aria-controls="page-default-nav-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="page-default-nav-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="page-default-nav-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="page-default-nav-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="page-default-nav-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="page-default-nav-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-page-default-nav-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
-
8
+ ```hbs isFullscreen
9
+ {{> page-demo-default page-demo-default--id="page-default-nav-example"}}
302
10
  ```
303
11
 
304
12
  ### Expandable nav
@@ -616,7 +324,7 @@ section: components
616
324
  <div class="pf-c-page__main-body">
617
325
  <div class="pf-c-content">
618
326
  <h1>Main title</h1>
619
- <p>This is a demo of the page component.</p>
327
+ <p>This is a full page demo.</p>
620
328
  </div>
621
329
  </div>
622
330
  </section>
@@ -909,7 +617,7 @@ section: components
909
617
  <div class="pf-c-page__main-body">
910
618
  <div class="pf-c-content">
911
619
  <h1>Main title</h1>
912
- <p>This is a demo of the page component.</p>
620
+ <p>This is a full page demo.</p>
913
621
  </div>
914
622
  </div>
915
623
  </section>
@@ -1327,7 +1035,7 @@ section: components
1327
1035
  <div class="pf-c-page__main-body">
1328
1036
  <div class="pf-c-content">
1329
1037
  <h1>Main title</h1>
1330
- <p>This is a demo of the page component.</p>
1038
+ <p>This is a full page demo.</p>
1331
1039
  </div>
1332
1040
  </div>
1333
1041
  </section>
@@ -1667,7 +1375,7 @@ section: components
1667
1375
  <div class="pf-c-page__main-body">
1668
1376
  <div class="pf-c-content">
1669
1377
  <h1>Main title</h1>
1670
- <p>This is a demo of the page component.</p>
1378
+ <p>This is a full page demo.</p>
1671
1379
  </div>
1672
1380
  </div>
1673
1381
  </section>
@@ -2085,7 +1793,7 @@ section: components
2085
1793
  <div class="pf-c-page__main-body">
2086
1794
  <div class="pf-c-content">
2087
1795
  <h1>Main title</h1>
2088
- <p>This is a demo of the page component.</p>
1796
+ <p>This is a full page demo.</p>
2089
1797
  </div>
2090
1798
  </div>
2091
1799
  </section>
@@ -2373,7 +2081,7 @@ section: components
2373
2081
  <div class="pf-c-page__main-body">
2374
2082
  <div class="pf-c-content">
2375
2083
  <h1>Main title</h1>
2376
- <p>This is a demo of the page component.</p>
2084
+ <p>This is a full page demo.</p>
2377
2085
  </div>
2378
2086
  </div>
2379
2087
  </section>
@@ -2700,7 +2408,7 @@ section: components
2700
2408
  <div class="pf-c-page__main-body">
2701
2409
  <div class="pf-c-content">
2702
2410
  <h1>Main title</h1>
2703
- <p>This is a demo of the page component.</p>
2411
+ <p>This is a full page demo.</p>
2704
2412
  </div>
2705
2413
  </div>
2706
2414
  </section>
@@ -264,7 +264,7 @@ section: components
264
264
  <div class="pf-c-page__main-body">
265
265
  <div class="pf-c-content">
266
266
  <h1>Main title</h1>
267
- <p>This is a demo of the page component.</p>
267
+ <p>This is a full page demo.</p>
268
268
  </div>
269
269
  </div>
270
270
  </section>
@@ -1184,7 +1184,7 @@ section: components
1184
1184
  <div class="pf-c-page__main-body">
1185
1185
  <div class="pf-c-content">
1186
1186
  <h1>Main title</h1>
1187
- <p>This is a demo of the page component.</p>
1187
+ <p>This is a full page demo.</p>
1188
1188
  </div>
1189
1189
  </div>
1190
1190
  </section>
@@ -2101,7 +2101,7 @@ section: components
2101
2101
  <div class="pf-c-page__main-body">
2102
2102
  <div class="pf-c-content">
2103
2103
  <h1>Main title</h1>
2104
- <p>This is a demo of the page component.</p>
2104
+ <p>This is a full page demo.</p>
2105
2105
  </div>
2106
2106
  </div>
2107
2107
  </section>
@@ -3021,7 +3021,7 @@ section: components
3021
3021
  <div class="pf-c-page__main-body">
3022
3022
  <div class="pf-c-content">
3023
3023
  <h1>Main title</h1>
3024
- <p>This is a demo of the page component.</p>
3024
+ <p>This is a full page demo.</p>
3025
3025
  </div>
3026
3026
  </div>
3027
3027
  </section>
@@ -3940,7 +3940,7 @@ section: components
3940
3940
  <div class="pf-c-page__main-body">
3941
3941
  <div class="pf-c-content">
3942
3942
  <h1>Main title</h1>
3943
- <p>This is a demo of the page component.</p>
3943
+ <p>This is a full page demo.</p>
3944
3944
  </div>
3945
3945
  </div>
3946
3946
  </section>