@patternfly/patternfly 4.176.3 → 4.177.0
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/UPGRADE-GUIDE.md +3 -0
- package/components/Avatar/avatar.css +224 -0
- package/components/Avatar/avatar.scss +18 -0
- package/components/CodeEditor/code-editor.css +8 -0
- package/components/CodeEditor/code-editor.scss +11 -1
- package/docs/components/Avatar/examples/Avatar.md +53 -5
- package/docs/components/Brand/examples/Brand.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
- package/docs/components/DataList/examples/DataList.md +11 -11
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +27 -27
- package/docs/components/Dropdown/examples/Dropdown.md +2 -2
- package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
- package/docs/components/LogViewer/examples/LogViewer.md +19 -19
- package/docs/components/Masthead/examples/masthead.md +10 -10
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/Page/examples/Page.md +4 -4
- package/docs/components/Pagination/examples/Pagination.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +14 -14
- package/docs/components/Table/examples/Table.md +8 -8
- package/docs/components/Tabs/examples/Tabs.md +27 -27
- package/docs/components/Toolbar/examples/Toolbar.md +31 -31
- package/docs/demos/Alert/examples/Alert.md +358 -52
- package/docs/demos/BackToTop/examples/BackToTop.md +304 -5
- package/docs/demos/ContextSelector/examples/ContextSelector.md +2199 -45
- package/docs/demos/JumpLinks/examples/JumpLinks.md +1221 -80
- package/docs/demos/Nav/examples/Nav.md +293 -2
- package/docs/demos/Page/examples/Page.md +6098 -161
- package/docs/demos/Table/examples/Table.md +21223 -165
- package/docs/demos/Tabs/examples/Tabs.md +7304 -697
- package/docs/demos/Toolbar/examples/Toolbar.md +1026 -44
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +12 -0
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +232 -0
- package/patternfly.css +232 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -5,8 +5,299 @@ section: components
|
|
|
5
5
|
|
|
6
6
|
### Default nav
|
|
7
7
|
|
|
8
|
-
```
|
|
9
|
-
|
|
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
|
+
<div class="pf-c-page__header-tools">
|
|
37
|
+
<div class="pf-c-page__header-tools-group">
|
|
38
|
+
<div
|
|
39
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
40
|
+
>
|
|
41
|
+
<button
|
|
42
|
+
class="pf-c-button pf-m-plain"
|
|
43
|
+
type="button"
|
|
44
|
+
aria-label="Settings"
|
|
45
|
+
>
|
|
46
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
47
|
+
</button>
|
|
48
|
+
</div>
|
|
49
|
+
<div
|
|
50
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
51
|
+
>
|
|
52
|
+
<button
|
|
53
|
+
class="pf-c-button pf-m-plain"
|
|
54
|
+
type="button"
|
|
55
|
+
aria-label="Help"
|
|
56
|
+
>
|
|
57
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
58
|
+
</button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="pf-c-page__header-tools-group">
|
|
62
|
+
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
63
|
+
<div class="pf-c-dropdown">
|
|
64
|
+
<button
|
|
65
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
66
|
+
id="page-default-nav-example-dropdown-kebab-1-button"
|
|
67
|
+
aria-expanded="false"
|
|
68
|
+
type="button"
|
|
69
|
+
aria-label="Actions"
|
|
70
|
+
>
|
|
71
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
72
|
+
</button>
|
|
73
|
+
<ul
|
|
74
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
75
|
+
aria-labelledby="page-default-nav-example-dropdown-kebab-1-button"
|
|
76
|
+
hidden
|
|
77
|
+
>
|
|
78
|
+
<li>
|
|
79
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
80
|
+
</li>
|
|
81
|
+
<li>
|
|
82
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
83
|
+
</li>
|
|
84
|
+
<li>
|
|
85
|
+
<a
|
|
86
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
87
|
+
href="#"
|
|
88
|
+
aria-disabled="true"
|
|
89
|
+
tabindex="-1"
|
|
90
|
+
>Disabled link</a>
|
|
91
|
+
</li>
|
|
92
|
+
<li>
|
|
93
|
+
<button
|
|
94
|
+
class="pf-c-dropdown__menu-item"
|
|
95
|
+
type="button"
|
|
96
|
+
disabled
|
|
97
|
+
>Disabled action</button>
|
|
98
|
+
</li>
|
|
99
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
100
|
+
<li>
|
|
101
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
102
|
+
</li>
|
|
103
|
+
</ul>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<div
|
|
107
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
108
|
+
>
|
|
109
|
+
<div class="pf-c-dropdown">
|
|
110
|
+
<button
|
|
111
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
112
|
+
id="page-default-nav-example-dropdown-kebab-2-button"
|
|
113
|
+
aria-expanded="false"
|
|
114
|
+
type="button"
|
|
115
|
+
>
|
|
116
|
+
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
117
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
118
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
119
|
+
</span>
|
|
120
|
+
</button>
|
|
121
|
+
<ul
|
|
122
|
+
class="pf-c-dropdown__menu"
|
|
123
|
+
aria-labelledby="page-default-nav-example-dropdown-kebab-2-button"
|
|
124
|
+
hidden
|
|
125
|
+
>
|
|
126
|
+
<li>
|
|
127
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
128
|
+
</li>
|
|
129
|
+
<li>
|
|
130
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
131
|
+
</li>
|
|
132
|
+
<li>
|
|
133
|
+
<a
|
|
134
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
135
|
+
href="#"
|
|
136
|
+
aria-disabled="true"
|
|
137
|
+
tabindex="-1"
|
|
138
|
+
>Disabled link</a>
|
|
139
|
+
</li>
|
|
140
|
+
<li>
|
|
141
|
+
<button
|
|
142
|
+
class="pf-c-dropdown__menu-item"
|
|
143
|
+
type="button"
|
|
144
|
+
disabled
|
|
145
|
+
>Disabled action</button>
|
|
146
|
+
</li>
|
|
147
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
148
|
+
<li>
|
|
149
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
150
|
+
</li>
|
|
151
|
+
</ul>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
<img
|
|
156
|
+
class="pf-c-avatar"
|
|
157
|
+
src="/assets/images/img_avatar.svg"
|
|
158
|
+
alt="Avatar image"
|
|
159
|
+
/>
|
|
160
|
+
</div>
|
|
161
|
+
</header>
|
|
162
|
+
<div class="pf-c-page__sidebar">
|
|
163
|
+
<div class="pf-c-page__sidebar-body">
|
|
164
|
+
<nav
|
|
165
|
+
class="pf-c-nav"
|
|
166
|
+
id="page-default-nav-example-primary-nav"
|
|
167
|
+
aria-label="Global"
|
|
168
|
+
>
|
|
169
|
+
<ul class="pf-c-nav__list">
|
|
170
|
+
<li class="pf-c-nav__item">
|
|
171
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
172
|
+
</li>
|
|
173
|
+
<li class="pf-c-nav__item">
|
|
174
|
+
<a
|
|
175
|
+
href="#"
|
|
176
|
+
class="pf-c-nav__link pf-m-current"
|
|
177
|
+
aria-current="page"
|
|
178
|
+
>Policy</a>
|
|
179
|
+
</li>
|
|
180
|
+
<li class="pf-c-nav__item">
|
|
181
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
182
|
+
</li>
|
|
183
|
+
<li class="pf-c-nav__item">
|
|
184
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
185
|
+
</li>
|
|
186
|
+
<li class="pf-c-nav__item">
|
|
187
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
188
|
+
</li>
|
|
189
|
+
</ul>
|
|
190
|
+
</nav>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
<main
|
|
194
|
+
class="pf-c-page__main"
|
|
195
|
+
tabindex="-1"
|
|
196
|
+
id="main-content-page-default-nav-example"
|
|
197
|
+
>
|
|
198
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
199
|
+
<div class="pf-c-page__main-body">
|
|
200
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
201
|
+
<ol class="pf-c-breadcrumb__list">
|
|
202
|
+
<li class="pf-c-breadcrumb__item">
|
|
203
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
204
|
+
</li>
|
|
205
|
+
<li class="pf-c-breadcrumb__item">
|
|
206
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
207
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
208
|
+
</span>
|
|
209
|
+
|
|
210
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
211
|
+
</li>
|
|
212
|
+
<li class="pf-c-breadcrumb__item">
|
|
213
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
214
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
215
|
+
</span>
|
|
216
|
+
|
|
217
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
218
|
+
</li>
|
|
219
|
+
<li class="pf-c-breadcrumb__item">
|
|
220
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
221
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
222
|
+
</span>
|
|
223
|
+
|
|
224
|
+
<a
|
|
225
|
+
href="#"
|
|
226
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
227
|
+
aria-current="page"
|
|
228
|
+
>Section landing</a>
|
|
229
|
+
</li>
|
|
230
|
+
</ol>
|
|
231
|
+
</nav>
|
|
232
|
+
</div>
|
|
233
|
+
</section>
|
|
234
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
235
|
+
<div class="pf-c-page__main-body">
|
|
236
|
+
<div class="pf-c-content">
|
|
237
|
+
<h1>Main title</h1>
|
|
238
|
+
<p>This is a full page demo.</p>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</section>
|
|
242
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
243
|
+
<div class="pf-c-page__main-body">
|
|
244
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
245
|
+
<div class="pf-l-gallery__item">
|
|
246
|
+
<div class="pf-c-card">
|
|
247
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="pf-l-gallery__item">
|
|
251
|
+
<div class="pf-c-card">
|
|
252
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="pf-l-gallery__item">
|
|
256
|
+
<div class="pf-c-card">
|
|
257
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="pf-l-gallery__item">
|
|
261
|
+
<div class="pf-c-card">
|
|
262
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
<div class="pf-l-gallery__item">
|
|
266
|
+
<div class="pf-c-card">
|
|
267
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="pf-l-gallery__item">
|
|
271
|
+
<div class="pf-c-card">
|
|
272
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="pf-l-gallery__item">
|
|
276
|
+
<div class="pf-c-card">
|
|
277
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="pf-l-gallery__item">
|
|
281
|
+
<div class="pf-c-card">
|
|
282
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="pf-l-gallery__item">
|
|
286
|
+
<div class="pf-c-card">
|
|
287
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="pf-l-gallery__item">
|
|
291
|
+
<div class="pf-c-card">
|
|
292
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
</section>
|
|
298
|
+
</main>
|
|
299
|
+
</div>
|
|
300
|
+
|
|
10
301
|
```
|
|
11
302
|
|
|
12
303
|
### Expandable nav
|