@patternfly/patternfly 6.2.0-prerelease.2 → 6.2.0-prerelease.21

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 (110) hide show
  1. package/assets/pficon/pficon.scss +1 -1
  2. package/base/normalize.scss +2 -2
  3. package/base/patternfly-pf-icons.css +1 -1
  4. package/components/Alert/alert-group.css +50 -7
  5. package/components/Alert/alert-group.scss +114 -28
  6. package/components/Banner/banner.css +2 -2
  7. package/components/Banner/banner.scss +2 -2
  8. package/components/Breadcrumb/breadcrumb.css +3 -2
  9. package/components/Breadcrumb/breadcrumb.scss +3 -2
  10. package/components/Button/button.css +63 -2
  11. package/components/Button/button.scss +74 -2
  12. package/components/Card/card.css +17 -0
  13. package/components/Card/card.scss +22 -0
  14. package/components/ClipboardCopy/clipboard-copy.css +3 -0
  15. package/components/ClipboardCopy/clipboard-copy.scss +4 -0
  16. package/components/Content/content.css +2 -1
  17. package/components/Content/content.scss +2 -1
  18. package/components/DescriptionList/description-list.css +3 -2
  19. package/components/DescriptionList/description-list.scss +3 -2
  20. package/components/Drawer/drawer.css +3 -1
  21. package/components/Drawer/drawer.scss +3 -1
  22. package/components/Form/form.css +3 -6
  23. package/components/Form/form.scss +3 -7
  24. package/components/HelperText/helper-text.css +13 -0
  25. package/components/HelperText/helper-text.scss +16 -0
  26. package/components/JumpLinks/jump-links.css +1 -1
  27. package/components/JumpLinks/jump-links.scss +1 -1
  28. package/components/Label/label.css +3 -2
  29. package/components/Label/label.scss +3 -2
  30. package/components/Masthead/masthead.css +1 -1
  31. package/components/Masthead/masthead.scss +1 -1
  32. package/components/Menu/menu.css +15 -7
  33. package/components/Menu/menu.scss +14 -5
  34. package/components/MenuToggle/menu-toggle.css +41 -0
  35. package/components/MenuToggle/menu-toggle.scss +49 -0
  36. package/components/Nav/nav.css +46 -13
  37. package/components/Nav/nav.scss +57 -17
  38. package/components/Page/page.css +16 -1
  39. package/components/Page/page.scss +17 -3
  40. package/components/Popover/popover.css +2 -0
  41. package/components/Popover/popover.scss +2 -0
  42. package/components/Progress/progress.css +3 -0
  43. package/components/Progress/progress.scss +3 -0
  44. package/components/ProgressStepper/progress-stepper.css +2 -1
  45. package/components/ProgressStepper/progress-stepper.scss +2 -1
  46. package/components/SimpleList/simple-list.css +2 -2
  47. package/components/SimpleList/simple-list.scss +2 -2
  48. package/components/Switch/switch.css +3 -1
  49. package/components/Switch/switch.scss +4 -2
  50. package/components/Table/table.css +3 -3
  51. package/components/Table/table.scss +3 -2
  52. package/components/Tabs/tabs.css +1 -1
  53. package/components/Tabs/tabs.scss +1 -1
  54. package/components/Timestamp/timestamp.css +2 -1
  55. package/components/Timestamp/timestamp.scss +2 -1
  56. package/components/ToggleGroup/toggle-group.css +1 -1
  57. package/components/ToggleGroup/toggle-group.scss +1 -1
  58. package/components/Toolbar/toolbar.css +6 -1
  59. package/components/Toolbar/toolbar.scss +7 -1
  60. package/components/Wizard/wizard.css +1 -1
  61. package/components/Wizard/wizard.scss +1 -1
  62. package/components/_index.css +310 -60
  63. package/docs/components/Alert/examples/Alert.md +6 -0
  64. package/docs/components/Avatar/examples/Avatar.md +4 -4
  65. package/docs/components/Brand/examples/Brand.md +2 -2
  66. package/docs/components/Button/examples/Button.md +29 -0
  67. package/docs/components/Card/examples/Card.md +30 -0
  68. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +29 -0
  69. package/docs/components/DataList/examples/DataList.md +3 -3
  70. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  71. package/docs/components/Divider/examples/Divider.md +2 -2
  72. package/docs/components/Drawer/examples/Drawer.md +3 -3
  73. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  74. package/docs/components/Masthead/examples/masthead.md +1 -1
  75. package/docs/components/Menu/examples/Menu.md +8 -8
  76. package/docs/components/Nav/examples/Navigation.md +3 -0
  77. package/docs/components/Page/examples/Page.md +2 -2
  78. package/docs/components/Pagination/examples/Pagination.md +3 -3
  79. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  80. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  81. package/docs/components/Table/examples/Table.md +17 -29
  82. package/docs/components/Tabs/examples/Tabs.md +148 -6
  83. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  84. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  85. package/docs/components/Toolbar/examples/Toolbar.md +35 -7
  86. package/docs/demos/Card/examples/Card.md +32 -24
  87. package/docs/demos/CardView/examples/CardView.md +2 -0
  88. package/docs/demos/Nav/examples/Nav.md +2 -0
  89. package/docs/layouts/Flex/examples/Flex.md +1 -1
  90. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  91. package/docs/layouts/Grid/examples/Grid.md +4 -4
  92. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  93. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  94. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  95. package/docs/utilities/Display/examples/Display.md +1 -1
  96. package/docs/utilities/Flex/examples/Flex.md +1 -1
  97. package/docs/utilities/Float/examples/Float.md +1 -1
  98. package/docs/utilities/Sizing/examples/Sizing.md +6 -6
  99. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  100. package/docs/utilities/Text/examples/Text.md +1 -1
  101. package/package.json +2 -2
  102. package/patternfly-base-no-globals.css +1 -1
  103. package/patternfly-base.css +3 -3
  104. package/patternfly-charts.css +83 -0
  105. package/patternfly-charts.scss +126 -0
  106. package/patternfly-no-globals.css +311 -61
  107. package/patternfly.css +313 -63
  108. package/patternfly.min.css +1 -1
  109. package/patternfly.min.css.map +1 -1
  110. package/docs/components/TabContent/examples/TabContent.md +0 -153
package/components/ProgressStepper/progress-stepper.css CHANGED
@@ -316,7 +316,8 @@
316
316
  .pf-v6-c-progress-stepper__step-title.pf-m-help-text {
317
317
  padding-inline-start: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
318
318
  padding-inline-end: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
319
- text-decoration: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine) var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
319
+ text-decoration-line: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine);
320
+ text-decoration-style: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
320
321
  text-underline-offset: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
321
322
  cursor: pointer;
322
323
  }
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -406,7 +406,8 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
406
406
  &.pf-m-help-text {
407
407
  padding-inline-start: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineStart);
408
408
  padding-inline-end: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineEnd);
409
- text-decoration: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationLine) var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationStyle);
409
+ text-decoration-line: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationLine);
410
+ text-decoration-style: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationStyle);
410
411
  text-underline-offset: var(--#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset);
411
412
  cursor: pointer;
412
413
 
package/components/SimpleList/simple-list.css CHANGED
@@ -34,7 +34,7 @@
34
34
  font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
35
35
  color: var(--pf-v6-c-simple-list__item-link--Color);
36
36
  text-align: start;
37
- text-decoration: none;
37
+ text-decoration-line: none;
38
38
  background-color: var(--pf-v6-c-simple-list__item-link--BackgroundColor);
39
39
  border: none;
40
40
  border-radius: var(--pf-v6-c-simple-list__item-link--BorderRadius);
@@ -47,7 +47,7 @@
47
47
  .pf-v6-c-simple-list__item-link:is(:hover, :focus) {
48
48
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--hover--BackgroundColor);
49
49
  --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--hover--Color);
50
- text-decoration: none;
50
+ text-decoration-line: none;
51
51
  }
52
52
  .pf-v6-c-simple-list__item-link.pf-m-current {
53
53
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--m-current--BackgroundColor);
package/components/SimpleList/simple-list.scss CHANGED
@@ -43,7 +43,7 @@
43
43
  font-size: var(--#{$simple-list}__item-link--FontSize);
44
44
  color: var(--#{$simple-list}__item-link--Color);
45
45
  text-align: start;
46
- text-decoration: none;
46
+ text-decoration-line: none;
47
47
  background-color: var(--#{$simple-list}__item-link--BackgroundColor);
48
48
  border: none;
49
49
  border-radius: var(--#{$simple-list}__item-link--BorderRadius);
@@ -58,7 +58,7 @@
58
58
  --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
59
59
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
60
60
 
61
- text-decoration: none;
61
+ text-decoration-line: none;
62
62
  }
63
63
 
64
64
  &.pf-m-current {
package/components/Switch/switch.css CHANGED
@@ -30,7 +30,9 @@
30
30
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
31
31
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
32
32
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
33
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
33
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
34
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
35
+ --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
34
36
  --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
35
37
  }
36
38
 
package/components/Switch/switch.scss CHANGED
@@ -41,7 +41,9 @@
41
41
  --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
42
42
  --#{$switch}__toggle--before--InsetInlineStart: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
43
43
  --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
44
- --#{$switch}__toggle--before--Transition: transform .25s ease 0s;
44
+ --#{$switch}__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
45
+ --#{$switch}__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
46
+ --#{$switch}__toggle--before--Transition: transform var(--#{$switch}__toggle--before--TransitionTimingFunction) var(--#{$switch}__toggle--before--TransitionDuration), background-color var(--#{$switch}__toggle--before--TransitionTimingFunction) var(--#{$switch}__toggle--before--TransitionDuration); // TODO remove in breaking change along with shorthand property
45
47
  --#{$switch}__toggle--Width: calc(var(--#{$switch}__toggle--Height) + var(--#{$switch}__toggle-icon--Offset) + var(--#{$switch}__toggle--before--Width));
46
48
  }
47
49
 
@@ -152,7 +154,7 @@
152
154
  content: "";
153
155
  background-color: var(--#{$switch}__input--not-checked__toggle--before--BackgroundColor);
154
156
  border-radius: var(--#{$switch}__toggle--before--BorderRadius);
155
- transition: var(--#{$switch}__toggle--before--Transition);
157
+ transition: var(--#{$switch}__toggle--before--Transition); // TODO remove shorthand in breaking change
156
158
  transform: translateY(-50%);
157
159
  }
158
160
 
package/components/Table/table.css CHANGED
@@ -583,13 +583,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
583
583
  vertical-align: baseline;
584
584
  }
585
585
 
586
- .pf-v6-c-table__favorite .pf-v6-c-button {
586
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
587
587
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
588
588
  }
589
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
589
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
590
590
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
591
591
  }
592
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
592
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
593
593
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
594
594
  }
595
595
 
package/components/Table/table.scss CHANGED
@@ -789,12 +789,13 @@
789
789
  }
790
790
 
791
791
  // - Table favorite
792
+ // TODO in breaking change - remove button styling here that is taken care of by favorite button now
792
793
  .#{$table}__favorite {
793
- .#{$button} {
794
+ .#{$button}:not(.pf-m-favorite) {
794
795
  --#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
795
796
  }
796
797
 
797
- &.pf-m-favorited .#{$button} {
798
+ &.pf-m-favorited .#{$button}:not(.pf-m-favorited) {
798
799
  --#{$button}--m-plain__icon--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
799
800
 
800
801
  &:is(:hover, :focus) {
package/components/Tabs/tabs.css CHANGED
@@ -495,7 +495,7 @@
495
495
  padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
496
496
  font-size: var(--pf-v6-c-tabs__link--FontSize);
497
497
  color: var(--pf-v6-c-tabs__link--Color);
498
- text-decoration: none;
498
+ text-decoration-line: none;
499
499
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
500
500
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
501
501
  }
package/components/Tabs/tabs.scss CHANGED
@@ -573,7 +573,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
573
573
  padding-inline-end: var(--#{$tabs}__link--PaddingInlineEnd);
574
574
  font-size: var(--#{$tabs}__link--FontSize);
575
575
  color: var(--#{$tabs}__link--Color);
576
- text-decoration: none;
576
+ text-decoration-line: none;
577
577
  background-color: var(--#{$tabs}__link--BackgroundColor);
578
578
  border-radius: var(--#{$tabs}__link--BorderRadius);
579
579
 
package/components/Timestamp/timestamp.css CHANGED
@@ -19,7 +19,8 @@
19
19
  }
20
20
  .pf-v6-c-timestamp.pf-m-help-text {
21
21
  --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
22
- text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
22
+ text-decoration-line: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine);
23
+ text-decoration-style: var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
23
24
  text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
24
25
  cursor: pointer;
25
26
  }
package/components/Timestamp/timestamp.scss CHANGED
@@ -24,7 +24,8 @@
24
24
  &.pf-m-help-text {
25
25
  --#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--Color);
26
26
 
27
- text-decoration: var(--#{$timestamp}--m-help-text--TextDecorationLine) var(--#{$timestamp}--m-help-text--TextDecorationStyle);
27
+ text-decoration-line: var(--#{$timestamp}--m-help-text--TextDecorationLine);
28
+ text-decoration-style: var(--#{$timestamp}--m-help-text--TextDecorationStyle);
28
29
  text-underline-offset: var(--#{$timestamp}--m-help-text--TextUnderlineOffset);
29
30
  cursor: pointer;
30
31
 
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -92,7 +92,7 @@
92
92
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
93
93
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
94
94
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
95
- text-decoration: none;
95
+ text-decoration-line: none;
96
96
  }
97
97
  .pf-v6-c-toggle-group__button.pf-m-selected {
98
98
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--m-selected--BackgroundColor);
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -122,7 +122,7 @@
122
122
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
123
123
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
124
124
 
125
- text-decoration: none;
125
+ text-decoration-line: none;
126
126
  }
127
127
 
128
128
  &.pf-m-selected {
package/components/Toolbar/toolbar.css CHANGED
@@ -217,13 +217,18 @@
217
217
  }
218
218
  .pf-v6-c-toolbar.pf-m-full-height {
219
219
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
220
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
220
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
221
221
  }
222
222
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
223
223
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
224
224
  align-items: stretch;
225
225
  align-self: stretch;
226
226
  }
227
+ .pf-v6-c-toolbar.pf-m-no-padding {
228
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
229
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
230
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
231
+ }
227
232
  .pf-v6-c-toolbar.pf-m-primary {
228
233
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
229
234
  }
package/components/Toolbar/toolbar.scss CHANGED
@@ -160,7 +160,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
160
160
  // - Toolbar full height
161
161
  &.pf-m-full-height {
162
162
  --#{$toolbar}--PaddingBlockStart: 0;
163
- --#{$toolbar}--PaddinkBlockEnd: 0;
163
+ --#{$toolbar}--PaddingBlockEnd: 0;
164
164
 
165
165
  .#{$toolbar}__group,
166
166
  .#{$toolbar}__item {
@@ -169,6 +169,12 @@ $pf-v6--include-toolbar-breakpoints: true !default;
169
169
  }
170
170
  }
171
171
 
172
+ &.pf-m-no-padding {
173
+ --#{$toolbar}--PaddingBlockEnd: 0;
174
+ --#{$toolbar}--m-sticky--PaddingBlockStart: 0;
175
+ --#{$toolbar}--m-sticky--PaddingBlockEnd: 0;
176
+ }
177
+
172
178
  // - Toolbar background modifiers
173
179
  &.pf-m-primary {
174
180
  --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-primary--BackgroundColor);
package/components/Wizard/wizard.css CHANGED
@@ -357,7 +357,7 @@
357
357
  padding-inline: 0;
358
358
  color: var(--pf-v6-c-wizard__nav-link--Color);
359
359
  text-align: start;
360
- text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
360
+ text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
361
361
  word-break: break-word;
362
362
  counter-increment: wizard-nav-count;
363
363
  background-color: transparent;
package/components/Wizard/wizard.scss CHANGED
@@ -440,7 +440,7 @@
440
440
  padding-inline: 0;
441
441
  color: var(--#{$wizard}__nav-link--Color);
442
442
  text-align: start; // needed for when the item is a button
443
- text-decoration: var(--#{$wizard}__nav-link--TextDecoration);
443
+ text-decoration-line: var(--#{$wizard}__nav-link--TextDecoration);
444
444
  word-break: break-word;
445
445
  counter-increment: wizard-nav-count;
446
446
  background-color: transparent;