@patternfly/react-styles 6.3.0 → 6.3.1-prerelease.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 (35) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/components/Accordion/accordion.css +40 -15
  3. package/css/components/Alert/alert-group.css +15 -2
  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 +33 -3
  7. package/css/components/Card/card.css +5 -4
  8. package/css/components/CodeBlock/code-block.css +3 -0
  9. package/css/components/CodeEditor/code-editor.css +8 -3
  10. package/css/components/Drawer/drawer.css +44 -41
  11. package/css/components/DualListSelector/dual-list-selector.css +19 -1
  12. package/css/components/Label/label.css +20 -11
  13. package/css/components/Login/login.css +3 -0
  14. package/css/components/Menu/menu.css +11 -0
  15. package/css/components/MenuToggle/menu-toggle.css +12 -5
  16. package/css/components/ModalBox/modal-box.css +3 -0
  17. package/css/components/Nav/nav.css +17 -0
  18. package/css/components/Page/page.css +62 -23
  19. package/css/components/Panel/panel.css +7 -1
  20. package/css/components/Popover/popover.css +4 -0
  21. package/css/components/Progress/progress.css +10 -0
  22. package/css/components/SimpleList/simple-list.css +15 -0
  23. package/css/components/Table/table.css +41 -1
  24. package/css/components/Tabs/tabs.css +7 -0
  25. package/css/components/TextInputGroup/text-input-group.css +7 -0
  26. package/css/components/TreeView/tree-view.css +15 -0
  27. package/css/components/Wizard/wizard.css +33 -6
  28. package/css/components/Wizard/wizard.d.ts +1 -1
  29. package/css/components/Wizard/wizard.js +1 -1
  30. package/css/components/Wizard/wizard.mjs +1 -1
  31. package/css/components/_index.css +440 -116
  32. package/css/components/_index.d.ts +0 -1
  33. package/css/components/_index.js +0 -1
  34. package/css/components/_index.mjs +0 -1
  35. package/package.json +3 -3
package/css/components/TreeView/tree-view.css CHANGED
@@ -8,6 +8,11 @@
8
8
  --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
9
9
  --pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
10
10
  --pf-v6-c-tree-view__node--BackgroundColor: transparent;
11
+ --pf-v6-c-tree-view__node--BorderRadius: var(--pf-v6-c-tree-view__content--BorderRadius);
12
+ --pf-v6-c-tree-view__node--BorderColor: var(--pf-t--global--border--color--high-contrast);
13
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
14
+ --pf-v6-c-tree-view__node--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
15
+ --pf-v6-c-tree-view__node--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
11
16
  --pf-v6-c-tree-view__node--m-current--Color: var(--pf-t--global--text--color--regular);
12
17
  --pf-v6-c-tree-view__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
13
18
  --pf-v6-c-tree-view__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -293,8 +298,17 @@
293
298
  color: var(--pf-v6-c-tree-view__node--Color);
294
299
  background-color: var(--pf-v6-c-tree-view__node--BackgroundColor);
295
300
  }
301
+ .pf-v6-c-tree-view__node::after {
302
+ position: absolute;
303
+ inset: 0;
304
+ pointer-events: none;
305
+ content: "";
306
+ border: var(--pf-v6-c-tree-view__node--BorderWidth) solid var(--pf-v6-c-tree-view__node--BorderColor);
307
+ border-radius: var(--pf-v6-c-tree-view__node--BorderRadius);
308
+ }
296
309
  .pf-v6-c-tree-view__node.pf-m-current {
297
310
  --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-current--Color);
311
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--m-current--BorderWidth);
298
312
  }
299
313
  .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
300
314
  margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
@@ -392,6 +406,7 @@ label.pf-v6-c-tree-view__node-text {
392
406
 
393
407
  .pf-v6-c-tree-view__content:hover,
394
408
  .pf-v6-c-tree-view__content:focus-within {
409
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--hover--BorderWidth);
395
410
  background-color: var(--pf-v6-c-tree-view__node--hover--BackgroundColor);
396
411
  }
397
412
 
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);
@@ -234,6 +244,9 @@
234
244
  .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
235
245
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
236
246
  }
247
+ .pf-v6-c-wizard__toggle-list-item.pf-m-warning {
248
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
249
+ }
237
250
  .pf-v6-c-wizard__toggle-list-item.pf-m-success {
238
251
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
239
252
  }
@@ -367,6 +380,7 @@
367
380
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
368
381
  position: relative;
369
382
  display: inline-flex;
383
+ flex-shrink: 0;
370
384
  align-items: center;
371
385
  justify-content: center;
372
386
  width: var(--pf-v6-c-wizard__nav-link--before--Width);
@@ -381,28 +395,35 @@
381
395
  .pf-v6-c-wizard__nav-link::before {
382
396
  inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
383
397
  content: counter(wizard-nav-count);
398
+ border: var(--pf-v6-c-wizard__nav-link--before--BorderWidth) solid var(--pf-v6-c-wizard__nav-link--before--BorderColor);
384
399
  }
385
400
  .pf-v6-c-wizard__nav-link.pf-m-current {
386
401
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
387
402
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
403
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth);
388
404
  }
389
405
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
390
406
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
391
407
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
408
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BorderColor);
392
409
  }
393
410
 
394
- .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
411
+ .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
395
412
  display: none;
396
413
  }
397
414
  .pf-v6-c-wizard__nav-link.pf-m-success {
398
415
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
399
416
  }
417
+ .pf-v6-c-wizard__nav-link.pf-m-warning {
418
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
419
+ }
400
420
  .pf-v6-c-wizard__nav-link.pf-m-danger {
401
421
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
402
422
  }
403
423
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
404
424
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
405
425
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
426
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth);
406
427
  }
407
428
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
408
429
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
@@ -412,23 +433,29 @@
412
433
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
413
434
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor);
414
435
  --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;
436
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor);
419
437
  }
420
438
 
421
439
  .pf-v6-c-wizard__nav-link-main {
440
+ position: relative;
422
441
  display: flex;
442
+ flex-grow: 1;
423
443
  justify-content: space-between;
424
444
  padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
425
445
  padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
426
446
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
427
447
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
428
448
  background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
429
- border: none;
430
449
  border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
431
450
  }
451
+ .pf-v6-c-wizard__nav-link-main::after {
452
+ position: absolute;
453
+ inset: 0;
454
+ pointer-events: none;
455
+ content: "";
456
+ border: var(--pf-v6-c-wizard__nav-link-main--BorderWidth) solid var(--pf-v6-c-wizard__nav-link-main--BorderColor);
457
+ border-radius: inherit;
458
+ }
432
459
 
433
460
  .pf-v6-c-wizard__nav-link-status-icon {
434
461
  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",