@patternfly/patternfly 4.179.3 → 4.180.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/components/Dropdown/dropdown.css +4 -2
- package/components/Dropdown/dropdown.scss +4 -2
- package/components/FormControl/form-control.scss +3 -0
- package/components/MenuToggle/menu-toggle.css +4 -1
- package/components/MenuToggle/menu-toggle.scss +4 -3
- package/components/SearchInput/search-input.css +1 -0
- package/components/SearchInput/search-input.scss +1 -0
- package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
- package/docs/components/ContextSelector/examples/context-selector.md +84 -102
- package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
- package/docs/components/FormControl/examples/FormControl.md +0 -11
- package/docs/components/InputGroup/examples/InputGroup.md +6 -22
- package/docs/components/Menu/examples/Menu.md +60 -28
- package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
- package/docs/components/Select/examples/Select.md +30 -14
- package/docs/components/Toolbar/examples/Toolbar.md +300 -180
- package/docs/components/TreeView/examples/TreeView.md +15 -7
- package/docs/demos/ContextSelector/examples/ContextSelector.md +164 -113
- package/docs/demos/DataList/examples/DataList.md +159 -114
- package/docs/demos/Masthead/examples/Masthead.md +284 -167
- package/docs/demos/Page/examples/Page.md +252 -105
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
- package/docs/demos/Table/examples/Table.md +1176 -639
- package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
- package/package.json +1 -1
- package/patternfly-no-reset.css +9 -3
- package/patternfly.css +9 -3
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -4832,13 +4832,21 @@ cssPrefix: pf-c-menu
|
|
|
4832
4832
|
<div class="pf-c-menu pf-m-scrollable">
|
|
4833
4833
|
<div class="pf-c-menu__search">
|
|
4834
4834
|
<div class="pf-c-menu__search-input">
|
|
4835
|
-
<input
|
|
4836
|
-
class="pf-c-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4835
|
+
<div class="pf-c-search-input">
|
|
4836
|
+
<div class="pf-c-search-input__bar">
|
|
4837
|
+
<span class="pf-c-search-input__text">
|
|
4838
|
+
<span class="pf-c-search-input__icon">
|
|
4839
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
4840
|
+
</span>
|
|
4841
|
+
<input
|
|
4842
|
+
class="pf-c-search-input__text-input"
|
|
4843
|
+
type="text"
|
|
4844
|
+
placeholder="Search"
|
|
4845
|
+
aria-label="Search"
|
|
4846
|
+
/>
|
|
4847
|
+
</span>
|
|
4848
|
+
</div>
|
|
4849
|
+
</div>
|
|
4842
4850
|
</div>
|
|
4843
4851
|
</div>
|
|
4844
4852
|
<hr class="pf-c-divider" />
|
|
@@ -4943,13 +4951,21 @@ cssPrefix: pf-c-menu
|
|
|
4943
4951
|
<div class="pf-c-menu">
|
|
4944
4952
|
<div class="pf-c-menu__search">
|
|
4945
4953
|
<div class="pf-c-menu__search-input">
|
|
4946
|
-
<input
|
|
4947
|
-
class="pf-c-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4954
|
+
<div class="pf-c-search-input">
|
|
4955
|
+
<div class="pf-c-search-input__bar">
|
|
4956
|
+
<span class="pf-c-search-input__text">
|
|
4957
|
+
<span class="pf-c-search-input__icon">
|
|
4958
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
4959
|
+
</span>
|
|
4960
|
+
<input
|
|
4961
|
+
class="pf-c-search-input__text-input"
|
|
4962
|
+
type="text"
|
|
4963
|
+
placeholder="Search"
|
|
4964
|
+
aria-label="Search"
|
|
4965
|
+
/>
|
|
4966
|
+
</span>
|
|
4967
|
+
</div>
|
|
4968
|
+
</div>
|
|
4953
4969
|
</div>
|
|
4954
4970
|
</div>
|
|
4955
4971
|
<hr class="pf-c-divider" />
|
|
@@ -5711,13 +5727,21 @@ cssPrefix: pf-c-menu
|
|
|
5711
5727
|
<div class="pf-c-menu pf-m-plain">
|
|
5712
5728
|
<div class="pf-c-menu__search">
|
|
5713
5729
|
<div class="pf-c-menu__search-input">
|
|
5714
|
-
<input
|
|
5715
|
-
class="pf-c-
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5730
|
+
<div class="pf-c-search-input">
|
|
5731
|
+
<div class="pf-c-search-input__bar">
|
|
5732
|
+
<span class="pf-c-search-input__text">
|
|
5733
|
+
<span class="pf-c-search-input__icon">
|
|
5734
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
5735
|
+
</span>
|
|
5736
|
+
<input
|
|
5737
|
+
class="pf-c-search-input__text-input"
|
|
5738
|
+
type="text"
|
|
5739
|
+
placeholder="Search"
|
|
5740
|
+
aria-label="Search"
|
|
5741
|
+
/>
|
|
5742
|
+
</span>
|
|
5743
|
+
</div>
|
|
5744
|
+
</div>
|
|
5721
5745
|
</div>
|
|
5722
5746
|
</div>
|
|
5723
5747
|
<hr class="pf-c-divider" />
|
|
@@ -5822,13 +5846,21 @@ cssPrefix: pf-c-menu
|
|
|
5822
5846
|
<div class="pf-c-menu pf-m-plain pf-m-scrollable">
|
|
5823
5847
|
<div class="pf-c-menu__search">
|
|
5824
5848
|
<div class="pf-c-menu__search-input">
|
|
5825
|
-
<input
|
|
5826
|
-
class="pf-c-
|
|
5827
|
-
|
|
5828
|
-
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
|
|
5849
|
+
<div class="pf-c-search-input">
|
|
5850
|
+
<div class="pf-c-search-input__bar">
|
|
5851
|
+
<span class="pf-c-search-input__text">
|
|
5852
|
+
<span class="pf-c-search-input__icon">
|
|
5853
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
5854
|
+
</span>
|
|
5855
|
+
<input
|
|
5856
|
+
class="pf-c-search-input__text-input"
|
|
5857
|
+
type="text"
|
|
5858
|
+
placeholder="Search"
|
|
5859
|
+
aria-label="Search"
|
|
5860
|
+
/>
|
|
5861
|
+
</span>
|
|
5862
|
+
</div>
|
|
5863
|
+
</div>
|
|
5832
5864
|
</div>
|
|
5833
5865
|
</div>
|
|
5834
5866
|
<hr class="pf-c-divider" />
|
|
@@ -53,23 +53,6 @@ cssPrefix: pf-c-menu-toggle
|
|
|
53
53
|
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
### Icon
|
|
57
|
-
|
|
58
|
-
```html
|
|
59
|
-
<button class="pf-c-menu-toggle" type="button" aria-expanded="false">
|
|
60
|
-
<span class="pf-c-menu-toggle__icon">
|
|
61
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
62
|
-
</span>
|
|
63
|
-
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
64
|
-
<span class="pf-c-menu-toggle__controls">
|
|
65
|
-
<span class="pf-c-menu-toggle__toggle-icon">
|
|
66
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
67
|
-
</span>
|
|
68
|
-
</span>
|
|
69
|
-
</button>
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
|
|
73
56
|
### Count
|
|
74
57
|
|
|
75
58
|
```html
|
|
@@ -167,23 +150,6 @@ cssPrefix: pf-c-menu-toggle
|
|
|
167
150
|
</span>
|
|
168
151
|
</button>
|
|
169
152
|
|
|
170
|
-
|
|
171
|
-
<button
|
|
172
|
-
class="pf-c-menu-toggle pf-m-secondary"
|
|
173
|
-
type="button"
|
|
174
|
-
aria-expanded="false"
|
|
175
|
-
>
|
|
176
|
-
<span class="pf-c-menu-toggle__icon">
|
|
177
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
178
|
-
</span>
|
|
179
|
-
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
180
|
-
<span class="pf-c-menu-toggle__controls">
|
|
181
|
-
<span class="pf-c-menu-toggle__toggle-icon">
|
|
182
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
183
|
-
</span>
|
|
184
|
-
</span>
|
|
185
|
-
</button>
|
|
186
|
-
|
|
187
153
|
|
|
188
154
|
<button
|
|
189
155
|
class="pf-c-menu-toggle pf-m-secondary pf-m-expanded"
|
|
@@ -281,13 +247,38 @@ cssPrefix: pf-c-menu-toggle
|
|
|
281
247
|
</span>
|
|
282
248
|
</button>
|
|
283
249
|
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
### With icon/image and text
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<button
|
|
256
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
257
|
+
type="button"
|
|
258
|
+
aria-expanded="false"
|
|
259
|
+
>
|
|
260
|
+
<span class="pf-c-menu-toggle__icon">
|
|
261
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
262
|
+
</span>
|
|
263
|
+
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
264
|
+
<span class="pf-c-menu-toggle__controls">
|
|
265
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
266
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
267
|
+
</span>
|
|
268
|
+
</span>
|
|
269
|
+
</button>
|
|
270
|
+
|
|
284
271
|
|
|
285
272
|
<button
|
|
286
|
-
class="pf-c-menu-toggle pf-m-
|
|
273
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
287
274
|
type="button"
|
|
288
|
-
aria-expanded="
|
|
275
|
+
aria-expanded="false"
|
|
276
|
+
disabled
|
|
289
277
|
>
|
|
290
|
-
<span class="pf-c-menu-
|
|
278
|
+
<span class="pf-c-menu-toggle__icon">
|
|
279
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
280
|
+
</span>
|
|
281
|
+
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
291
282
|
<span class="pf-c-menu-toggle__controls">
|
|
292
283
|
<span class="pf-c-menu-toggle__toggle-icon">
|
|
293
284
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -297,15 +288,58 @@ cssPrefix: pf-c-menu-toggle
|
|
|
297
288
|
|
|
298
289
|
```
|
|
299
290
|
|
|
300
|
-
### With
|
|
291
|
+
### With avatar and text
|
|
301
292
|
|
|
302
293
|
```html
|
|
303
294
|
<button class="pf-c-menu-toggle" type="button" aria-expanded="false">
|
|
304
|
-
<span class="pf-c-menu-
|
|
295
|
+
<span class="pf-c-menu-toggle__icon">
|
|
296
|
+
<img
|
|
297
|
+
class="pf-c-avatar pf-m-light"
|
|
298
|
+
src="/assets/images/img_avatar-light.svg"
|
|
299
|
+
alt="Avatar image light"
|
|
300
|
+
/>
|
|
301
|
+
</span>
|
|
302
|
+
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
303
|
+
<span class="pf-c-menu-toggle__controls">
|
|
304
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
305
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
306
|
+
</span>
|
|
307
|
+
</span>
|
|
308
|
+
</button>
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
<button
|
|
312
|
+
class="pf-c-menu-toggle pf-m-expanded"
|
|
313
|
+
type="button"
|
|
314
|
+
aria-expanded="true"
|
|
315
|
+
>
|
|
316
|
+
<span class="pf-c-menu-toggle__icon">
|
|
317
|
+
<img
|
|
318
|
+
class="pf-c-avatar pf-m-light"
|
|
319
|
+
src="/assets/images/img_avatar-light.svg"
|
|
320
|
+
alt="Avatar image light"
|
|
321
|
+
/>
|
|
322
|
+
</span>
|
|
323
|
+
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
324
|
+
<span class="pf-c-menu-toggle__controls">
|
|
325
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
326
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
328
|
+
</span>
|
|
329
|
+
</button>
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
<button
|
|
333
|
+
class="pf-c-menu-toggle"
|
|
334
|
+
type="button"
|
|
335
|
+
aria-expanded="false"
|
|
336
|
+
disabled
|
|
337
|
+
>
|
|
338
|
+
<span class="pf-c-menu-toggle__icon">
|
|
305
339
|
<img
|
|
306
|
-
class="pf-c-avatar"
|
|
307
|
-
src="/assets/images/img_avatar.svg"
|
|
308
|
-
alt="Avatar image"
|
|
340
|
+
class="pf-c-avatar pf-m-light"
|
|
341
|
+
src="/assets/images/img_avatar-light.svg"
|
|
342
|
+
alt="Avatar image light"
|
|
309
343
|
/>
|
|
310
344
|
</span>
|
|
311
345
|
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
@@ -350,8 +384,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
350
384
|
| Class | Applied | Outcome |
|
|
351
385
|
| -------------------------------- | ------------------- | --------------------------------------------------------------- |
|
|
352
386
|
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
353
|
-
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon.
|
|
354
|
-
| `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image. |
|
|
387
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
|
|
355
388
|
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
356
389
|
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
357
390
|
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
@@ -1849,13 +1849,21 @@ The multiselect should be used when the user is selecting multiple items from a
|
|
|
1849
1849
|
|
|
1850
1850
|
<div class="pf-c-select__menu">
|
|
1851
1851
|
<div class="pf-c-select__menu-search">
|
|
1852
|
-
<input
|
|
1853
|
-
class="pf-c-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1852
|
+
<div class="pf-c-search-input">
|
|
1853
|
+
<div class="pf-c-search-input__bar">
|
|
1854
|
+
<span class="pf-c-search-input__text">
|
|
1855
|
+
<span class="pf-c-search-input__icon">
|
|
1856
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1857
|
+
</span>
|
|
1858
|
+
<input
|
|
1859
|
+
class="pf-c-search-input__text-input"
|
|
1860
|
+
type="text"
|
|
1861
|
+
placeholder="Search"
|
|
1862
|
+
aria-label="Search"
|
|
1863
|
+
/>
|
|
1864
|
+
</span>
|
|
1865
|
+
</div>
|
|
1866
|
+
</div>
|
|
1859
1867
|
</div>
|
|
1860
1868
|
<hr class="pf-c-divider" />
|
|
1861
1869
|
<div class="pf-c-select__menu-group">
|
|
@@ -2730,13 +2738,21 @@ The plain select variation should be used when you do not want a border applied
|
|
|
2730
2738
|
|
|
2731
2739
|
<div class="pf-c-select__menu" aria-labelledby="select-favorites-label">
|
|
2732
2740
|
<div class="pf-c-select__menu-search">
|
|
2733
|
-
<input
|
|
2734
|
-
class="pf-c-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2741
|
+
<div class="pf-c-search-input">
|
|
2742
|
+
<div class="pf-c-search-input__bar">
|
|
2743
|
+
<span class="pf-c-search-input__text">
|
|
2744
|
+
<span class="pf-c-search-input__icon">
|
|
2745
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
2746
|
+
</span>
|
|
2747
|
+
<input
|
|
2748
|
+
class="pf-c-search-input__text-input"
|
|
2749
|
+
type="text"
|
|
2750
|
+
placeholder="Search"
|
|
2751
|
+
aria-label="Search"
|
|
2752
|
+
/>
|
|
2753
|
+
</span>
|
|
2754
|
+
</div>
|
|
2755
|
+
</div>
|
|
2740
2756
|
</div>
|
|
2741
2757
|
<hr class="pf-c-divider" />
|
|
2742
2758
|
<div class="pf-c-select__menu-group">
|