@patternfly/patternfly 4.176.2 → 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/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- 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 -14
- 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 +2 -2
- 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 -7387
- 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 +10 -9
- package/patternfly.css +10 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1655,7 +1655,7 @@ wrapperTag: div
|
|
|
1655
1655
|
<div class="pf-c-page__main-body">
|
|
1656
1656
|
<div class="pf-c-content">
|
|
1657
1657
|
<h1>Main title</h1>
|
|
1658
|
-
<p>This is a
|
|
1658
|
+
<p>This is a full page demo.</p>
|
|
1659
1659
|
</div>
|
|
1660
1660
|
</div>
|
|
1661
1661
|
</section>
|
|
@@ -2520,7 +2520,7 @@ wrapperTag: div
|
|
|
2520
2520
|
<div class="pf-c-page__main-body">
|
|
2521
2521
|
<div class="pf-c-content">
|
|
2522
2522
|
<h1>Main title</h1>
|
|
2523
|
-
<p>This is a
|
|
2523
|
+
<p>This is a full page demo.</p>
|
|
2524
2524
|
</div>
|
|
2525
2525
|
</div>
|
|
2526
2526
|
</section>
|
|
@@ -5,300 +5,8 @@ section: components
|
|
|
5
5
|
|
|
6
6
|
### Default nav
|
|
7
7
|
|
|
8
|
-
```
|
|
9
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
3943
|
+
<p>This is a full page demo.</p>
|
|
3944
3944
|
</div>
|
|
3945
3945
|
</div>
|
|
3946
3946
|
</section>
|