@patternfly/patternfly 6.2.0-prerelease.9 → 6.3.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 (81) hide show
  1. package/base/patternfly-variables.css +1 -1
  2. package/base/patternfly-variables.scss +1 -1
  3. package/components/Accordion/accordion.css +3 -1
  4. package/components/Accordion/accordion.scss +4 -2
  5. package/components/Alert/alert-group.css +52 -9
  6. package/components/Alert/alert-group.scss +116 -29
  7. package/components/Banner/banner.css +2 -2
  8. package/components/Banner/banner.scss +2 -2
  9. package/components/Button/button.css +41 -0
  10. package/components/Button/button.scss +52 -0
  11. package/components/Card/card.css +24 -2
  12. package/components/Card/card.scss +29 -2
  13. package/components/ClipboardCopy/clipboard-copy.css +6 -1
  14. package/components/ClipboardCopy/clipboard-copy.scss +8 -2
  15. package/components/DataList/data-list.css +3 -1
  16. package/components/DataList/data-list.scss +4 -2
  17. package/components/DescriptionList/description-list.css +1 -1
  18. package/components/DescriptionList/description-list.scss +1 -1
  19. package/components/DualListSelector/dual-list-selector.css +4 -2
  20. package/components/DualListSelector/dual-list-selector.scss +4 -2
  21. package/components/ExpandableSection/expandable-section.css +3 -1
  22. package/components/ExpandableSection/expandable-section.scss +4 -2
  23. package/components/Form/form.css +7 -5
  24. package/components/Form/form.scss +7 -5
  25. package/components/FormControl/form-control.css +109 -43
  26. package/components/FormControl/form-control.scss +139 -54
  27. package/components/HelperText/helper-text.css +13 -0
  28. package/components/HelperText/helper-text.scss +16 -1
  29. package/components/JumpLinks/jump-links.css +4 -2
  30. package/components/JumpLinks/jump-links.scss +4 -2
  31. package/components/Masthead/masthead.css +1 -1
  32. package/components/Masthead/masthead.scss +1 -1
  33. package/components/Menu/menu.css +4 -5
  34. package/components/Menu/menu.scss +2 -3
  35. package/components/MenuToggle/menu-toggle.css +42 -1
  36. package/components/MenuToggle/menu-toggle.scss +50 -1
  37. package/components/Nav/nav.css +41 -11
  38. package/components/Nav/nav.scss +52 -15
  39. package/components/NotificationDrawer/notification-drawer.css +3 -1
  40. package/components/NotificationDrawer/notification-drawer.scss +4 -2
  41. package/components/Page/page.css +16 -1
  42. package/components/Page/page.scss +17 -3
  43. package/components/Switch/switch.css +3 -1
  44. package/components/Switch/switch.scss +4 -2
  45. package/components/Table/table-grid.css +3 -1
  46. package/components/Table/table-grid.scss +4 -2
  47. package/components/Table/table.css +7 -5
  48. package/components/Table/table.scss +7 -4
  49. package/components/Tabs/tabs.css +6 -2
  50. package/components/Tabs/tabs.scss +8 -4
  51. package/components/Toolbar/toolbar.css +10 -3
  52. package/components/Toolbar/toolbar.scss +11 -3
  53. package/components/Wizard/wizard.css +4 -2
  54. package/components/Wizard/wizard.scss +4 -2
  55. package/components/_index.css +411 -104
  56. package/docs/components/Alert/examples/Alert.md +6 -0
  57. package/docs/components/Button/examples/Button.md +29 -0
  58. package/docs/components/Card/examples/Card.md +30 -0
  59. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +29 -0
  60. package/docs/components/DataList/examples/DataList.md +1 -1
  61. package/docs/components/Menu/examples/Menu.md +6 -6
  62. package/docs/components/Nav/examples/Navigation.md +3 -0
  63. package/docs/components/Table/examples/Table.md +14 -26
  64. package/docs/components/Tabs/examples/Tabs.md +145 -3
  65. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  66. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  67. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  68. package/docs/demos/Card/examples/Card.md +32 -24
  69. package/docs/demos/CardView/examples/CardView.md +2 -0
  70. package/docs/demos/Nav/examples/Nav.md +2 -0
  71. package/package.json +2 -2
  72. package/patternfly-base-no-globals.css +1 -1
  73. package/patternfly-base.css +1 -1
  74. package/patternfly-charts.css +3 -3
  75. package/patternfly-charts.scss +3 -3
  76. package/patternfly-no-globals.css +412 -105
  77. package/patternfly.css +412 -105
  78. package/patternfly.min.css +1 -1
  79. package/patternfly.min.css.map +1 -1
  80. package/sass-utilities/mixins.scss +8 -4
  81. package/docs/components/TabContent/examples/TabContent.md +0 -153
package/components/Tabs/tabs.scss CHANGED
@@ -129,7 +129,9 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
129
129
 
130
130
  // Expandable
131
131
  --#{$tabs}__toggle--Display: flex;
132
- --#{$tabs}__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
132
+ --#{$tabs}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
133
+ --#{$tabs}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
134
+ --#{$tabs}__toggle-icon--Transition: transform var(--#{$tabs}__toggle-icon--TransitionDuration) var(--#{$tabs}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
133
135
  --#{$tabs}__toggle-icon--Rotate: 0;
134
136
  --#{$tabs}--m-expanded__toggle-icon--Rotate: 90deg;
135
137
  --#{$tabs}--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
@@ -155,7 +157,9 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
155
157
 
156
158
  // Overflow menu toggle icon
157
159
  --#{$tabs}__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
158
- --#{$tabs}__link-toggle-icon--Transition: .2s ease-in 0s;
160
+ --#{$tabs}__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
161
+ --#{$tabs}__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
162
+ --#{$tabs}__link-toggle-icon--Transition: transform var(--#{$tabs}__link-toggle-icon--TransitionDuration) var(--#{$tabs}__link-toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
159
163
  --#{$tabs}__link-toggle-icon--Rotate: 0;
160
164
  --#{$tabs}__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
161
165
  --#{$tabs}__link--m-expanded__toggle-icon--Rotate: 90deg;
@@ -470,7 +474,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
470
474
  @include pf-v6-mirror-inline-on-rtl;
471
475
 
472
476
  display: inline-block;
473
- transition: var(--#{$tabs}__toggle-icon--Transition);
477
+ transition: var(--#{$tabs}__toggle-icon--Transition); // TODO remove shorthand in breaking change
474
478
  transform: rotate(var(--#{$tabs}__toggle-icon--Rotate));
475
479
  }
476
480
 
@@ -650,7 +654,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
650
654
  align-self: end;
651
655
  font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
652
656
  color: var(--#{$tabs}__link-toggle-icon--Color);
653
- transition: var(--#{$tabs}__link-toggle-icon--Transition);
657
+ transition: var(--#{$tabs}__link-toggle-icon--Transition); // TODO remove shorthand in breaking change
654
658
  transform: rotate(var(--#{$tabs}__link-toggle-icon--Rotate));
655
659
  }
656
660
 
package/components/Toolbar/toolbar.css CHANGED
@@ -37,7 +37,7 @@
37
37
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
38
38
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
39
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
40
- --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
40
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
41
41
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
42
42
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
43
43
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
@@ -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
  }
@@ -370,7 +375,9 @@
370
375
 
371
376
  .pf-v6-c-toolbar__expand-all-icon {
372
377
  display: inline-flex;
373
- transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
378
+ transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
379
+ transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
380
+ transition-property: transform;
374
381
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
375
382
  }
376
383
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
package/components/Toolbar/toolbar.scss CHANGED
@@ -67,7 +67,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
67
67
 
68
68
  // * Toolbar expand all
69
69
  --#{$toolbar}__expand-all-icon--Rotate: 0;
70
- --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
70
+ --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
71
71
  --#{$toolbar}__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
72
72
  --#{$toolbar}__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
73
73
 
@@ -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);
@@ -300,7 +306,9 @@ $pf-v6--include-toolbar-breakpoints: true !default;
300
306
  // - Toolbar expand all
301
307
  .#{$toolbar}__expand-all-icon {
302
308
  display: inline-flex;
303
- transition: transform var(--#{$toolbar}__expand-all-icon--TransitionDuration) var(--#{$toolbar}__expand-all-icon--TransitionTimingFunction);
309
+ transition-timing-function: var(--#{$toolbar}__expand-all-icon--TransitionTimingFunction);
310
+ transition-duration: var(--#{$toolbar}__expand-all-icon--TransitionDuration);
311
+ transition-property: transform;
304
312
  transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
305
313
 
306
314
  @include pf-v6-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
package/components/Wizard/wizard.css CHANGED
@@ -39,7 +39,7 @@
39
39
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
40
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
41
41
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
42
- --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
42
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
43
43
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
44
44
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
45
45
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -445,7 +445,9 @@
445
445
 
446
446
  .pf-v6-c-wizard__nav-link-toggle-icon {
447
447
  display: inline-block;
448
- transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
448
+ transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
449
+ transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
450
+ transition-property: transform;
449
451
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
450
452
  }
451
453
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
package/components/Wizard/wizard.scss CHANGED
@@ -63,7 +63,7 @@
63
63
  --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
64
64
  --#{$wizard}__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
65
65
  --#{$wizard}__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
66
- --#{$wizard}__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
66
+ --#{$wizard}__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
67
67
  --#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
68
68
  --#{$wizard}__nav-link-toggle-icon--Rotate: 0;
69
69
  --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -547,7 +547,9 @@
547
547
  @include pf-v6-mirror-inline-on-rtl;
548
548
 
549
549
  display: inline-block;
550
- transition: transform var(--#{$wizard}__nav-link-toggle-icon--TransitionDuration) var(--#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction);
550
+ transition-timing-function: var(--#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction);
551
+ transition-duration: var(--#{$wizard}__nav-link-toggle-icon--TransitionDuration);
552
+ transition-property: transform;
551
553
  transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));
552
554
  }
553
555