@patternfly/patternfly 4.157.0 → 4.157.1

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.
Files changed (9) hide show
  1. package/components/Dropdown/dropdown.css +43 -1
  2. package/components/Dropdown/dropdown.scss +62 -1
  3. package/docs/components/Dropdown/examples/Dropdown.css +3 -1
  4. package/docs/components/Dropdown/examples/Dropdown.md +157 -2
  5. package/package.json +1 -1
  6. package/patternfly-no-reset.css +43 -1
  7. package/patternfly.css +43 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Dropdown/dropdown.css CHANGED
@@ -48,6 +48,14 @@
48
48
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
49
49
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
50
50
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
51
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
52
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
53
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
54
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
55
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
56
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
57
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
58
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
51
59
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
52
60
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
53
61
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -140,6 +148,9 @@
140
148
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
141
149
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
142
150
  }
151
+ .pf-c-dropdown.pf-m-expanded {
152
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
153
+ }
143
154
 
144
155
  .pf-c-dropdown__toggle {
145
156
  position: relative;
@@ -205,6 +216,9 @@
205
216
  .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
206
217
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
207
218
  }
219
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
220
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
221
+ }
208
222
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
209
223
  display: flex;
210
224
  align-items: center;
@@ -222,6 +236,31 @@
222
236
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
223
237
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
224
238
  }
239
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
240
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
241
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
242
+ }
243
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
244
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
245
+ border: 0;
246
+ }
247
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
248
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
249
+ }
250
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
251
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
252
+ }
253
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
254
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
255
+ }
256
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
257
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
258
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
259
+ }
260
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
261
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
262
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
263
+ }
225
264
  .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
226
265
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
227
266
  }
@@ -256,10 +295,13 @@
256
295
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
257
296
  }
258
297
  .pf-c-dropdown__toggle.pf-m-primary {
259
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
260
298
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
299
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
261
300
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
262
301
  }
302
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
303
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
304
+ }
263
305
  .pf-c-dropdown__toggle.pf-m-primary::before {
264
306
  border: 0;
265
307
  }
package/components/Dropdown/dropdown.scss CHANGED
@@ -56,6 +56,18 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
56
56
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: #{pf-size-prem(-1px)};
57
57
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
58
58
 
59
+ // Split button
60
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
61
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
62
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
63
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
64
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
65
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
66
+
67
+ // Split button, action, primary
68
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
69
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
70
+
59
71
  // Toggle Arrow
60
72
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
61
73
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -181,6 +193,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
181
193
  }
182
194
  }
183
195
  }
196
+
197
+ &.pf-m-expanded {
198
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
199
+ }
184
200
  }
185
201
 
186
202
  .pf-c-dropdown__toggle {
@@ -260,6 +276,14 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
260
276
  }
261
277
  // stylelint-enable
262
278
  }
279
+
280
+ &.pf-m-primary {
281
+ // stylelint-disable max-nesting-depth
282
+ > :not(:first-child) {
283
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
284
+ }
285
+ // stylelint-enable
286
+ }
263
287
  }
264
288
 
265
289
  .pf-c-dropdown__toggle-check {
@@ -284,6 +308,39 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
284
308
  }
285
309
  }
286
310
 
311
+ &.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
312
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
313
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
314
+
315
+ > * {
316
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
317
+ border: 0;
318
+
319
+ &:hover {
320
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
321
+ }
322
+
323
+ &:focus {
324
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
325
+ }
326
+
327
+ &:active,
328
+ &.pf-m-active {
329
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
330
+ }
331
+ }
332
+
333
+ > :first-child {
334
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
335
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
336
+ }
337
+
338
+ > :last-child {
339
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
340
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
341
+ }
342
+ }
343
+
287
344
  &:not(.pf-m-action):hover,
288
345
  &.pf-m-action .pf-c-dropdown__toggle-button:hover {
289
346
  &::before {
@@ -350,8 +407,12 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
350
407
  }
351
408
 
352
409
  &.pf-m-primary {
353
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
354
410
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
411
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
412
+
413
+ &:not(.pf-m-disabled) {
414
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
415
+ }
355
416
 
356
417
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
357
418
 
package/docs/components/Dropdown/examples/Dropdown.css CHANGED
@@ -39,7 +39,9 @@
39
39
  }
40
40
 
41
41
  #ws-core-c-dropdown-split-button-checkbox,
42
- #ws-core-c-dropdown-split-button-action {
42
+ #ws-core-c-dropdown-split-button-action,
43
+ #ws-core-c-dropdown-split-button-primary-checkbox,
44
+ #ws-core-c-dropdown-split-button-primary-action {
43
45
  min-height: 210px;
44
46
  }
45
47
 
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -715,7 +715,6 @@ cssPrefix: pf-c-dropdown
715
715
  </li>
716
716
  </ul>
717
717
  </div>
718
-
719
718
  <div class="pf-c-dropdown">
720
719
  <div class="pf-c-dropdown__toggle pf-m-split-button">
721
720
  <label
@@ -755,7 +754,6 @@ cssPrefix: pf-c-dropdown
755
754
  </li>
756
755
  </ul>
757
756
  </div>
758
-
759
757
  <div class="pf-c-dropdown pf-m-expanded">
760
758
  <div class="pf-c-dropdown__toggle pf-m-split-button">
761
759
  <label
@@ -1003,6 +1001,163 @@ cssPrefix: pf-c-dropdown
1003
1001
 
1004
1002
  ```
1005
1003
 
1004
+ ### Split button, primary (action)
1005
+
1006
+ ```html
1007
+ <div class="pf-c-dropdown">
1008
+ <div class="pf-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action">
1009
+ <button
1010
+ class="pf-c-dropdown__toggle-button"
1011
+ type="button"
1012
+ aria-label="Dropdown toggle"
1013
+ >Action</button>
1014
+
1015
+ <button
1016
+ class="pf-c-dropdown__toggle-button"
1017
+ type="button"
1018
+ aria-expanded="false"
1019
+ id="dropdown-split-button-action-primary-toggle-button"
1020
+ aria-label="Dropdown toggle"
1021
+ >
1022
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1023
+ </button>
1024
+ </div>
1025
+ <ul class="pf-c-dropdown__menu" hidden>
1026
+ <li>
1027
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1028
+ </li>
1029
+ <li>
1030
+ <button
1031
+ class="pf-c-dropdown__menu-item"
1032
+ type="button"
1033
+ disabled
1034
+ >Disabled action</button>
1035
+ </li>
1036
+ <li>
1037
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1038
+ </li>
1039
+ </ul>
1040
+ </div>
1041
+ <div class="pf-c-dropdown pf-m-expanded">
1042
+ <div class="pf-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action">
1043
+ <button
1044
+ class="pf-c-dropdown__toggle-button"
1045
+ type="button"
1046
+ aria-label="Dropdown toggle"
1047
+ >Action</button>
1048
+
1049
+ <button
1050
+ class="pf-c-dropdown__toggle-button"
1051
+ type="button"
1052
+ aria-expanded="true"
1053
+ id="dropdown-split-button-action-primary-expanded-toggle-button"
1054
+ aria-label="Dropdown toggle"
1055
+ >
1056
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1057
+ </button>
1058
+ </div>
1059
+ <ul class="pf-c-dropdown__menu">
1060
+ <li>
1061
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1062
+ </li>
1063
+ <li>
1064
+ <button
1065
+ class="pf-c-dropdown__menu-item"
1066
+ type="button"
1067
+ disabled
1068
+ >Disabled action</button>
1069
+ </li>
1070
+ <li>
1071
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1072
+ </li>
1073
+ </ul>
1074
+ </div>
1075
+ <div class="pf-c-dropdown">
1076
+ <div class="pf-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action">
1077
+ <button
1078
+ class="pf-c-dropdown__toggle-button"
1079
+ type="button"
1080
+ aria-label="Settings"
1081
+ >
1082
+ <i class="fas fa-cog" aria-hidden="true"></i>
1083
+ </button>
1084
+
1085
+ <button
1086
+ class="pf-c-dropdown__toggle-button"
1087
+ type="button"
1088
+ aria-expanded="false"
1089
+ id="dropdown-split-button-action-primary-icon-toggle-button"
1090
+ aria-label="Dropdown toggle"
1091
+ >
1092
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1093
+ </button>
1094
+ </div>
1095
+ <ul class="pf-c-dropdown__menu" hidden>
1096
+ <li>
1097
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1098
+ </li>
1099
+ <li>
1100
+ <button
1101
+ class="pf-c-dropdown__menu-item"
1102
+ type="button"
1103
+ disabled
1104
+ >Disabled action</button>
1105
+ </li>
1106
+ <li>
1107
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1108
+ </li>
1109
+ </ul>
1110
+ </div>
1111
+ <div class="pf-c-dropdown pf-m-expanded">
1112
+ <div class="pf-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action">
1113
+ <button
1114
+ class="pf-c-dropdown__toggle-button"
1115
+ type="button"
1116
+ aria-label="Settings"
1117
+ >
1118
+ <i class="fas fa-cog" aria-hidden="true"></i>
1119
+ </button>
1120
+
1121
+ <button
1122
+ class="pf-c-dropdown__toggle-button"
1123
+ type="button"
1124
+ aria-expanded="true"
1125
+ id="dropdown-split-button-action-primary-icon-expanded-toggle-button"
1126
+ aria-label="Dropdown toggle"
1127
+ >
1128
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1129
+ </button>
1130
+ </div>
1131
+ <ul class="pf-c-dropdown__menu">
1132
+ <li>
1133
+ <button class="pf-c-dropdown__menu-item pf-m-icon" type="button">
1134
+ <span class="pf-c-dropdown__menu-item-icon">
1135
+ <i class="fas fa-cog" aria-hidden="true"></i>
1136
+ </span>
1137
+ Actions
1138
+ </button>
1139
+ </li>
1140
+ <li>
1141
+ <button class="pf-c-dropdown__menu-item pf-m-icon" type="button" disabled>
1142
+ <span class="pf-c-dropdown__menu-item-icon">
1143
+ <i class="fas fa-bell" aria-hidden="true"></i>
1144
+ </span>
1145
+ Disabled action
1146
+ </button>
1147
+ </li>
1148
+ <li>
1149
+ <button class="pf-c-dropdown__menu-item pf-m-icon" type="button">
1150
+ <span class="pf-c-dropdown__menu-item-icon">
1151
+ <i class="fas fa-cubes" aria-hidden="true"></i>
1152
+ </span>
1153
+ Other action
1154
+ </button>
1155
+ </li>
1156
+ </ul>
1157
+ </div>
1158
+
1159
+ ```
1160
+
1006
1161
  ### With groups
1007
1162
 
1008
1163
  ```html
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.157.0",
4
+ "version": "4.157.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -12174,6 +12174,14 @@ label.pf-c-check, .pf-c-check__label,
12174
12174
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
12175
12175
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
12176
12176
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
12177
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
12178
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
12179
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
12180
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
12181
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
12182
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
12183
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
12184
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
12177
12185
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
12178
12186
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
12179
12187
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -12266,6 +12274,9 @@ label.pf-c-check, .pf-c-check__label,
12266
12274
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
12267
12275
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
12268
12276
  }
12277
+ .pf-c-dropdown.pf-m-expanded {
12278
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
12279
+ }
12269
12280
 
12270
12281
  .pf-c-dropdown__toggle {
12271
12282
  position: relative;
@@ -12331,6 +12342,9 @@ label.pf-c-check, .pf-c-check__label,
12331
12342
  .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
12332
12343
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
12333
12344
  }
12345
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
12346
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
12347
+ }
12334
12348
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
12335
12349
  display: flex;
12336
12350
  align-items: center;
@@ -12348,6 +12362,31 @@ label.pf-c-check, .pf-c-check__label,
12348
12362
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
12349
12363
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
12350
12364
  }
12365
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
12366
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
12367
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
12368
+ }
12369
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
12370
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
12371
+ border: 0;
12372
+ }
12373
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
12374
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
12375
+ }
12376
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
12377
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
12378
+ }
12379
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
12380
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
12381
+ }
12382
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
12383
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12384
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12385
+ }
12386
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
12387
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12388
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12389
+ }
12351
12390
  .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
12352
12391
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
12353
12392
  }
@@ -12382,10 +12421,13 @@ label.pf-c-check, .pf-c-check__label,
12382
12421
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
12383
12422
  }
12384
12423
  .pf-c-dropdown__toggle.pf-m-primary {
12385
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12386
12424
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
12425
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12387
12426
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
12388
12427
  }
12428
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
12429
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12430
+ }
12389
12431
  .pf-c-dropdown__toggle.pf-m-primary::before {
12390
12432
  border: 0;
12391
12433
  }
package/patternfly.css CHANGED
@@ -12310,6 +12310,14 @@ label.pf-c-check, .pf-c-check__label,
12310
12310
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
12311
12311
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
12312
12312
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
12313
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
12314
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
12315
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
12316
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
12317
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
12318
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
12319
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
12320
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
12313
12321
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
12314
12322
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
12315
12323
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -12402,6 +12410,9 @@ label.pf-c-check, .pf-c-check__label,
12402
12410
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
12403
12411
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
12404
12412
  }
12413
+ .pf-c-dropdown.pf-m-expanded {
12414
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
12415
+ }
12405
12416
 
12406
12417
  .pf-c-dropdown__toggle {
12407
12418
  position: relative;
@@ -12467,6 +12478,9 @@ label.pf-c-check, .pf-c-check__label,
12467
12478
  .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
12468
12479
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
12469
12480
  }
12481
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
12482
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
12483
+ }
12470
12484
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
12471
12485
  display: flex;
12472
12486
  align-items: center;
@@ -12484,6 +12498,31 @@ label.pf-c-check, .pf-c-check__label,
12484
12498
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
12485
12499
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
12486
12500
  }
12501
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
12502
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
12503
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
12504
+ }
12505
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
12506
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
12507
+ border: 0;
12508
+ }
12509
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
12510
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
12511
+ }
12512
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
12513
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
12514
+ }
12515
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
12516
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
12517
+ }
12518
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
12519
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12520
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12521
+ }
12522
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
12523
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12524
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12525
+ }
12487
12526
  .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
12488
12527
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
12489
12528
  }
@@ -12518,10 +12557,13 @@ label.pf-c-check, .pf-c-check__label,
12518
12557
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
12519
12558
  }
12520
12559
  .pf-c-dropdown__toggle.pf-m-primary {
12521
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12522
12560
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
12561
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12523
12562
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
12524
12563
  }
12564
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
12565
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12566
+ }
12525
12567
  .pf-c-dropdown__toggle.pf-m-primary::before {
12526
12568
  border: 0;
12527
12569
  }