@patternfly/react-styles 6.3.1 → 6.4.0-prerelease.2

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 (49) hide show
  1. package/CHANGELOG.md +21 -1
  2. package/css/components/Accordion/accordion.css +42 -15
  3. package/css/components/Alert/alert-group.css +17 -15
  4. package/css/components/Badge/badge.css +2 -0
  5. package/css/components/Banner/banner.css +4 -0
  6. package/css/components/Button/button.css +34 -4
  7. package/css/components/CalendarMonth/calendar-month.css +35 -4
  8. package/css/components/Card/card.css +7 -4
  9. package/css/components/CodeBlock/code-block.css +3 -0
  10. package/css/components/CodeEditor/code-editor.css +23 -3
  11. package/css/components/DatePicker/date-picker.css +3 -0
  12. package/css/components/Divider/divider.css +2 -0
  13. package/css/components/Drawer/drawer.css +46 -41
  14. package/css/components/DualListSelector/dual-list-selector.css +21 -4
  15. package/css/components/ExpandableSection/expandable-section.css +6 -2
  16. package/css/components/FormControl/form-control.css +6 -7
  17. package/css/components/Label/label.css +20 -11
  18. package/css/components/Login/login.css +3 -0
  19. package/css/components/Menu/menu.css +18 -0
  20. package/css/components/MenuToggle/menu-toggle.css +13 -6
  21. package/css/components/ModalBox/modal-box.css +3 -0
  22. package/css/components/Nav/nav.css +17 -0
  23. package/css/components/Page/page.css +73 -25
  24. package/css/components/Page/page.d.ts +3 -0
  25. package/css/components/Page/page.js +3 -0
  26. package/css/components/Page/page.mjs +3 -0
  27. package/css/components/Pagination/pagination.css +15 -2
  28. package/css/components/Panel/panel.css +14 -1
  29. package/css/components/Popover/popover.css +4 -0
  30. package/css/components/Progress/progress.css +19 -0
  31. package/css/components/Sidebar/sidebar.css +7 -0
  32. package/css/components/SimpleList/simple-list.css +15 -0
  33. package/css/components/Slider/slider.css +9 -0
  34. package/css/components/Switch/switch.css +7 -1
  35. package/css/components/Table/table.css +29 -0
  36. package/css/components/Tabs/tabs.css +18 -7
  37. package/css/components/TextInputGroup/text-input-group.css +3 -0
  38. package/css/components/ToggleGroup/toggle-group.css +18 -9
  39. package/css/components/Toolbar/toolbar.css +7 -0
  40. package/css/components/TreeView/tree-view.css +15 -0
  41. package/css/components/Wizard/wizard.css +37 -6
  42. package/css/components/Wizard/wizard.d.ts +1 -1
  43. package/css/components/Wizard/wizard.js +1 -1
  44. package/css/components/Wizard/wizard.mjs +1 -1
  45. package/css/components/_index.css +615 -167
  46. package/css/components/_index.d.ts +0 -1
  47. package/css/components/_index.js +0 -1
  48. package/css/components/_index.mjs +0 -1
  49. package/package.json +3 -3
package/css/components/Wizard/wizard.css CHANGED
@@ -36,6 +36,10 @@
36
36
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
37
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
38
38
  --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
39
+ --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
41
+ --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
42
+ --pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
39
43
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
44
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
41
45
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
@@ -47,15 +51,20 @@
47
51
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
48
52
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
49
53
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
54
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
55
+ --pf-v6-c-wizard__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
50
56
  --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
51
57
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
52
58
  --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
53
59
  --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
54
60
  --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
61
+ --pf-v6-c-wizard__nav-link--m-current--before--BorderColor: transparent;
55
62
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
56
63
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
64
+ --pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor: transparent;
57
65
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
58
66
  --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
67
+ --pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
59
68
  --pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
60
69
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
61
70
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -74,6 +83,7 @@
74
83
  --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
75
84
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
76
85
  --pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
86
+ --pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
77
87
  --pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
78
88
  --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
79
89
  --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -84,6 +94,8 @@
84
94
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
85
95
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
86
96
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
97
+ --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
98
+ --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
87
99
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
88
100
  --pf-v6-c-wizard__nav--Width: 100%;
89
101
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
@@ -117,6 +129,7 @@
117
129
  .pf-v6-c-wizard {
118
130
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
119
131
  --pf-v6-c-wizard__nav--BoxShadow: none;
132
+ --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
120
133
  }
121
134
  }
122
135
 
@@ -234,6 +247,9 @@
234
247
  .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
235
248
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
236
249
  }
250
+ .pf-v6-c-wizard__toggle-list-item.pf-m-warning {
251
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
252
+ }
237
253
  .pf-v6-c-wizard__toggle-list-item.pf-m-success {
238
254
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
239
255
  }
@@ -300,6 +316,7 @@
300
316
  overflow-y: auto;
301
317
  -webkit-overflow-scrolling: touch;
302
318
  background-color: var(--pf-v6-c-wizard__nav--BackgroundColor);
319
+ border-block-end: var(--pf-v6-c-wizard__nav--BorderBlockEndWidth) solid var(--pf-v6-c-wizard__nav--BorderBlockEndColor);
303
320
  box-shadow: var(--pf-v6-c-wizard__nav--BoxShadow);
304
321
  }
305
322
  .pf-v6-c-wizard__nav.pf-m-expanded {
@@ -367,6 +384,7 @@
367
384
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
368
385
  position: relative;
369
386
  display: inline-flex;
387
+ flex-shrink: 0;
370
388
  align-items: center;
371
389
  justify-content: center;
372
390
  width: var(--pf-v6-c-wizard__nav-link--before--Width);
@@ -381,28 +399,35 @@
381
399
  .pf-v6-c-wizard__nav-link::before {
382
400
  inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
383
401
  content: counter(wizard-nav-count);
402
+ border: var(--pf-v6-c-wizard__nav-link--before--BorderWidth) solid var(--pf-v6-c-wizard__nav-link--before--BorderColor);
384
403
  }
385
404
  .pf-v6-c-wizard__nav-link.pf-m-current {
386
405
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
387
406
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
407
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth);
388
408
  }
389
409
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
390
410
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
391
411
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
412
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BorderColor);
392
413
  }
393
414
 
394
- .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
415
+ .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
395
416
  display: none;
396
417
  }
397
418
  .pf-v6-c-wizard__nav-link.pf-m-success {
398
419
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
399
420
  }
421
+ .pf-v6-c-wizard__nav-link.pf-m-warning {
422
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
423
+ }
400
424
  .pf-v6-c-wizard__nav-link.pf-m-danger {
401
425
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
402
426
  }
403
427
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
404
428
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
405
429
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
430
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth);
406
431
  }
407
432
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
408
433
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
@@ -412,23 +437,29 @@
412
437
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
413
438
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor);
414
439
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
415
- }
416
-
417
- .pf-v6-c-wizard__nav-link-text {
418
- flex-grow: 1;
440
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor);
419
441
  }
420
442
 
421
443
  .pf-v6-c-wizard__nav-link-main {
444
+ position: relative;
422
445
  display: flex;
446
+ flex-grow: 1;
423
447
  justify-content: space-between;
424
448
  padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
425
449
  padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
426
450
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
427
451
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
428
452
  background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
429
- border: none;
430
453
  border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
431
454
  }
455
+ .pf-v6-c-wizard__nav-link-main::after {
456
+ position: absolute;
457
+ inset: 0;
458
+ pointer-events: none;
459
+ content: "";
460
+ border: var(--pf-v6-c-wizard__nav-link-main--BorderWidth) solid var(--pf-v6-c-wizard__nav-link-main--BorderColor);
461
+ border-radius: inherit;
462
+ }
432
463
 
433
464
  .pf-v6-c-wizard__nav-link-status-icon {
434
465
  position: relative;
package/css/components/Wizard/wizard.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const _default: {
7
7
  "finished": "pf-m-finished",
8
8
  "expanded": "pf-m-expanded",
9
9
  "danger": "pf-m-danger",
10
+ "warning": "pf-m-warning",
10
11
  "success": "pf-m-success",
11
12
  "current": "pf-m-current",
12
13
  "expandable": "pf-m-expandable",
@@ -26,7 +27,6 @@ declare const _default: {
26
27
  "wizardNavLink": "pf-v6-c-wizard__nav-link",
27
28
  "wizardNavLinkMain": "pf-v6-c-wizard__nav-link-main",
28
29
  "wizardNavLinkStatusIcon": "pf-v6-c-wizard__nav-link-status-icon",
29
- "wizardNavLinkText": "pf-v6-c-wizard__nav-link-text",
30
30
  "wizardNavLinkToggle": "pf-v6-c-wizard__nav-link-toggle",
31
31
  "wizardNavLinkToggleIcon": "pf-v6-c-wizard__nav-link-toggle-icon",
32
32
  "wizardNavList": "pf-v6-c-wizard__nav-list",
package/css/components/Wizard/wizard.js CHANGED
@@ -9,6 +9,7 @@ exports.default = {
9
9
  "finished": "pf-m-finished",
10
10
  "expanded": "pf-m-expanded",
11
11
  "danger": "pf-m-danger",
12
+ "warning": "pf-m-warning",
12
13
  "success": "pf-m-success",
13
14
  "current": "pf-m-current",
14
15
  "expandable": "pf-m-expandable",
@@ -28,7 +29,6 @@ exports.default = {
28
29
  "wizardNavLink": "pf-v6-c-wizard__nav-link",
29
30
  "wizardNavLinkMain": "pf-v6-c-wizard__nav-link-main",
30
31
  "wizardNavLinkStatusIcon": "pf-v6-c-wizard__nav-link-status-icon",
31
- "wizardNavLinkText": "pf-v6-c-wizard__nav-link-text",
32
32
  "wizardNavLinkToggle": "pf-v6-c-wizard__nav-link-toggle",
33
33
  "wizardNavLinkToggleIcon": "pf-v6-c-wizard__nav-link-toggle-icon",
34
34
  "wizardNavList": "pf-v6-c-wizard__nav-list",
package/css/components/Wizard/wizard.mjs CHANGED
@@ -7,6 +7,7 @@ export default {
7
7
  "finished": "pf-m-finished",
8
8
  "expanded": "pf-m-expanded",
9
9
  "danger": "pf-m-danger",
10
+ "warning": "pf-m-warning",
10
11
  "success": "pf-m-success",
11
12
  "current": "pf-m-current",
12
13
  "expandable": "pf-m-expandable",
@@ -26,7 +27,6 @@ export default {
26
27
  "wizardNavLink": "pf-v6-c-wizard__nav-link",
27
28
  "wizardNavLinkMain": "pf-v6-c-wizard__nav-link-main",
28
29
  "wizardNavLinkStatusIcon": "pf-v6-c-wizard__nav-link-status-icon",
29
- "wizardNavLinkText": "pf-v6-c-wizard__nav-link-text",
30
30
  "wizardNavLinkToggle": "pf-v6-c-wizard__nav-link-toggle",
31
31
  "wizardNavLinkToggleIcon": "pf-v6-c-wizard__nav-link-toggle-icon",
32
32
  "wizardNavList": "pf-v6-c-wizard__nav-list",