@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

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 (158) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Accordion/accordion.css +3 -3
  33. package/components/Accordion/accordion.scss +3 -3
  34. package/components/Alert/alert.css +8 -7
  35. package/components/Alert/alert.scss +8 -7
  36. package/components/Avatar/avatar.css +144 -0
  37. package/components/Avatar/avatar.scss +161 -0
  38. package/components/Banner/banner.css +7 -0
  39. package/components/Banner/banner.scss +7 -0
  40. package/components/Breadcrumb/breadcrumb.css +3 -3
  41. package/components/Breadcrumb/breadcrumb.scss +3 -3
  42. package/components/Button/button.css +20 -4
  43. package/components/Button/button.scss +24 -5
  44. package/components/Card/card.css +4 -4
  45. package/components/Card/card.scss +4 -4
  46. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  47. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  48. package/components/DataList/data-list.css +5 -5
  49. package/components/DataList/data-list.scss +5 -5
  50. package/components/DragDrop/drag-drop.css +4 -0
  51. package/components/DragDrop/drag-drop.scss +4 -0
  52. package/components/DualListSelector/dual-list-selector.css +1 -1
  53. package/components/DualListSelector/dual-list-selector.scss +1 -1
  54. package/components/Form/form.scss +1 -0
  55. package/components/FormControl/form-control.css +12 -2
  56. package/components/FormControl/form-control.scss +14 -2
  57. package/components/Hint/hint.css +2 -2
  58. package/components/Hint/hint.scss +2 -2
  59. package/components/Label/label.css +9 -3
  60. package/components/Label/label.scss +9 -3
  61. package/components/Masthead/masthead.css +1 -1
  62. package/components/Masthead/masthead.scss +1 -1
  63. package/components/Menu/menu.css +2 -2
  64. package/components/Menu/menu.scss +3 -3
  65. package/components/MenuToggle/menu-toggle.css +3 -0
  66. package/components/MenuToggle/menu-toggle.scss +4 -1
  67. package/components/ModalBox/modal-box.css +4 -4
  68. package/components/ModalBox/modal-box.scss +5 -5
  69. package/components/Nav/nav.css +2 -2
  70. package/components/Nav/nav.scss +2 -2
  71. package/components/NotificationDrawer/notification-drawer.css +3 -3
  72. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  73. package/components/Page/page.css +25 -22
  74. package/components/Page/page.scss +28 -28
  75. package/components/Pagination/pagination.css +12 -7
  76. package/components/Pagination/pagination.scss +15 -12
  77. package/components/Panel/panel.css +1 -1
  78. package/components/Panel/panel.scss +2 -2
  79. package/components/Popover/popover.css +1 -1
  80. package/components/Popover/popover.scss +1 -1
  81. package/components/Progress/progress.css +2 -2
  82. package/components/Progress/progress.scss +2 -2
  83. package/components/Sidebar/sidebar.css +4 -7
  84. package/components/Sidebar/sidebar.scss +9 -9
  85. package/components/Table/table-grid.css +25 -13
  86. package/components/Table/table-grid.scss +10 -5
  87. package/components/Table/table-tree-view.css +3 -0
  88. package/components/Table/table-tree-view.scss +2 -0
  89. package/components/Table/table.css +55 -21
  90. package/components/Table/table.scss +82 -34
  91. package/components/Tabs/tabs.css +19 -5
  92. package/components/Tabs/tabs.scss +22 -5
  93. package/components/Title/title.css +1 -1
  94. package/components/Title/title.scss +1 -1
  95. package/components/Tooltip/tooltip.css +1 -1
  96. package/components/Tooltip/tooltip.scss +1 -1
  97. package/components/TreeView/tree-view.css +7 -7
  98. package/components/TreeView/tree-view.scss +7 -7
  99. package/components/Wizard/wizard.css +4 -4
  100. package/components/Wizard/wizard.scss +4 -4
  101. package/components/_index.css +399 -140
  102. package/docs/components/Avatar/examples/Avatar.css +6 -0
  103. package/docs/components/Avatar/examples/Avatar.md +414 -40
  104. package/docs/components/Button/examples/Button.md +2 -2
  105. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  106. package/docs/components/DataList/examples/DataList.md +143 -11
  107. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  109. package/docs/components/Drawer/examples/Drawer.md +1 -1
  110. package/docs/components/DualListSelector/examples/DualListSelector.md +355 -139
  111. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  112. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  113. package/docs/components/Form/examples/Form.md +140 -16
  114. package/docs/components/FormControl/examples/FormControl.md +260 -20
  115. package/docs/components/HelperText/examples/HelperText.md +139 -11
  116. package/docs/components/Icon/examples/Icon.md +403 -31
  117. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  118. package/docs/components/InputGroup/examples/InputGroup.md +20 -8
  119. package/docs/components/Label/examples/Label.md +4029 -765
  120. package/docs/components/List/examples/List.md +78 -6
  121. package/docs/components/Login/examples/Login.md +104 -8
  122. package/docs/components/Menu/examples/Menu.md +221 -17
  123. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  124. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  125. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  126. package/docs/components/Pagination/examples/Pagination.md +111 -273
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  128. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  129. package/docs/components/Switch/examples/Switch.md +52 -4
  130. package/docs/components/Table/examples/Table.css +6 -0
  131. package/docs/components/Table/examples/Table.md +1322 -171
  132. package/docs/components/Tabs/examples/Tabs.md +18 -998
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +355 -115
  134. package/docs/components/Toolbar/examples/Toolbar.md +133 -25
  135. package/docs/components/TreeView/examples/TreeView.md +286 -118
  136. package/docs/components/Wizard/examples/Wizard.md +325 -25
  137. package/docs/demos/Alert/examples/Alert.md +181 -40
  138. package/docs/demos/Button/examples/Button.md +57 -45
  139. package/docs/demos/Card/examples/Card.md +280 -34
  140. package/docs/demos/CardView/examples/CardView.md +12 -12
  141. package/docs/demos/Compass/examples/Compass.md +91 -439
  142. package/docs/demos/Dashboard/examples/Dashboard.md +92 -41
  143. package/docs/demos/DataList/examples/DataList.md +74 -50
  144. package/docs/demos/Form/examples/BasicForms.md +112 -36
  145. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  146. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2570 -4968
  149. package/docs/demos/Table/examples/Table.md +407 -179
  150. package/docs/demos/Toolbar/examples/Toolbar.md +139 -46
  151. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  152. package/package.json +7 -7
  153. package/patternfly-base-no-globals.css +12 -10
  154. package/patternfly-base.css +12 -10
  155. package/patternfly-no-globals.css +411 -150
  156. package/patternfly.css +411 -150
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
package/components/Tabs/tabs.css CHANGED
@@ -50,10 +50,10 @@
50
50
  --pf-v6-c-tabs__link--BorderColor: transparent;
51
51
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
52
52
  --pf-v6-c-tabs__link--disabled--BorderColor: transparent;
53
- --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
54
- --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
55
- --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
56
- --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
54
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
55
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
56
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
57
57
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
58
58
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
59
59
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
@@ -72,9 +72,15 @@
72
72
  --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
73
73
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
74
74
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
- --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
76
75
  --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
77
76
  --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
77
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
78
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
79
+ --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
80
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
81
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
82
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
83
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
78
84
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
79
85
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
80
86
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -441,9 +447,17 @@
441
447
  }
442
448
  .pf-v6-c-tabs.pf-m-subtab {
443
449
  --pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
450
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart);
451
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd);
452
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart);
453
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd);
444
454
  --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
445
455
  --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
446
456
  }
457
+ .pf-v6-c-tabs.pf-m-subtab .pf-v6-c-tabs__link {
458
+ margin-block-start: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockStart);
459
+ margin-block-end: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd);
460
+ }
447
461
  .pf-v6-c-tabs.pf-m-page-insets {
448
462
  --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
449
463
  }
package/components/Tabs/tabs.scss CHANGED
@@ -70,10 +70,10 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
70
70
  --#{$tabs}__link--BorderColor: transparent;
71
71
  --#{$tabs}__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
72
72
  --#{$tabs}__link--disabled--BorderColor: transparent;
73
- --#{$tabs}__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
74
- --#{$tabs}__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
75
- --#{$tabs}__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
76
- --#{$tabs}__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
73
+ --#{$tabs}__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
74
+ --#{$tabs}__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
75
+ --#{$tabs}__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
76
+ --#{$tabs}__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
77
77
  --#{$tabs}__link--ColumnGap: var(--pf-t--global--spacer--sm);
78
78
  --#{$tabs}__link--disabled--Color: var(--pf-t--global--text--color--disabled);
79
79
  --#{$tabs}__link--disabled--BackgroundColor: transparent;
@@ -92,10 +92,18 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
92
92
  --#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
93
93
  --#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
94
94
  --#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
95
- --#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
96
95
  --#{$tabs}__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
97
96
  --#{$tabs}__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
98
97
 
98
+ // Subtab link
99
+ --#{$tabs}--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
100
+ --#{$tabs}--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
101
+ --#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
102
+ --#{$tabs}--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
103
+ --#{$tabs}--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
104
+ --#{$tabs}--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
105
+ --#{$tabs}--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
106
+
99
107
  // Link before
100
108
  --#{$tabs}__link--before--border-color--base: var(--pf-t--global--border--color--default);
101
109
  --#{$tabs}__link--before--border-width--base: var(--pf-t--global--border--width--regular);
@@ -512,8 +520,17 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
512
520
 
513
521
  &.pf-m-subtab {
514
522
  --#{$tabs}__link--FontSize: var(--#{$tabs}--m-subtab__link--FontSize);
523
+ --#{$tabs}__link--PaddingBlockStart: var(--#{$tabs}--m-subtab__link--PaddingBlockStart);
524
+ --#{$tabs}__link--PaddingBlockEnd: var(--#{$tabs}--m-subtab__link--PaddingBlockEnd);
525
+ --#{$tabs}__link--PaddingInlineStart: var(--#{$tabs}--m-subtab__link--PaddingInlineStart);
526
+ --#{$tabs}__link--PaddingInlineEnd: var(--#{$tabs}--m-subtab__link--PaddingInlineEnd);
515
527
  --#{$tabs}__item-action--c-button--FontSize: var(--#{$tabs}--m-subtab__item-action--c-button--FontSize);
516
528
  --#{$tabs}__add--c-button--FontSize: var(--#{$tabs}--m-subtab__add--c-button--FontSize);
529
+
530
+ .#{$tabs}__link {
531
+ margin-block-start: var(--#{$tabs}--m-subtab__link--MarginBlockStart);
532
+ margin-block-end: var(--#{$tabs}--m-subtab__link--MarginBlockEnd);
533
+ }
517
534
  }
518
535
 
519
536
  &.pf-m-page-insets {
package/components/Title/title.css CHANGED
@@ -41,7 +41,7 @@
41
41
 
42
42
  .pf-v6-c-title {
43
43
  font-family: var(--pf-v6-c-title--FontFamily);
44
- overflow-wrap: break-word;
44
+ overflow-wrap: anywhere;
45
45
  }
46
46
  .pf-v6-c-title.pf-m-4xl {
47
47
  font-size: var(--pf-v6-c-title--m-4xl--FontSize);
package/components/Title/title.scss CHANGED
@@ -71,7 +71,7 @@
71
71
 
72
72
  .#{$title} {
73
73
  font-family: var(--#{$title}--FontFamily);
74
- overflow-wrap: break-word;
74
+ overflow-wrap: anywhere;
75
75
 
76
76
  &.pf-m-4xl {
77
77
  font-size: var(--#{$title}--m-4xl--FontSize);
package/components/Tooltip/tooltip.css CHANGED
@@ -98,7 +98,7 @@
98
98
  font-size: var(--pf-v6-c-tooltip__content--FontSize);
99
99
  color: var(--pf-v6-c-tooltip__content--Color);
100
100
  text-align: center;
101
- overflow-wrap: break-word;
101
+ overflow-wrap: anywhere;
102
102
  background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
103
103
  border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
104
104
  }
package/components/Tooltip/tooltip.scss CHANGED
@@ -129,7 +129,7 @@
129
129
  font-size: var(--#{$tooltip}__content--FontSize);
130
130
  color: var(--#{$tooltip}__content--Color);
131
131
  text-align: center;
132
- overflow-wrap: break-word;
132
+ overflow-wrap: anywhere;
133
133
  background-color: var(--#{$tooltip}__content--BackgroundColor);
134
134
  border-radius: var(--#{$tooltip}__content--BorderRadius);
135
135
 
package/components/TreeView/tree-view.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .pf-v6-c-tree-view {
2
- --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
2
+ --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart) + var(--pf-v6-c-tree-view__node-toggle--PaddingInlineEnd) + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
3
3
  --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
4
4
  --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
5
- --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
6
+ --pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
7
+ --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
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;
@@ -48,9 +48,9 @@
48
48
  --pf-v6-c-tree-view__node-toggle--BackgroundColor: transparent;
49
49
  --pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-t--global--icon--color--regular);
50
50
  --pf-v6-c-tree-view__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
51
- --pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
52
52
  --pf-v6-c-tree-view__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
53
- --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
54
54
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
55
55
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
56
56
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
@@ -66,7 +66,7 @@
66
66
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
67
67
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
68
68
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
69
- --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
69
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
70
70
  --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
71
71
  --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
72
72
  --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
package/components/TreeView/tree-view.scss CHANGED
@@ -4,16 +4,16 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
4
4
 
5
5
  @include pf-root($tree-view) {
6
6
  // Node base
7
- --#{$tree-view}__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$tree-view}__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
7
+ --#{$tree-view}__node--indent--base: calc(var(--#{$tree-view}__node-toggle--PaddingInlineStart) + var(--#{$tree-view}__node-toggle--PaddingInlineEnd) + var(--#{$tree-view}__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
8
8
  --#{$tree-view}__node--nested-indent--base: calc(var(--#{$tree-view}__node--indent--base) - var(--pf-t--global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it
9
9
 
10
10
  // Content
11
11
  --#{$tree-view}__content--BorderRadius: var(--pf-t--global--border--radius--small);
12
12
 
13
13
  // Node
14
- --#{$tree-view}__node--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15
- --#{$tree-view}__node--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16
- --#{$tree-view}__node--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14
+ --#{$tree-view}__node--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
15
+ --#{$tree-view}__node--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16
+ --#{$tree-view}__node--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
17
17
  --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}__node--indent--base);
18
18
  --#{$tree-view}__node--Color: var(--pf-t--global--text--color--subtle);
19
19
  --#{$tree-view}__node--BackgroundColor: transparent;
@@ -66,9 +66,9 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
66
66
 
67
67
  // Toggle icon
68
68
  --#{$tree-view}__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
69
- --#{$tree-view}__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
69
+ --#{$tree-view}__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
70
70
  --#{$tree-view}__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
71
- --#{$tree-view}__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
71
+ --#{$tree-view}__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
72
72
  --#{$tree-view}__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
73
73
  --#{$tree-view}__node-toggle--MarginBlockStart: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
74
74
  --#{$tree-view}__node-toggle--MarginBlockEnd: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
@@ -92,7 +92,7 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
92
92
  --#{$tree-view}__node-icon--Color: var(--pf-t--global--icon--color--subtle);
93
93
  --#{$tree-view}__node-toggle-icon--base--Rotate: 0;
94
94
  --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__node-toggle-icon--base--Rotate);
95
- --#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
95
+ --#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
96
96
 
97
97
  // Disabled
98
98
  --#{$tree-view}__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
package/components/Wizard/wizard.css CHANGED
@@ -133,7 +133,7 @@
133
133
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
134
134
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
135
135
  --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
136
- --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
136
+ --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--sm);
137
137
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
138
138
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
139
139
  --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -259,7 +259,7 @@
259
259
  align-items: baseline;
260
260
  margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
261
261
  text-align: start;
262
- overflow-wrap: break-word;
262
+ overflow-wrap: anywhere;
263
263
  }
264
264
  .pf-v6-c-wizard__toggle-list-item:not(:last-child) {
265
265
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
@@ -395,7 +395,7 @@
395
395
  padding-inline: 0;
396
396
  color: var(--pf-v6-c-wizard__nav-link--Color);
397
397
  text-align: start;
398
- overflow-wrap: break-word;
398
+ overflow-wrap: anywhere;
399
399
  text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
400
400
  counter-increment: wizard-nav-count;
401
401
  background-color: transparent;
@@ -514,7 +514,7 @@
514
514
  flex-direction: column;
515
515
  overflow-x: hidden;
516
516
  overflow-y: auto;
517
- overflow-wrap: break-word;
517
+ overflow-wrap: anywhere;
518
518
  }
519
519
 
520
520
  .pf-v6-c-wizard__main-body {
package/components/Wizard/wizard.scss CHANGED
@@ -186,7 +186,7 @@
186
186
  // Footer
187
187
  --#{$wizard}__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
188
188
  --#{$wizard}--m-plain__footer--BackgroundColor: transparent;
189
- --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
189
+ --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--sm);
190
190
  --#{$wizard}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
191
191
  --#{$wizard}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
192
192
  --#{$wizard}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -325,7 +325,7 @@
325
325
  align-items: baseline;
326
326
  margin-block-end: var(--#{$wizard}__toggle-list-item--MarginBlockEnd);
327
327
  text-align: start;
328
- overflow-wrap: break-word;
328
+ overflow-wrap: anywhere;
329
329
 
330
330
  &:not(:last-child) {
331
331
  margin-inline-end: var(--#{$wizard}__toggle-list-item--not-last-child--MarginInlineEnd);
@@ -478,7 +478,7 @@
478
478
  padding-inline: 0;
479
479
  color: var(--#{$wizard}__nav-link--Color);
480
480
  text-align: start; // needed for when the item is a button
481
- overflow-wrap: break-word;
481
+ overflow-wrap: anywhere;
482
482
  text-decoration-line: var(--#{$wizard}__nav-link--TextDecoration);
483
483
  counter-increment: wizard-nav-count;
484
484
  background-color: transparent;
@@ -614,7 +614,7 @@
614
614
  flex-direction: column;
615
615
  overflow-x: hidden;
616
616
  overflow-y: auto;
617
- overflow-wrap: break-word;
617
+ overflow-wrap: anywhere;
618
618
  }
619
619
 
620
620
  .#{$wizard}__main-body {