@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +29 -0
  74. package/components/Table/table.scss +33 -0
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +3 -0
  78. package/components/TextInputGroup/text-input-group.scss +4 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +615 -167
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1787 -168
  138. package/patternfly.css +1822 -199
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/components/Wizard/wizard.scss CHANGED
@@ -58,6 +58,10 @@
58
58
  --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
59
59
  --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
60
60
  --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
61
+ --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
62
+ --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
63
+ --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
64
+ --#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
61
65
 
62
66
  // Nav link toggle icon
63
67
  --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -73,17 +77,22 @@
73
77
  --#{$wizard}__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
74
78
  --#{$wizard}__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
75
79
  --#{$wizard}__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
80
+ --#{$wizard}__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
81
+ --#{$wizard}__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
76
82
  --#{$wizard}__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
77
83
  --#{$wizard}__nav-link--before--Color: var(--pf-t--global--text--color--regular);
78
84
  --#{$wizard}__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
79
85
  --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
80
86
  --#{$wizard}__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
87
+ --#{$wizard}__nav-link--m-current--before--BorderColor: transparent;
81
88
  --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
82
89
  --#{$wizard}__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
90
+ --#{$wizard}__nav-link--m-disabled--before--BorderColor: transparent;
83
91
 
84
92
  // Nav link status icon
85
93
  --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
86
94
  --#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
95
+ --#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
87
96
  --#{$wizard}__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
88
97
  --#{$wizard}__nav-link-status-icon--InsetBlockStart: 4px; // not spacer-based but needed to align
89
98
  --#{$wizard}__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -110,6 +119,7 @@
110
119
  --#{$wizard}__nav-link-status-icon--LineHeight: 1;
111
120
  --#{$wizard}__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
112
121
  --#{$wizard}__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
122
+ --#{$wizard}__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
113
123
  --#{$wizard}__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
114
124
  --#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align
115
125
  --#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -128,6 +138,8 @@
128
138
  // Nav
129
139
  --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--sm);
130
140
  --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
141
+ --#{$wizard}__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
142
+ --#{$wizard}__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
131
143
  --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
132
144
  --#{$wizard}__nav--Width: 100%;
133
145
  --#{$wizard}__nav--lg--Width: #{pf-size-prem(250px)};
@@ -137,6 +149,7 @@
137
149
  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
138
150
  --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
139
151
  --#{$wizard}__nav--BoxShadow: none;
152
+ --#{$wizard}__nav--BorderBlockEndWidth: 0;
140
153
  }
141
154
 
142
155
  // Nav list (nested)
@@ -302,6 +315,10 @@
302
315
  --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-danger__status-icon--Color);
303
316
  }
304
317
 
318
+ &.pf-m-warning {
319
+ --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-warning__status-icon--Color);
320
+ }
321
+
305
322
  &.pf-m-success {
306
323
  --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-success__status-icon--Color);
307
324
  }
@@ -357,8 +374,8 @@
357
374
 
358
375
  .#{$wizard}__nav {
359
376
  position: absolute;
360
- inset-block-start: 0;
361
- inset-inline-start: 0;
377
+ inset-block-start: 0;
378
+ inset-inline-start: 0;
362
379
  z-index: var(--#{$wizard}__nav--ZIndex);
363
380
  display: none;
364
381
  width: var(--#{$wizard}__nav--Width);
@@ -366,6 +383,7 @@
366
383
  overflow-y: auto;
367
384
  -webkit-overflow-scrolling: touch;
368
385
  background-color: var(--#{$wizard}__nav--BackgroundColor);
386
+ border-block-end: var(--#{$wizard}__nav--BorderBlockEndWidth) solid var(--#{$wizard}__nav--BorderBlockEndColor);
369
387
  box-shadow: var(--#{$wizard}__nav--BoxShadow);
370
388
 
371
389
  &.pf-m-expanded {
@@ -452,6 +470,7 @@
452
470
  &::before {
453
471
  position: relative;
454
472
  display: inline-flex;
473
+ flex-shrink: 0;
455
474
  align-items: center;
456
475
  justify-content: center;
457
476
  width: var(--#{$wizard}__nav-link--before--Width);
@@ -465,22 +484,25 @@
465
484
 
466
485
  // Nav step number
467
486
  &::before {
468
- inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
487
+ inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
469
488
  content: counter(wizard-nav-count);
470
- }
489
+ border: var(--#{$wizard}__nav-link--before--BorderWidth) solid var(--#{$wizard}__nav-link--before--BorderColor);
490
+ }
471
491
 
472
492
  &.pf-m-current {
473
493
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-current--Color);
474
494
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor);
495
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth);
475
496
 
476
497
  @at-root .#{$wizard}__toggle-num,
477
498
  &::before {
478
499
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-current--before--BackgroundColor);
479
500
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-current--before--Color);
501
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-current--before--BorderColor);
480
502
  }
481
503
  }
482
504
 
483
- &:is(.pf-m-success, .pf-m-danger) {
505
+ &:is(.pf-m-success, .pf-m-warning, .pf-m-danger) {
484
506
  &::before {
485
507
  display: none;
486
508
  }
@@ -490,6 +512,10 @@
490
512
  --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-success__nav-link-status-icon--Color);
491
513
  }
492
514
 
515
+ &.pf-m-warning {
516
+ --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color);
517
+ }
518
+
493
519
  &.pf-m-danger {
494
520
  --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
495
521
  }
@@ -497,6 +523,7 @@
497
523
  &:where(:hover, :focus) {
498
524
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
499
525
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
526
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--hover__nav-link-main--BorderWidth);
500
527
  }
501
528
 
502
529
  // override the button background/color for disabled nav links
@@ -510,24 +537,31 @@
510
537
  &::before {
511
538
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--before--BackgroundColor);
512
539
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-disabled--before--Color);
540
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-disabled--before--BorderColor);
513
541
  }
514
542
  }
515
543
  }
516
544
 
517
- .#{$wizard}__nav-link-text {
518
- flex-grow: 1;
519
- }
520
-
521
545
  .#{$wizard}__nav-link-main {
546
+ position: relative;
522
547
  display: flex;
548
+ flex-grow: 1;
523
549
  justify-content: space-between;
524
550
  padding-block-start: var(--#{$wizard}__nav-link-main--PaddingBlockStart);
525
551
  padding-block-end: var(--#{$wizard}__nav-link-main--PaddingBlockEnd);
526
552
  padding-inline-start: var(--#{$wizard}__nav-link-main--PaddingInlineStart);
527
553
  padding-inline-end: var(--#{$wizard}__nav-link-main--PaddingInlineEnd);
528
554
  background-color: var(--#{$wizard}__nav-link-main--BackgroundColor);
529
- border: none;
530
555
  border-radius: var(--#{$wizard}__nav-link-main--BorderRadius);
556
+
557
+ &::after {
558
+ position: absolute;
559
+ inset: 0;
560
+ pointer-events: none;
561
+ content: "";
562
+ border: var(--#{$wizard}__nav-link-main--BorderWidth) solid var(--#{$wizard}__nav-link-main--BorderColor);
563
+ border-radius: inherit;
564
+ }
531
565
  }
532
566
 
533
567
  .#{$wizard}__nav-link-status-icon {