@patternfly/patternfly 4.221.3 → 4.222.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 +15 -0
- package/components/Dropdown/dropdown.scss +20 -0
- package/docs/components/Dropdown/examples/Dropdown.md +216 -0
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/Dashboard/examples/Dashboard.md +0 -1
- package/docs/demos/Nav/examples/Nav.md +671 -718
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -2
- package/docs/demos/Tabs/examples/Tabs.md +5 -5
- package/docs/demos/Wizard/examples/Wizard.md +0 -4
- package/package.json +5 -5
- package/patternfly-no-reset.css +15 -0
- package/patternfly.css +15 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -50,6 +50,8 @@
|
|
|
50
50
|
--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
51
51
|
--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
|
|
52
52
|
--pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
|
|
53
|
+
--pf-c-dropdown__toggle-progress--Visibility: hidden;
|
|
54
|
+
--pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm);
|
|
53
55
|
--pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
|
|
54
56
|
--pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
|
|
55
57
|
--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-global--spacer--form-element);
|
|
@@ -261,9 +263,14 @@
|
|
|
261
263
|
align-items: center;
|
|
262
264
|
cursor: pointer;
|
|
263
265
|
}
|
|
266
|
+
.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check.pf-m-in-progress {
|
|
267
|
+
--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
|
|
268
|
+
--pf-c-dropdown__toggle-progress--Visibility: visible;
|
|
269
|
+
}
|
|
264
270
|
.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check > input,
|
|
265
271
|
.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check .pf-c-check {
|
|
266
272
|
cursor: pointer;
|
|
273
|
+
visibility: var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
|
|
267
274
|
transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
|
|
268
275
|
}
|
|
269
276
|
.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
|
|
@@ -459,6 +466,14 @@
|
|
|
459
466
|
--pf-c-dropdown__toggle-image--MarginRight: 0;
|
|
460
467
|
}
|
|
461
468
|
|
|
469
|
+
.pf-c-dropdown__toggle-progress {
|
|
470
|
+
position: absolute;
|
|
471
|
+
visibility: var(--pf-c-dropdown__toggle-progress--Visibility);
|
|
472
|
+
}
|
|
473
|
+
.pf-c-dropdown__toggle-progress .pf-c-spinner {
|
|
474
|
+
--pf-c-spinner--diameter: var(--pf-c-dropdown__toggle-progress--c-spinner--diameter);
|
|
475
|
+
}
|
|
476
|
+
|
|
462
477
|
.pf-c-dropdown__menu {
|
|
463
478
|
position: absolute;
|
|
464
479
|
top: var(--pf-c-dropdown__menu--Top);
|
|
@@ -62,6 +62,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
|
|
|
62
62
|
// toggle button
|
|
63
63
|
--pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
|
|
64
64
|
|
|
65
|
+
// toggle progress
|
|
66
|
+
--pf-c-dropdown__toggle-progress--Visibility: hidden;
|
|
67
|
+
--pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm); // should match the checkbox input size
|
|
68
|
+
|
|
65
69
|
// split buttons
|
|
66
70
|
--pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
|
|
67
71
|
--pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
|
|
@@ -341,9 +345,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
|
|
|
341
345
|
align-items: center;
|
|
342
346
|
cursor: pointer;
|
|
343
347
|
|
|
348
|
+
&.pf-m-in-progress {
|
|
349
|
+
--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
|
|
350
|
+
--pf-c-dropdown__toggle-progress--Visibility: visible;
|
|
351
|
+
}
|
|
352
|
+
|
|
344
353
|
> input,
|
|
345
354
|
.pf-c-check {
|
|
346
355
|
cursor: pointer;
|
|
356
|
+
visibility: var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
|
|
347
357
|
transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
|
|
348
358
|
}
|
|
349
359
|
}
|
|
@@ -624,6 +634,16 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
|
|
|
624
634
|
}
|
|
625
635
|
}
|
|
626
636
|
|
|
637
|
+
// Loading spinner
|
|
638
|
+
.pf-c-dropdown__toggle-progress {
|
|
639
|
+
position: absolute;
|
|
640
|
+
visibility: var(--pf-c-dropdown__toggle-progress--Visibility);
|
|
641
|
+
|
|
642
|
+
.pf-c-spinner {
|
|
643
|
+
--pf-c-spinner--diameter: var(--pf-c-dropdown__toggle-progress--c-spinner--diameter);
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
|
|
627
647
|
.pf-c-dropdown__menu {
|
|
628
648
|
position: absolute;
|
|
629
649
|
top: var(--pf-c-dropdown__menu--Top);
|
|
@@ -982,6 +982,220 @@ cssPrefix: pf-c-dropdown
|
|
|
982
982
|
|
|
983
983
|
```
|
|
984
984
|
|
|
985
|
+
### Split button (progress checkbox)
|
|
986
|
+
|
|
987
|
+
```html isBeta
|
|
988
|
+
<div class="pf-c-dropdown">
|
|
989
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
990
|
+
<label
|
|
991
|
+
class="pf-c-dropdown__toggle-check"
|
|
992
|
+
for="dropdown-split-button-progress-toggle-check"
|
|
993
|
+
>
|
|
994
|
+
<input
|
|
995
|
+
type="checkbox"
|
|
996
|
+
id="dropdown-split-button-progress-toggle-check"
|
|
997
|
+
aria-label="Select all"
|
|
998
|
+
/>
|
|
999
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1000
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1001
|
+
<circle
|
|
1002
|
+
class="pf-c-spinner__path"
|
|
1003
|
+
cx="50"
|
|
1004
|
+
cy="50"
|
|
1005
|
+
r="45"
|
|
1006
|
+
fill="none"
|
|
1007
|
+
/>
|
|
1008
|
+
</svg>
|
|
1009
|
+
</span>
|
|
1010
|
+
</label>
|
|
1011
|
+
|
|
1012
|
+
<button
|
|
1013
|
+
class="pf-c-dropdown__toggle-button"
|
|
1014
|
+
type="button"
|
|
1015
|
+
aria-expanded="false"
|
|
1016
|
+
id="dropdown-split-button-progress-toggle-button"
|
|
1017
|
+
aria-label="Dropdown toggle"
|
|
1018
|
+
>
|
|
1019
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1020
|
+
</button>
|
|
1021
|
+
</div>
|
|
1022
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1023
|
+
<li>
|
|
1024
|
+
<button class="pf-c-dropdown__menu-item" type="button">Actions</button>
|
|
1025
|
+
</li>
|
|
1026
|
+
<li>
|
|
1027
|
+
<button
|
|
1028
|
+
class="pf-c-dropdown__menu-item"
|
|
1029
|
+
type="button"
|
|
1030
|
+
disabled
|
|
1031
|
+
>Disabled action</button>
|
|
1032
|
+
</li>
|
|
1033
|
+
<li>
|
|
1034
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1035
|
+
</li>
|
|
1036
|
+
</ul>
|
|
1037
|
+
</div>
|
|
1038
|
+
<div class="pf-c-dropdown">
|
|
1039
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1040
|
+
<label
|
|
1041
|
+
class="pf-c-dropdown__toggle-check pf-m-in-progress"
|
|
1042
|
+
for="dropdown-split-button-in-progress-toggle-check"
|
|
1043
|
+
>
|
|
1044
|
+
<input
|
|
1045
|
+
type="checkbox"
|
|
1046
|
+
id="dropdown-split-button-in-progress-toggle-check"
|
|
1047
|
+
disabled
|
|
1048
|
+
aria-label="Select all"
|
|
1049
|
+
/>
|
|
1050
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1051
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1052
|
+
<circle
|
|
1053
|
+
class="pf-c-spinner__path"
|
|
1054
|
+
cx="50"
|
|
1055
|
+
cy="50"
|
|
1056
|
+
r="45"
|
|
1057
|
+
fill="none"
|
|
1058
|
+
/>
|
|
1059
|
+
</svg>
|
|
1060
|
+
</span>
|
|
1061
|
+
</label>
|
|
1062
|
+
|
|
1063
|
+
<button
|
|
1064
|
+
class="pf-c-dropdown__toggle-button"
|
|
1065
|
+
type="button"
|
|
1066
|
+
aria-expanded="false"
|
|
1067
|
+
id="dropdown-split-button-in-progress-toggle-button"
|
|
1068
|
+
aria-label="Dropdown toggle"
|
|
1069
|
+
>
|
|
1070
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1071
|
+
</button>
|
|
1072
|
+
</div>
|
|
1073
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1074
|
+
<li>
|
|
1075
|
+
<button class="pf-c-dropdown__menu-item" type="button">Actions</button>
|
|
1076
|
+
</li>
|
|
1077
|
+
<li>
|
|
1078
|
+
<button
|
|
1079
|
+
class="pf-c-dropdown__menu-item"
|
|
1080
|
+
type="button"
|
|
1081
|
+
disabled
|
|
1082
|
+
>Disabled action</button>
|
|
1083
|
+
</li>
|
|
1084
|
+
<li>
|
|
1085
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1086
|
+
</li>
|
|
1087
|
+
</ul>
|
|
1088
|
+
</div>
|
|
1089
|
+
<div class="pf-c-dropdown">
|
|
1090
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1091
|
+
<label
|
|
1092
|
+
class="pf-c-dropdown__toggle-check"
|
|
1093
|
+
for="dropdown-split-button-progress-text-toggle-check"
|
|
1094
|
+
>
|
|
1095
|
+
<input
|
|
1096
|
+
type="checkbox"
|
|
1097
|
+
id="dropdown-split-button-progress-text-toggle-check"
|
|
1098
|
+
aria-label="Select all"
|
|
1099
|
+
checked
|
|
1100
|
+
aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
|
|
1101
|
+
/>
|
|
1102
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1103
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1104
|
+
<circle
|
|
1105
|
+
class="pf-c-spinner__path"
|
|
1106
|
+
cx="50"
|
|
1107
|
+
cy="50"
|
|
1108
|
+
r="45"
|
|
1109
|
+
fill="none"
|
|
1110
|
+
/>
|
|
1111
|
+
</svg>
|
|
1112
|
+
</span>
|
|
1113
|
+
<span
|
|
1114
|
+
class="pf-c-dropdown__toggle-text"
|
|
1115
|
+
aria-hidden="true"
|
|
1116
|
+
id="dropdown-split-button-progress-text-toggle-check-text"
|
|
1117
|
+
>10 selected</span>
|
|
1118
|
+
</label>
|
|
1119
|
+
|
|
1120
|
+
<button
|
|
1121
|
+
class="pf-c-dropdown__toggle-button"
|
|
1122
|
+
type="button"
|
|
1123
|
+
aria-expanded="false"
|
|
1124
|
+
id="dropdown-split-button-progress-text-toggle-button"
|
|
1125
|
+
aria-label="Dropdown toggle"
|
|
1126
|
+
>
|
|
1127
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1128
|
+
</button>
|
|
1129
|
+
</div>
|
|
1130
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1131
|
+
<li>
|
|
1132
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select all</button>
|
|
1133
|
+
</li>
|
|
1134
|
+
<li>
|
|
1135
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select none</button>
|
|
1136
|
+
</li>
|
|
1137
|
+
<li>
|
|
1138
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1139
|
+
</li>
|
|
1140
|
+
</ul>
|
|
1141
|
+
</div>
|
|
1142
|
+
<div class="pf-c-dropdown">
|
|
1143
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1144
|
+
<label
|
|
1145
|
+
class="pf-c-dropdown__toggle-check pf-m-in-progress"
|
|
1146
|
+
for="dropdown-split-button-in-progress-text-toggle-check"
|
|
1147
|
+
>
|
|
1148
|
+
<input
|
|
1149
|
+
type="checkbox"
|
|
1150
|
+
id="dropdown-split-button-in-progress-text-toggle-check"
|
|
1151
|
+
disabled
|
|
1152
|
+
aria-label="Select all"
|
|
1153
|
+
checked
|
|
1154
|
+
aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
|
|
1155
|
+
/>
|
|
1156
|
+
<span class="pf-c-dropdown__toggle-progress">
|
|
1157
|
+
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1158
|
+
<circle
|
|
1159
|
+
class="pf-c-spinner__path"
|
|
1160
|
+
cx="50"
|
|
1161
|
+
cy="50"
|
|
1162
|
+
r="45"
|
|
1163
|
+
fill="none"
|
|
1164
|
+
/>
|
|
1165
|
+
</svg>
|
|
1166
|
+
</span>
|
|
1167
|
+
<span
|
|
1168
|
+
class="pf-c-dropdown__toggle-text"
|
|
1169
|
+
aria-hidden="true"
|
|
1170
|
+
id="dropdown-split-button-in-progress-text-toggle-check-text"
|
|
1171
|
+
>10 selected</span>
|
|
1172
|
+
</label>
|
|
1173
|
+
|
|
1174
|
+
<button
|
|
1175
|
+
class="pf-c-dropdown__toggle-button"
|
|
1176
|
+
type="button"
|
|
1177
|
+
aria-expanded="false"
|
|
1178
|
+
id="dropdown-split-button-in-progress-text-toggle-button"
|
|
1179
|
+
aria-label="Dropdown toggle"
|
|
1180
|
+
>
|
|
1181
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1182
|
+
</button>
|
|
1183
|
+
</div>
|
|
1184
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1185
|
+
<li>
|
|
1186
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select all</button>
|
|
1187
|
+
</li>
|
|
1188
|
+
<li>
|
|
1189
|
+
<button class="pf-c-dropdown__menu-item" type="button">Select none</button>
|
|
1190
|
+
</li>
|
|
1191
|
+
<li>
|
|
1192
|
+
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1193
|
+
</li>
|
|
1194
|
+
</ul>
|
|
1195
|
+
</div>
|
|
1196
|
+
|
|
1197
|
+
```
|
|
1198
|
+
|
|
985
1199
|
### Split button (action)
|
|
986
1200
|
|
|
987
1201
|
```html
|
|
@@ -2080,6 +2294,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2080
2294
|
| `.pf-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
|
|
2081
2295
|
| `.pf-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
|
|
2082
2296
|
| `.pf-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
|
|
2297
|
+
| `.pf-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
|
|
2083
2298
|
| `.pf-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
|
|
2084
2299
|
| `.pf-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
|
|
2085
2300
|
| `.pf-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
|
|
@@ -2107,3 +2322,4 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2107
2322
|
| `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
|
|
2108
2323
|
| `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
|
|
2109
2324
|
| `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
|
|
2325
|
+
| `.pf-m-in-progress` | `.pf-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |
|
|
@@ -890,7 +890,7 @@ wrapperTag: div
|
|
|
890
890
|
</div>
|
|
891
891
|
</div>
|
|
892
892
|
</section>
|
|
893
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
893
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
894
894
|
<div class="pf-c-page__main-body">
|
|
895
895
|
<div class="pf-l-gallery pf-m-gutter">
|
|
896
896
|
<div class="pf-c-card">
|
|
@@ -2005,7 +2005,7 @@ wrapperTag: div
|
|
|
2005
2005
|
</div>
|
|
2006
2006
|
</div>
|
|
2007
2007
|
</section>
|
|
2008
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
2008
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2009
2009
|
<div class="pf-c-page__main-body">
|
|
2010
2010
|
<div class="pf-l-gallery pf-m-gutter">
|
|
2011
2011
|
<div class="pf-c-card">
|