@patternfly/patternfly 4.156.2 → 4.158.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.
Files changed (23) hide show
  1. package/components/Dropdown/dropdown.css +89 -12
  2. package/components/Dropdown/dropdown.scss +122 -12
  3. package/components/DualListSelector/dual-list-selector.css +3 -5
  4. package/components/DualListSelector/dual-list-selector.scss +4 -6
  5. package/components/Menu/menu.css +21 -19
  6. package/components/Menu/menu.scss +29 -24
  7. package/components/MenuToggle/menu-toggle.css +48 -1
  8. package/components/MenuToggle/menu-toggle.scss +62 -1
  9. package/components/Nav/nav.css +129 -41
  10. package/components/Nav/nav.scss +164 -51
  11. package/docs/components/Dropdown/examples/Dropdown.css +4 -1
  12. package/docs/components/Dropdown/examples/Dropdown.md +251 -2
  13. package/docs/components/DualListSelector/examples/DualListSelector.md +359 -182
  14. package/docs/components/Menu/examples/Menu.css +2 -1
  15. package/docs/components/Menu/examples/Menu.md +123 -0
  16. package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
  17. package/docs/components/Nav/examples/Navigation.css +7 -6
  18. package/docs/components/Nav/examples/Navigation.md +1368 -12
  19. package/package.json +1 -1
  20. package/patternfly-no-reset.css +290 -78
  21. package/patternfly.css +290 -78
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/components/Dropdown/dropdown.css CHANGED
@@ -15,10 +15,10 @@
15
15
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
16
16
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
17
17
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
18
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
20
18
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
21
19
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
20
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
21
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
22
22
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
23
23
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
24
24
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -32,9 +32,22 @@
32
32
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
33
33
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
34
34
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
35
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
36
35
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
36
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
37
37
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
38
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
39
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
40
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
41
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
42
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
43
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
44
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
45
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
46
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
47
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
48
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
49
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
50
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
38
51
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
39
52
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
40
53
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -48,6 +61,14 @@
48
61
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
49
62
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
50
63
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
64
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
65
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
66
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
67
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
68
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
69
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
70
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
71
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
51
72
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
52
73
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
53
74
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -140,6 +161,9 @@
140
161
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
141
162
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
142
163
  }
164
+ .pf-c-dropdown.pf-m-expanded {
165
+ --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);
166
+ }
143
167
 
144
168
  .pf-c-dropdown__toggle {
145
169
  position: relative;
@@ -205,6 +229,9 @@
205
229
  .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
206
230
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
207
231
  }
232
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
233
+ 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);
234
+ }
208
235
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
209
236
  display: flex;
210
237
  align-items: center;
@@ -222,18 +249,43 @@
222
249
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
223
250
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
224
251
  }
225
- .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
252
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
253
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
254
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
255
+ }
256
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
257
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
258
+ border: 0;
259
+ }
260
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
261
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
262
+ }
263
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
264
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
265
+ }
266
+ .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 {
267
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
268
+ }
269
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
270
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
271
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
272
+ }
273
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
274
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
275
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
276
+ }
277
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
226
278
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
227
279
  }
228
- .pf-c-dropdown__toggle:not(.pf-m-action):active::before, .pf-c-dropdown__toggle:not(.pf-m-action).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
280
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
229
281
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
230
282
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
231
283
  }
232
- .pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
284
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
233
285
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
234
286
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
235
287
  }
236
- .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
288
+ .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
237
289
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
238
290
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
239
291
  }
@@ -249,32 +301,57 @@
249
301
  .pf-c-dropdown__toggle.pf-m-plain::before {
250
302
  border: 0;
251
303
  }
252
- .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
304
+ .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
253
305
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
254
306
  }
255
307
  .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
256
308
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
257
309
  }
258
310
  .pf-c-dropdown__toggle.pf-m-primary {
259
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
260
311
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
312
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
261
313
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
262
314
  }
315
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
316
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
317
+ }
263
318
  .pf-c-dropdown__toggle.pf-m-primary::before {
264
319
  border: 0;
265
320
  }
266
321
  .pf-c-dropdown__toggle.pf-m-primary:hover {
267
322
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
268
323
  }
269
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
270
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
271
- }
272
324
  .pf-c-dropdown__toggle.pf-m-primary:focus {
273
325
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
274
326
  }
327
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
328
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
329
+ }
275
330
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
276
331
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
277
332
  }
333
+ .pf-c-dropdown__toggle.pf-m-secondary {
334
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
335
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
336
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
337
+ }
338
+ .pf-c-dropdown__toggle.pf-m-secondary::before {
339
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
340
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
341
+ }
342
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
343
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
344
+ }
345
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
346
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
347
+ }
348
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
349
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
350
+ }
351
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
352
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
353
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
354
+ }
278
355
  .pf-c-dropdown__toggle > .pf-c-badge {
279
356
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
280
357
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
package/components/Dropdown/dropdown.scss CHANGED
@@ -18,27 +18,46 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
18
18
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
19
19
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
20
20
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
21
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
22
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
23
21
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
24
22
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
23
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
24
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
25
25
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
26
26
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
27
27
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
28
+
29
+ // Plain
28
30
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-global--Color--200);
29
31
  --pf-c-dropdown__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
30
32
  --pf-c-dropdown__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
31
33
  --pf-c-dropdown__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
32
34
  --pf-c-dropdown__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
33
35
  --pf-c-dropdown__toggle--m-plain--child--LineHeight: normal; // remove at breaking change
36
+
37
+ // Primary
34
38
  --pf-c-dropdown__toggle--m-primary--Color: var(--pf-global--Color--light-100);
35
39
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
36
40
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
37
41
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
38
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
39
42
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
43
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
40
44
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
41
45
 
46
+ // Secondary
47
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
48
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
49
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
50
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
51
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
52
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
53
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
54
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
55
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
56
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
57
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
58
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
59
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
60
+
42
61
  // toggle button
43
62
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
44
63
 
@@ -56,6 +75,18 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
56
75
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: #{pf-size-prem(-1px)};
57
76
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
58
77
 
78
+ // Split button
79
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
80
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
81
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
82
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
83
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
84
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
85
+
86
+ // Split button, action, primary
87
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
88
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
89
+
59
90
  // Toggle Arrow
60
91
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
61
92
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -181,6 +212,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
181
212
  }
182
213
  }
183
214
  }
215
+
216
+ &.pf-m-expanded {
217
+ --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);
218
+ }
184
219
  }
185
220
 
186
221
  .pf-c-dropdown__toggle {
@@ -260,6 +295,14 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
260
295
  }
261
296
  // stylelint-enable
262
297
  }
298
+
299
+ &.pf-m-primary {
300
+ // stylelint-disable max-nesting-depth
301
+ > :not(:first-child) {
302
+ 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);
303
+ }
304
+ // stylelint-enable
305
+ }
263
306
  }
264
307
 
265
308
  .pf-c-dropdown__toggle-check {
@@ -284,15 +327,48 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
284
327
  }
285
328
  }
286
329
 
287
- &:not(.pf-m-action):hover,
330
+ &.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
331
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
332
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
333
+
334
+ > * {
335
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
336
+ border: 0;
337
+
338
+ &:hover {
339
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
340
+ }
341
+
342
+ &:focus {
343
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
344
+ }
345
+
346
+ &:active,
347
+ &.pf-m-active {
348
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
349
+ }
350
+ }
351
+
352
+ > :first-child {
353
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
354
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
355
+ }
356
+
357
+ > :last-child {
358
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
359
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
360
+ }
361
+ }
362
+
363
+ &:not(.pf-m-action):not(.pf-m-secondary):hover,
288
364
  &.pf-m-action .pf-c-dropdown__toggle-button:hover {
289
365
  &::before {
290
366
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
291
367
  }
292
368
  }
293
369
 
294
- &:not(.pf-m-action):active,
295
- &:not(.pf-m-action).pf-m-active,
370
+ &:not(.pf-m-action):not(.pf-m-secondary):active,
371
+ &:not(.pf-m-action):not(.pf-m-secondary).pf-m-active,
296
372
  &.pf-m-action .pf-c-dropdown__toggle-button:active {
297
373
  &::before {
298
374
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
@@ -301,7 +377,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
301
377
  }
302
378
  }
303
379
 
304
- &:not(.pf-m-action):focus,
380
+ &:not(.pf-m-action):not(.pf-m-secondary):focus,
305
381
  &.pf-m-action .pf-c-dropdown__toggle-button:focus {
306
382
  &::before {
307
383
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
@@ -310,7 +386,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
310
386
  }
311
387
  }
312
388
 
313
- .pf-m-expanded > &:not(.pf-m-action),
389
+ .pf-m-expanded > &:not(.pf-m-action):not(.pf-m-secondary),
314
390
  .pf-m-expanded > &.pf-m-action .pf-c-dropdown__toggle-button {
315
391
  &::before {
316
392
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
@@ -336,9 +412,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
336
412
  }
337
413
 
338
414
  &:hover,
415
+ &:focus,
339
416
  &:active,
340
417
  &.pf-m-active,
341
- &:focus,
342
418
  .pf-m-expanded > & {
343
419
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
344
420
  }
@@ -350,8 +426,12 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
350
426
  }
351
427
 
352
428
  &.pf-m-primary {
353
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
354
429
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
430
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
431
+
432
+ &:not(.pf-m-disabled) {
433
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
434
+ }
355
435
 
356
436
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
357
437
 
@@ -363,17 +443,47 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
363
443
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
364
444
  }
365
445
 
446
+ &:focus {
447
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
448
+ }
449
+
366
450
  &:active,
367
451
  &.pf-m-active {
368
452
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
369
453
  }
370
454
 
455
+ .pf-m-expanded > & {
456
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
457
+ }
458
+ }
459
+
460
+ &.pf-m-secondary {
461
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
462
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
463
+
464
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
465
+
466
+ &::before {
467
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
468
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
469
+ }
470
+
471
+ &:hover {
472
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
473
+ }
474
+
371
475
  &:focus {
372
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
476
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
477
+ }
478
+
479
+ &:active,
480
+ &.pf-m-active {
481
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
373
482
  }
374
483
 
375
484
  .pf-m-expanded > & {
376
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
485
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
486
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
377
487
  }
378
488
  }
379
489
 
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -139,6 +139,9 @@
139
139
  overflow-anchor: none;
140
140
  }
141
141
 
142
+ .pf-c-dual-list-selector__list-item:focus {
143
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
144
+ }
142
145
  .pf-c-dual-list-selector__list-item.pf-m-expandable {
143
146
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
144
147
  }
@@ -159,9 +162,6 @@
159
162
  .pf-c-dual-list-selector__list-item-row:hover {
160
163
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
161
164
  }
162
- .pf-c-dual-list-selector__list-item-row:focus-within {
163
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
164
- }
165
165
  .pf-c-dual-list-selector__list-item-row.pf-m-selected {
166
166
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
167
167
  }
@@ -205,9 +205,7 @@
205
205
  position: relative;
206
206
  width: 100%;
207
207
  padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
208
- text-align: left;
209
208
  cursor: pointer;
210
- border: 0;
211
209
  }
212
210
 
213
211
  .pf-c-dual-list-selector__item-count {
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -183,6 +183,10 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
183
183
  }
184
184
 
185
185
  .pf-c-dual-list-selector__list-item {
186
+ &:focus {
187
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
188
+ }
189
+
186
190
  &.pf-m-expandable {
187
191
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
188
192
  }
@@ -208,10 +212,6 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
208
212
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
209
213
  }
210
214
 
211
- &:focus-within {
212
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
213
- }
214
-
215
215
  &.pf-m-selected {
216
216
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
217
217
 
@@ -265,9 +265,7 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
265
265
  position: relative;
266
266
  width: 100%;
267
267
  padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
268
- text-align: left;
269
268
  cursor: pointer;
270
- border: 0;
271
269
  }
272
270
 
273
271
  .pf-c-dual-list-selector__item-count {
package/components/Menu/menu.css CHANGED
@@ -80,6 +80,8 @@
80
80
  --pf-c-menu--Width: auto;
81
81
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
82
82
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
83
+ --pf-c-menu--m-flyout__menu--Right: auto;
84
+ --pf-c-menu--m-flyout__menu--Bottom: auto;
83
85
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
84
86
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
85
87
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -199,9 +201,6 @@
199
201
  background-color: var(--pf-c-menu--BackgroundColor);
200
202
  box-shadow: var(--pf-c-menu--BoxShadow);
201
203
  }
202
- .pf-c-menu .pf-c-menu__content {
203
- overflow-y: auto;
204
- }
205
204
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
206
205
  overflow: visible;
207
206
  }
@@ -209,28 +208,23 @@
209
208
  margin-top: var(--pf-c-menu--c-divider--MarginTop);
210
209
  margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
211
210
  }
212
- .pf-c-menu.pf-m-flyout {
213
- overflow: visible;
214
- }
215
- .pf-c-menu.pf-m-flyout .pf-c-menu {
211
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
216
212
  position: absolute;
217
213
  top: var(--pf-c-menu--m-flyout__menu--Top);
218
- right: auto;
214
+ right: var(--pf-c-menu--m-flyout__menu--Right);
215
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
219
216
  left: var(--pf-c-menu--m-flyout__menu--Left);
220
217
  }
221
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-top {
222
- top: auto;
223
- bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
224
- }
225
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-left {
226
- right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
227
- left: auto;
228
- }
229
- .pf-c-menu.pf-m-flyout .pf-c-menu__content {
218
+ .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
230
219
  overflow-y: visible;
231
220
  }
232
- .pf-c-menu.pf-m-flyout .pf-c-menu__list-item {
233
- position: relative;
221
+ .pf-c-menu.pf-m-top {
222
+ --pf-c-menu--m-flyout__menu--Top: auto;
223
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
224
+ }
225
+ .pf-c-menu.pf-m-left {
226
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
227
+ --pf-c-menu--m-flyout__menu--Left: auto;
234
228
  }
235
229
  .pf-c-menu.pf-m-drilldown {
236
230
  display: flex;
@@ -264,6 +258,10 @@
264
258
  overflow: hidden;
265
259
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
266
260
  }
261
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
262
+ --pf-c-menu__list--PaddingTop: 0;
263
+ --pf-c-menu__list--PaddingBottom: 0;
264
+ }
267
265
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
268
266
  z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
269
267
  }
@@ -298,6 +296,9 @@
298
296
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
299
297
  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
300
298
  }
299
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
300
+ overflow-y: auto;
301
+ }
301
302
 
302
303
  .pf-c-menu__breadcrumb {
303
304
  display: flex;
@@ -364,6 +365,7 @@
364
365
 
365
366
  .pf-c-menu__list-item {
366
367
  --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
368
+ position: relative;
367
369
  color: var(--pf-c-menu__list-item--Color);
368
370
  background-color: var(--pf-c-menu__list-item--BackgroundColor);
369
371
  }