@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
|
@@ -86,7 +86,6 @@ wrapperTag: div
|
|
|
86
86
|
<span class="pf-c-label__icon">
|
|
87
87
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
88
88
|
</span>
|
|
89
|
-
|
|
90
89
|
Set up your cluster
|
|
91
90
|
</span>
|
|
92
91
|
</span>
|
|
@@ -97,7 +96,6 @@ wrapperTag: div
|
|
|
97
96
|
<span class="pf-c-label__icon">
|
|
98
97
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
99
98
|
</span>
|
|
100
|
-
|
|
101
99
|
Guided tours
|
|
102
100
|
</span>
|
|
103
101
|
</span>
|
|
@@ -108,7 +106,6 @@ wrapperTag: div
|
|
|
108
106
|
<span class="pf-c-label__icon">
|
|
109
107
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
110
108
|
</span>
|
|
111
|
-
|
|
112
109
|
Quick starts
|
|
113
110
|
</span>
|
|
114
111
|
</span>
|
|
@@ -213,7 +210,6 @@ wrapperTag: div
|
|
|
213
210
|
<span class="pf-c-label__icon">
|
|
214
211
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
215
212
|
</span>
|
|
216
|
-
|
|
217
213
|
Set up your cluster
|
|
218
214
|
</span>
|
|
219
215
|
</span>
|
|
@@ -250,7 +246,6 @@ wrapperTag: div
|
|
|
250
246
|
<span class="pf-c-label__icon">
|
|
251
247
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
252
248
|
</span>
|
|
253
|
-
|
|
254
249
|
Guided tours
|
|
255
250
|
</span>
|
|
256
251
|
</span>
|
|
@@ -282,7 +277,6 @@ wrapperTag: div
|
|
|
282
277
|
<span class="pf-c-label__icon">
|
|
283
278
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
284
279
|
</span>
|
|
285
|
-
|
|
286
280
|
Quick starts
|
|
287
281
|
</span>
|
|
288
282
|
</span>
|
|
@@ -317,7 +311,6 @@ wrapperTag: div
|
|
|
317
311
|
<span class="pf-c-label__icon">
|
|
318
312
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
319
313
|
</span>
|
|
320
|
-
|
|
321
314
|
Learning resources
|
|
322
315
|
</span>
|
|
323
316
|
</span>
|
|
@@ -979,7 +972,6 @@ wrapperTag: div
|
|
|
979
972
|
aria-hidden="true"
|
|
980
973
|
></i>
|
|
981
974
|
</span>
|
|
982
|
-
|
|
983
975
|
1
|
|
984
976
|
</span>
|
|
985
977
|
</span>
|
|
@@ -991,7 +983,6 @@ wrapperTag: div
|
|
|
991
983
|
aria-hidden="true"
|
|
992
984
|
></i>
|
|
993
985
|
</span>
|
|
994
|
-
|
|
995
986
|
3
|
|
996
987
|
</span>
|
|
997
988
|
</span>
|
|
@@ -1000,7 +991,6 @@ wrapperTag: div
|
|
|
1000
991
|
<span class="pf-c-label__icon">
|
|
1001
992
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
1002
993
|
</span>
|
|
1003
|
-
|
|
1004
994
|
3
|
|
1005
995
|
</span>
|
|
1006
996
|
</span>
|
|
@@ -1009,7 +999,6 @@ wrapperTag: div
|
|
|
1009
999
|
<span class="pf-c-label__icon">
|
|
1010
1000
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1011
1001
|
</span>
|
|
1012
|
-
|
|
1013
1002
|
3
|
|
1014
1003
|
</span>
|
|
1015
1004
|
</span>
|
|
@@ -1018,7 +1007,6 @@ wrapperTag: div
|
|
|
1018
1007
|
<span class="pf-c-label__icon">
|
|
1019
1008
|
<i class="fas fa-fw fa-bell" aria-hidden="true"></i>
|
|
1020
1009
|
</span>
|
|
1021
|
-
|
|
1022
1010
|
3
|
|
1023
1011
|
</span>
|
|
1024
1012
|
</span>
|
|
@@ -1177,7 +1165,6 @@ wrapperTag: div
|
|
|
1177
1165
|
aria-hidden="true"
|
|
1178
1166
|
></i>
|
|
1179
1167
|
</span>
|
|
1180
|
-
|
|
1181
1168
|
1
|
|
1182
1169
|
</span>
|
|
1183
1170
|
</span>
|
|
@@ -1189,7 +1176,6 @@ wrapperTag: div
|
|
|
1189
1176
|
aria-hidden="true"
|
|
1190
1177
|
></i>
|
|
1191
1178
|
</span>
|
|
1192
|
-
|
|
1193
1179
|
3
|
|
1194
1180
|
</span>
|
|
1195
1181
|
</span>
|
|
@@ -1198,7 +1184,6 @@ wrapperTag: div
|
|
|
1198
1184
|
<span class="pf-c-label__icon">
|
|
1199
1185
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
1200
1186
|
</span>
|
|
1201
|
-
|
|
1202
1187
|
3
|
|
1203
1188
|
</span>
|
|
1204
1189
|
</span>
|
|
@@ -1207,7 +1192,6 @@ wrapperTag: div
|
|
|
1207
1192
|
<span class="pf-c-label__icon">
|
|
1208
1193
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1209
1194
|
</span>
|
|
1210
|
-
|
|
1211
1195
|
3
|
|
1212
1196
|
</span>
|
|
1213
1197
|
</span>
|
|
@@ -1216,7 +1200,6 @@ wrapperTag: div
|
|
|
1216
1200
|
<span class="pf-c-label__icon">
|
|
1217
1201
|
<i class="fas fa-fw fa-bell" aria-hidden="true"></i>
|
|
1218
1202
|
</span>
|
|
1219
|
-
|
|
1220
1203
|
3
|
|
1221
1204
|
</span>
|
|
1222
1205
|
</span>
|
|
@@ -1628,7 +1611,6 @@ wrapperTag: div
|
|
|
1628
1611
|
aria-hidden="true"
|
|
1629
1612
|
></i>
|
|
1630
1613
|
</span>
|
|
1631
|
-
|
|
1632
1614
|
1
|
|
1633
1615
|
</span>
|
|
1634
1616
|
</span>
|
|
@@ -1640,7 +1622,6 @@ wrapperTag: div
|
|
|
1640
1622
|
aria-hidden="true"
|
|
1641
1623
|
></i>
|
|
1642
1624
|
</span>
|
|
1643
|
-
|
|
1644
1625
|
3
|
|
1645
1626
|
</span>
|
|
1646
1627
|
</span>
|
|
@@ -1649,7 +1630,6 @@ wrapperTag: div
|
|
|
1649
1630
|
<span class="pf-c-label__icon">
|
|
1650
1631
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
1651
1632
|
</span>
|
|
1652
|
-
|
|
1653
1633
|
3
|
|
1654
1634
|
</span>
|
|
1655
1635
|
</span>
|
|
@@ -1658,7 +1638,6 @@ wrapperTag: div
|
|
|
1658
1638
|
<span class="pf-c-label__icon">
|
|
1659
1639
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1660
1640
|
</span>
|
|
1661
|
-
|
|
1662
1641
|
3
|
|
1663
1642
|
</span>
|
|
1664
1643
|
</span>
|
|
@@ -1667,7 +1646,6 @@ wrapperTag: div
|
|
|
1667
1646
|
<span class="pf-c-label__icon">
|
|
1668
1647
|
<i class="fas fa-fw fa-bell" aria-hidden="true"></i>
|
|
1669
1648
|
</span>
|
|
1670
|
-
|
|
1671
1649
|
3
|
|
1672
1650
|
</span>
|
|
1673
1651
|
</span>
|
|
@@ -1815,16 +1793,24 @@ wrapperTag: div
|
|
|
1815
1793
|
### Utilization card 3
|
|
1816
1794
|
|
|
1817
1795
|
```html
|
|
1796
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
1797
|
+
<code>baseline</code> alignment.
|
|
1798
|
+
<br />
|
|
1799
|
+
<br />
|
|
1818
1800
|
<div
|
|
1819
1801
|
class="pf-l-gallery pf-m-gutter"
|
|
1820
1802
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
1821
1803
|
>
|
|
1822
1804
|
<div class="pf-c-card" id="utilization-card-3-example">
|
|
1823
|
-
<div class="pf-c-card__header">
|
|
1824
|
-
<div
|
|
1805
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
1806
|
+
<div
|
|
1807
|
+
class="pf-c-card__title"
|
|
1808
|
+
id="utilization-card-3-example-title1"
|
|
1809
|
+
style="padding-top: 3px;"
|
|
1810
|
+
>
|
|
1825
1811
|
<h2 class="pf-c-title pf-m-lg">Recommendations</h2>
|
|
1826
1812
|
</div>
|
|
1827
|
-
<div class="pf-c-card__actions">
|
|
1813
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
1828
1814
|
<div class="pf-c-select">
|
|
1829
1815
|
<span
|
|
1830
1816
|
id="utilization-card-3-example-select-dropdown-label"
|
|
@@ -1832,7 +1818,7 @@ wrapperTag: div
|
|
|
1832
1818
|
>Choose one</span>
|
|
1833
1819
|
|
|
1834
1820
|
<button
|
|
1835
|
-
class="pf-c-select__toggle"
|
|
1821
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
1836
1822
|
type="button"
|
|
1837
1823
|
id="utilization-card-3-example-select-dropdown-toggle"
|
|
1838
1824
|
aria-haspopup="true"
|
|
@@ -2573,6 +2559,10 @@ wrapperTag: div
|
|
|
2573
2559
|
### Trend card 1
|
|
2574
2560
|
|
|
2575
2561
|
```html
|
|
2562
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2563
|
+
<code>baseline</code> alignment.
|
|
2564
|
+
<br />
|
|
2565
|
+
<br />
|
|
2576
2566
|
<div
|
|
2577
2567
|
class="pf-l-gallery pf-m-gutter"
|
|
2578
2568
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
@@ -2585,7 +2575,7 @@ wrapperTag: div
|
|
|
2585
2575
|
</div>
|
|
2586
2576
|
<span class="pf-u-color-200">Workload</span>
|
|
2587
2577
|
</div>
|
|
2588
|
-
<div class="pf-c-card__actions">
|
|
2578
|
+
<div class="pf-c-card__actions pf-m-no-offset" style="padding-top: 1px;">
|
|
2589
2579
|
<div class="pf-c-select">
|
|
2590
2580
|
<span
|
|
2591
2581
|
id="trend-card-1-example-select-dropdown-label"
|
|
@@ -2593,7 +2583,7 @@ wrapperTag: div
|
|
|
2593
2583
|
>Choose one</span>
|
|
2594
2584
|
|
|
2595
2585
|
<button
|
|
2596
|
-
class="pf-c-select__toggle"
|
|
2586
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2597
2587
|
type="button"
|
|
2598
2588
|
id="trend-card-1-example-select-dropdown-toggle"
|
|
2599
2589
|
aria-haspopup="true"
|
|
@@ -2694,13 +2684,17 @@ wrapperTag: div
|
|
|
2694
2684
|
### Log view
|
|
2695
2685
|
|
|
2696
2686
|
```html
|
|
2687
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2688
|
+
<code>baseline</code> alignment.
|
|
2689
|
+
<br />
|
|
2690
|
+
<br />
|
|
2697
2691
|
<div
|
|
2698
2692
|
class="pf-l-gallery pf-m-gutter"
|
|
2699
2693
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
2700
2694
|
>
|
|
2701
2695
|
<div class="pf-c-card" id="card-log-view-example">
|
|
2702
|
-
<div class="pf-c-card__header">
|
|
2703
|
-
<div class="pf-c-card__actions">
|
|
2696
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
2697
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
2704
2698
|
<div class="pf-c-select">
|
|
2705
2699
|
<span
|
|
2706
2700
|
id="card-log-view-example-select-dropdown-label"
|
|
@@ -2708,7 +2702,7 @@ wrapperTag: div
|
|
|
2708
2702
|
>Choose one</span>
|
|
2709
2703
|
|
|
2710
2704
|
<button
|
|
2711
|
-
class="pf-c-select__toggle"
|
|
2705
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2712
2706
|
type="button"
|
|
2713
2707
|
id="card-log-view-example-select-dropdown-toggle"
|
|
2714
2708
|
aria-haspopup="true"
|
|
@@ -2759,7 +2753,11 @@ wrapperTag: div
|
|
|
2759
2753
|
</ul>
|
|
2760
2754
|
</div>
|
|
2761
2755
|
</div>
|
|
2762
|
-
<div
|
|
2756
|
+
<div
|
|
2757
|
+
class="pf-c-card__title"
|
|
2758
|
+
id="card-log-view-example-title1"
|
|
2759
|
+
style="padding-top: 3px;"
|
|
2760
|
+
>
|
|
2763
2761
|
<h2 class="pf-c-title pf-m-lg">Activity</h2>
|
|
2764
2762
|
</div>
|
|
2765
2763
|
</div>
|
|
@@ -2831,13 +2829,17 @@ wrapperTag: div
|
|
|
2831
2829
|
### Events view
|
|
2832
2830
|
|
|
2833
2831
|
```html
|
|
2832
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2833
|
+
<code>baseline</code> alignment.
|
|
2834
|
+
<br />
|
|
2835
|
+
<br />
|
|
2834
2836
|
<div
|
|
2835
2837
|
class="pf-l-gallery pf-m-gutter"
|
|
2836
2838
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
2837
2839
|
>
|
|
2838
2840
|
<div class="pf-c-card" id="card-events-view-example">
|
|
2839
|
-
<div class="pf-c-card__header">
|
|
2840
|
-
<div class="pf-c-card__actions">
|
|
2841
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
2842
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
2841
2843
|
<div class="pf-c-select">
|
|
2842
2844
|
<span
|
|
2843
2845
|
id="card-events-view-example-select-dropdown-label"
|
|
@@ -2845,7 +2847,7 @@ wrapperTag: div
|
|
|
2845
2847
|
>Choose one</span>
|
|
2846
2848
|
|
|
2847
2849
|
<button
|
|
2848
|
-
class="pf-c-select__toggle"
|
|
2850
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2849
2851
|
type="button"
|
|
2850
2852
|
id="card-events-view-example-select-dropdown-toggle"
|
|
2851
2853
|
aria-haspopup="true"
|
|
@@ -2896,7 +2898,11 @@ wrapperTag: div
|
|
|
2896
2898
|
</ul>
|
|
2897
2899
|
</div>
|
|
2898
2900
|
</div>
|
|
2899
|
-
<div
|
|
2901
|
+
<div
|
|
2902
|
+
class="pf-c-card__title"
|
|
2903
|
+
id="card-events-view-example-title1"
|
|
2904
|
+
style="padding-top: 3px;"
|
|
2905
|
+
>
|
|
2900
2906
|
<h2 class="pf-c-title pf-m-lg">Events</h2>
|
|
2901
2907
|
</div>
|
|
2902
2908
|
</div>
|