@patternfly/patternfly 4.157.1 → 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 (12) hide show
  1. package/components/Dropdown/dropdown.css +46 -11
  2. package/components/Dropdown/dropdown.scss +60 -11
  3. package/components/MenuToggle/menu-toggle.css +48 -1
  4. package/components/MenuToggle/menu-toggle.scss +62 -1
  5. package/docs/components/Dropdown/examples/Dropdown.css +1 -0
  6. package/docs/components/Dropdown/examples/Dropdown.md +94 -0
  7. package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
  8. package/package.json +1 -1
  9. package/patternfly-no-reset.css +94 -12
  10. package/patternfly.css +94 -12
  11. package/patternfly.min.css +1 -1
  12. 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);
@@ -261,18 +274,18 @@
261
274
  border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
262
275
  border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
263
276
  }
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 {
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 {
265
278
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
266
279
  }
267
- .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 {
268
281
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
269
282
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
270
283
  }
271
- .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 {
272
285
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
273
286
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
274
287
  }
275
- .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 {
276
289
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
277
290
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
278
291
  }
@@ -288,7 +301,7 @@
288
301
  .pf-c-dropdown__toggle.pf-m-plain::before {
289
302
  border: 0;
290
303
  }
291
- .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 {
292
305
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
293
306
  }
294
307
  .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
@@ -308,15 +321,37 @@
308
321
  .pf-c-dropdown__toggle.pf-m-primary:hover {
309
322
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
310
323
  }
311
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
312
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
313
- }
314
324
  .pf-c-dropdown__toggle.pf-m-primary:focus {
315
325
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
316
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
+ }
317
330
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
318
331
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
319
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
+ }
320
355
  .pf-c-dropdown__toggle > .pf-c-badge {
321
356
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
322
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
 
@@ -341,15 +360,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
341
360
  }
342
361
  }
343
362
 
344
- &:not(.pf-m-action):hover,
363
+ &:not(.pf-m-action):not(.pf-m-secondary):hover,
345
364
  &.pf-m-action .pf-c-dropdown__toggle-button:hover {
346
365
  &::before {
347
366
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
348
367
  }
349
368
  }
350
369
 
351
- &:not(.pf-m-action):active,
352
- &: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,
353
372
  &.pf-m-action .pf-c-dropdown__toggle-button:active {
354
373
  &::before {
355
374
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
@@ -358,7 +377,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
358
377
  }
359
378
  }
360
379
 
361
- &:not(.pf-m-action):focus,
380
+ &:not(.pf-m-action):not(.pf-m-secondary):focus,
362
381
  &.pf-m-action .pf-c-dropdown__toggle-button:focus {
363
382
  &::before {
364
383
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
@@ -367,7 +386,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
367
386
  }
368
387
  }
369
388
 
370
- .pf-m-expanded > &:not(.pf-m-action),
389
+ .pf-m-expanded > &:not(.pf-m-action):not(.pf-m-secondary),
371
390
  .pf-m-expanded > &.pf-m-action .pf-c-dropdown__toggle-button {
372
391
  &::before {
373
392
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
@@ -393,9 +412,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
393
412
  }
394
413
 
395
414
  &:hover,
415
+ &:focus,
396
416
  &:active,
397
417
  &.pf-m-active,
398
- &:focus,
399
418
  .pf-m-expanded > & {
400
419
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
401
420
  }
@@ -424,17 +443,47 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
424
443
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
425
444
  }
426
445
 
446
+ &:focus {
447
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
448
+ }
449
+
427
450
  &:active,
428
451
  &.pf-m-active {
429
452
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
430
453
  }
431
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
+
432
475
  &:focus {
433
- --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);
434
482
  }
435
483
 
436
484
  .pf-m-expanded > & {
437
- --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);
438
487
  }
439
488
  }
440
489
 
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -33,14 +33,28 @@
33
33
  --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
34
34
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
35
35
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
36
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
37
36
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
37
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
38
38
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
39
39
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
40
40
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
41
41
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
42
42
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
43
43
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
44
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
45
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
46
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
47
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
48
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
49
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
50
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
51
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
52
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
53
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
54
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
55
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
56
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
57
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
44
58
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
45
59
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
46
60
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -100,6 +114,39 @@
100
114
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
101
115
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
102
116
  }
117
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
118
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
119
+ }
120
+ .pf-c-menu-toggle.pf-m-secondary {
121
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
122
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
123
+ }
124
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
125
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
126
+ }
127
+ .pf-c-menu-toggle.pf-m-secondary::before {
128
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
129
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
130
+ }
131
+ .pf-c-menu-toggle.pf-m-secondary::after {
132
+ border: 0;
133
+ }
134
+ .pf-c-menu-toggle.pf-m-secondary:hover {
135
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
136
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
137
+ }
138
+ .pf-c-menu-toggle.pf-m-secondary:focus {
139
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
140
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
141
+ }
142
+ .pf-c-menu-toggle.pf-m-secondary:active {
143
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
144
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
145
+ }
146
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
147
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
148
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
149
+ }
103
150
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
104
151
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
105
152
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -49,8 +49,8 @@
49
49
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
50
50
 
51
51
  // Primary
52
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
53
52
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
53
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
54
54
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
55
55
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
56
56
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -58,6 +58,22 @@
58
58
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
59
59
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
60
60
 
61
+ // Secondary
62
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
63
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
64
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
65
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
66
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
67
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
68
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
69
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
70
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
71
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
72
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
73
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
74
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
75
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
76
+
61
77
  // Plain
62
78
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
63
79
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
@@ -134,6 +150,51 @@
134
150
  --pf-c-menu-toggle--active--BackgroundColor: var(--pf-c-menu-toggle--m-primary--active--BackgroundColor);
135
151
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
136
152
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
153
+
154
+
155
+ &,
156
+ &::before {
157
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
158
+ }
159
+ }
160
+
161
+ &.pf-m-secondary {
162
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
163
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
164
+
165
+ &,
166
+ &::before {
167
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
168
+ }
169
+
170
+ &::before {
171
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
172
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
173
+ }
174
+
175
+ &::after {
176
+ border: 0;
177
+ }
178
+
179
+ &:hover {
180
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
181
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
182
+ }
183
+
184
+ &:focus {
185
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
186
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
187
+ }
188
+
189
+ &:active {
190
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
191
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
192
+ }
193
+
194
+ &.pf-m-expanded {
195
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
196
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
197
+ }
137
198
  }
138
199
 
139
200
  &.pf-m-plain:not(.pf-m-text) {
package/docs/components/Dropdown/examples/Dropdown.css CHANGED
@@ -7,6 +7,7 @@
7
7
  #ws-core-c-dropdown-align-on-different-breakpoint,
8
8
  #ws-core-c-dropdown-align-top,
9
9
  #ws-core-c-dropdown-primary-toggle,
10
+ #ws-core-c-dropdown-secondary-toggle,
10
11
  #ws-core-c-dropdown-menu-item-icons,
11
12
  #ws-core-c-dropdown-aria-disabled-items {
12
13
  min-height: 310px;
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -1437,6 +1437,99 @@ The dropdown panel is provided for flexibility in allowing various content withi
1437
1437
 
1438
1438
  ```
1439
1439
 
1440
+ ### Secondary toggle
1441
+
1442
+ ```html
1443
+ <div class="pf-c-dropdown">
1444
+ <button
1445
+ class="pf-c-dropdown__toggle pf-m-secondary"
1446
+ id="dropdown-secondary-toggle-button"
1447
+ aria-expanded="false"
1448
+ type="button"
1449
+ >
1450
+ <span class="pf-c-dropdown__toggle-text">Collapsed dropdown</span>
1451
+ <span class="pf-c-dropdown__toggle-icon">
1452
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1453
+ </span>
1454
+ </button>
1455
+ <ul
1456
+ class="pf-c-dropdown__menu"
1457
+ aria-labelledby="dropdown-secondary-toggle-button"
1458
+ hidden
1459
+ >
1460
+ <li>
1461
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1462
+ </li>
1463
+ <li>
1464
+ <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1465
+ </li>
1466
+ <li>
1467
+ <a
1468
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1469
+ href="#"
1470
+ aria-disabled="true"
1471
+ tabindex="-1"
1472
+ >Disabled link</a>
1473
+ </li>
1474
+ <li>
1475
+ <button
1476
+ class="pf-c-dropdown__menu-item"
1477
+ type="button"
1478
+ disabled
1479
+ >Disabled action</button>
1480
+ </li>
1481
+ <li class="pf-c-divider" role="separator"></li>
1482
+ <li>
1483
+ <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1484
+ </li>
1485
+ </ul>
1486
+ </div>
1487
+ <div class="pf-c-dropdown pf-m-expanded">
1488
+ <button
1489
+ class="pf-c-dropdown__toggle pf-m-secondary"
1490
+ id="dropdown-secondary-toggle-expanded-button"
1491
+ aria-expanded="true"
1492
+ type="button"
1493
+ >
1494
+ <span class="pf-c-dropdown__toggle-text">Expanded dropdown</span>
1495
+ <span class="pf-c-dropdown__toggle-icon">
1496
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1497
+ </span>
1498
+ </button>
1499
+ <ul
1500
+ class="pf-c-dropdown__menu"
1501
+ aria-labelledby="dropdown-secondary-toggle-expanded-button"
1502
+ >
1503
+ <li>
1504
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1505
+ </li>
1506
+ <li>
1507
+ <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1508
+ </li>
1509
+ <li>
1510
+ <a
1511
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1512
+ href="#"
1513
+ aria-disabled="true"
1514
+ tabindex="-1"
1515
+ >Disabled link</a>
1516
+ </li>
1517
+ <li>
1518
+ <button
1519
+ class="pf-c-dropdown__menu-item"
1520
+ type="button"
1521
+ disabled
1522
+ >Disabled action</button>
1523
+ </li>
1524
+ <li class="pf-c-divider" role="separator"></li>
1525
+ <li>
1526
+ <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1527
+ </li>
1528
+ </ul>
1529
+ </div>
1530
+
1531
+ ```
1532
+
1440
1533
  ### Dropdown with image and text
1441
1534
 
1442
1535
  ```html
@@ -1612,6 +1705,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
1612
1705
  | `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
1613
1706
  | `.pf-m-plain` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with no border. |
1614
1707
  | `.pf-m-primary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
1708
+ | `.pf-m-secondary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
1615
1709
  | `.pf-m-full-height` | `.pf-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
1616
1710
  | `.pf-m-disabled` | `a.pf-c-dropdown__menu-item` | Modifies to display the menu item as disabled. This applies to `a.pf-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__menu-item`. |
1617
1711
  | `.pf-m-disabled` | `div.pf-c-dropdown__toggle` | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-dropdown__toggle`. |
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -151,6 +151,70 @@ cssPrefix: pf-c-menu-toggle
151
151
 
152
152
  ```
153
153
 
154
+ ### Secondary
155
+
156
+ ```html
157
+ <button
158
+ class="pf-c-menu-toggle pf-m-secondary"
159
+ type="button"
160
+ aria-expanded="false"
161
+ >
162
+ <span class="pf-c-menu-toggle__text">Collapsed</span>
163
+ <span class="pf-c-menu-toggle__controls">
164
+ <span class="pf-c-menu-toggle__toggle-icon">
165
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
166
+ </span>
167
+ </span>
168
+ </button>
169
+
170
+ &nbsp;
171
+ <button
172
+ class="pf-c-menu-toggle pf-m-secondary"
173
+ type="button"
174
+ aria-expanded="false"
175
+ >
176
+ <span class="pf-c-menu-toggle__icon">
177
+ <i class="fas fa-cog" aria-hidden="true"></i>
178
+ </span>
179
+ <span class="pf-c-menu-toggle__text">Icon</span>
180
+ <span class="pf-c-menu-toggle__controls">
181
+ <span class="pf-c-menu-toggle__toggle-icon">
182
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
183
+ </span>
184
+ </span>
185
+ </button>
186
+
187
+ &nbsp;
188
+ <button
189
+ class="pf-c-menu-toggle pf-m-secondary pf-m-expanded"
190
+ type="button"
191
+ aria-expanded="true"
192
+ >
193
+ <span class="pf-c-menu-toggle__text">Expanded</span>
194
+ <span class="pf-c-menu-toggle__controls">
195
+ <span class="pf-c-menu-toggle__toggle-icon">
196
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
197
+ </span>
198
+ </span>
199
+ </button>
200
+
201
+ &nbsp;
202
+ <button
203
+ class="pf-c-menu-toggle pf-m-secondary"
204
+ type="button"
205
+ aria-expanded="false"
206
+ disabled
207
+ >
208
+ <span class="pf-c-menu-toggle__text">Disabled</span>
209
+ <span class="pf-c-menu-toggle__controls">
210
+ <span class="pf-c-menu-toggle__toggle-icon">
211
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
212
+ </span>
213
+ </span>
214
+ </button>
215
+
216
+ ```
217
+
154
218
  ### Plain
155
219
 
156
220
  ```html
@@ -283,17 +347,18 @@ cssPrefix: pf-c-menu-toggle
283
347
 
284
348
  ### Usage
285
349
 
286
- | Class | Applied | Outcome |
287
- | -------------------------------- | ------------------- | ------------------------------------------------------------- |
288
- | `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
289
- | `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon. |
290
- | `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image. |
291
- | `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
292
- | `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
293
- | `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
294
- | `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
295
- | `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
296
- | `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
297
- | `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
298
- | `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
299
- | `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
350
+ | Class | Applied | Outcome |
351
+ | -------------------------------- | ------------------- | --------------------------------------------------------------- |
352
+ | `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
353
+ | `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon. |
354
+ | `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image. |
355
+ | `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
356
+ | `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
357
+ | `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
358
+ | `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
359
+ | `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
360
+ | `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
361
+ | `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
362
+ | `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
363
+ | `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
364
+ | `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
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.1",
4
+ "version": "4.158.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {