@patternfly/patternfly 6.2.0-prerelease.8 → 6.2.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 (83) 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 +21 -2
  12. package/components/Card/card.scss +26 -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 +108 -41
  26. package/components/FormControl/form-control.scss +138 -49
  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/Popover/popover.css +2 -0
  44. package/components/Popover/popover.scss +2 -0
  45. package/components/Switch/switch.css +3 -1
  46. package/components/Switch/switch.scss +4 -2
  47. package/components/Table/table-grid.css +3 -1
  48. package/components/Table/table-grid.scss +4 -2
  49. package/components/Table/table.css +7 -5
  50. package/components/Table/table.scss +7 -4
  51. package/components/Tabs/tabs.css +6 -2
  52. package/components/Tabs/tabs.scss +8 -4
  53. package/components/Toolbar/toolbar.css +10 -3
  54. package/components/Toolbar/toolbar.scss +11 -3
  55. package/components/Wizard/wizard.css +4 -2
  56. package/components/Wizard/wizard.scss +4 -2
  57. package/components/_index.css +409 -102
  58. package/docs/components/Alert/examples/Alert.md +6 -0
  59. package/docs/components/Button/examples/Button.md +29 -0
  60. package/docs/components/Card/examples/Card.md +30 -0
  61. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +29 -0
  62. package/docs/components/DataList/examples/DataList.md +1 -1
  63. package/docs/components/Menu/examples/Menu.md +6 -6
  64. package/docs/components/Nav/examples/Navigation.md +3 -0
  65. package/docs/components/Table/examples/Table.md +14 -26
  66. package/docs/components/Tabs/examples/Tabs.md +145 -3
  67. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  68. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  69. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  70. package/docs/demos/Card/examples/Card.md +32 -24
  71. package/docs/demos/CardView/examples/CardView.md +2 -0
  72. package/docs/demos/Nav/examples/Nav.md +2 -0
  73. package/package.json +2 -2
  74. package/patternfly-base-no-globals.css +1 -1
  75. package/patternfly-base.css +1 -1
  76. package/patternfly-charts.css +3 -3
  77. package/patternfly-charts.scss +3 -3
  78. package/patternfly-no-globals.css +410 -103
  79. package/patternfly.css +410 -103
  80. package/patternfly.min.css +1 -1
  81. package/patternfly.min.css.map +1 -1
  82. package/sass-utilities/mixins.scss +8 -4
  83. package/docs/components/TabContent/examples/TabContent.md +0 -153
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