@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.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 (290) hide show
  1. package/RELEASE-NOTES.md +17 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pficon.scss +6 -0
  4. package/assets/pficon/pficon.woff +0 -0
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fonts.scss +22 -22
  10. package/base/_globals.scss +1 -1
  11. package/base/_icons.scss +1 -28
  12. package/base/_svg-icons.scss +6 -0
  13. package/base/_variables.scss +1 -1
  14. package/base/patternfly-common.css +0 -10
  15. package/base/patternfly-fonts.css +17 -17
  16. package/base/patternfly-icons.css +6 -20
  17. package/base/patternfly-pf-icons.css +5 -1
  18. package/base/themes/dark/_globals.scss +1 -1
  19. package/base/themes/dark/_variables.scss +1 -1
  20. package/components/AboutModalBox/about-modal-box.css +7 -7
  21. package/components/AboutModalBox/about-modal-box.scss +7 -7
  22. package/components/Accordion/accordion.css +2 -0
  23. package/components/Accordion/accordion.scss +2 -0
  24. package/components/Alert/alert.css +3 -3
  25. package/components/Alert/alert.scss +3 -3
  26. package/components/AppLauncher/app-launcher.css +2 -0
  27. package/components/AppLauncher/app-launcher.scss +2 -0
  28. package/components/Avatar/avatar.scss +2 -2
  29. package/components/Banner/banner.css +14 -14
  30. package/components/Banner/banner.scss +9 -13
  31. package/components/Breadcrumb/breadcrumb.css +2 -0
  32. package/components/Breadcrumb/breadcrumb.scss +2 -0
  33. package/components/CalendarMonth/calendar-month.css +2 -2
  34. package/components/CalendarMonth/calendar-month.scss +3 -3
  35. package/components/Card/card.css +20 -21
  36. package/components/Card/card.scss +22 -26
  37. package/components/Chip/chip.css +33 -24
  38. package/components/Chip/chip.scss +40 -31
  39. package/components/ChipGroup/chip-group.css +27 -17
  40. package/components/ChipGroup/chip-group.scss +36 -22
  41. package/components/Content/content.css +11 -5
  42. package/components/Content/content.scss +17 -9
  43. package/components/ContextSelector/context-selector.css +5 -1
  44. package/components/ContextSelector/context-selector.scss +6 -2
  45. package/components/DataList/data-list-grid.css +7 -7
  46. package/components/DataList/data-list-grid.scss +1 -1
  47. package/components/DataList/data-list.css +12 -11
  48. package/components/DataList/data-list.scss +5 -4
  49. package/components/DescriptionList/description-list.css +7 -7
  50. package/components/DescriptionList/description-list.scss +7 -7
  51. package/components/Divider/divider.css +2 -2
  52. package/components/Divider/divider.scss +3 -3
  53. package/components/Drawer/drawer.css +15 -16
  54. package/components/Drawer/drawer.scss +2 -3
  55. package/components/Dropdown/dropdown.css +12 -10
  56. package/components/Dropdown/dropdown.scss +2 -0
  57. package/components/DualListSelector/dual-list-selector.css +1 -1
  58. package/components/DualListSelector/dual-list-selector.scss +1 -1
  59. package/components/EmptyState/empty-state.css +46 -52
  60. package/components/EmptyState/empty-state.scss +58 -57
  61. package/components/ExpandableSection/expandable-section.css +2 -0
  62. package/components/ExpandableSection/expandable-section.scss +2 -0
  63. package/components/Form/form.css +12 -12
  64. package/components/Form/form.scss +7 -7
  65. package/components/FormControl/form-control.css +2 -5
  66. package/components/FormControl/themes/dark/form-control.scss +2 -6
  67. package/components/Hint/hint.css +2 -2
  68. package/components/Hint/hint.scss +2 -2
  69. package/components/Label/label.css +43 -30
  70. package/components/Label/label.scss +49 -34
  71. package/components/LabelGroup/label-group.css +26 -22
  72. package/components/LabelGroup/label-group.scss +31 -26
  73. package/components/Login/login.css +11 -11
  74. package/components/Login/login.scss +10 -10
  75. package/components/Masthead/masthead.css +4 -4
  76. package/components/Masthead/masthead.scss +4 -4
  77. package/components/Menu/menu.css +9 -6
  78. package/components/Menu/menu.scss +34 -31
  79. package/components/MenuToggle/menu-toggle.css +3 -1
  80. package/components/MenuToggle/menu-toggle.scss +3 -1
  81. package/components/ModalBox/modal-box.css +9 -8
  82. package/components/ModalBox/modal-box.scss +11 -11
  83. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  84. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  85. package/components/Nav/nav.css +1 -1
  86. package/components/Nav/nav.scss +2 -2
  87. package/components/NotificationDrawer/notification-drawer.css +3 -3
  88. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  89. package/components/Page/page.css +71 -71
  90. package/components/Page/page.scss +12 -12
  91. package/components/Pagination/pagination.css +2 -2
  92. package/components/Popover/popover.css +25 -31
  93. package/components/Popover/popover.scss +27 -32
  94. package/components/Popover/themes/dark/popover.scss +2 -8
  95. package/components/Progress/progress.css +13 -10
  96. package/components/Progress/progress.scss +13 -10
  97. package/components/ProgressStepper/progress-stepper.css +5 -5
  98. package/components/ProgressStepper/progress-stepper.scss +5 -5
  99. package/components/SearchInput/search-input.css +4 -2
  100. package/components/SearchInput/search-input.scss +4 -2
  101. package/components/Select/select.css +1 -1
  102. package/components/Select/select.scss +1 -1
  103. package/components/Sidebar/sidebar.css +69 -26
  104. package/components/Sidebar/sidebar.scss +84 -27
  105. package/components/SimpleList/simple-list.css +1 -1
  106. package/components/SimpleList/simple-list.scss +2 -2
  107. package/components/Spinner/spinner.css +4 -4
  108. package/components/Spinner/spinner.scss +4 -4
  109. package/components/Table/table-grid.css +28 -28
  110. package/components/Table/table-scrollable.css +31 -26
  111. package/components/Table/table-scrollable.scss +33 -28
  112. package/components/Table/table-tree-view.css +14 -4
  113. package/components/Table/table-tree-view.scss +15 -0
  114. package/components/Table/table.css +7 -2
  115. package/components/Table/table.scss +9 -2
  116. package/components/Tabs/tabs.css +0 -4
  117. package/components/Tabs/tabs.scss +0 -7
  118. package/components/TextInputGroup/text-input-group.css +6 -4
  119. package/components/TextInputGroup/text-input-group.scss +6 -5
  120. package/components/Tile/tile.css +1 -1
  121. package/components/Tile/tile.scss +1 -1
  122. package/components/Timestamp/timestamp.css +3 -3
  123. package/components/Timestamp/timestamp.scss +3 -3
  124. package/components/Toolbar/toolbar.css +67 -39
  125. package/components/Toolbar/toolbar.scss +39 -5
  126. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  127. package/components/Tooltip/tooltip.css +7 -12
  128. package/components/Tooltip/tooltip.scss +6 -3
  129. package/components/TreeView/tree-view.css +7 -15
  130. package/components/TreeView/tree-view.scss +7 -18
  131. package/components/Wizard/wizard.css +16 -1
  132. package/components/Wizard/wizard.scss +20 -2
  133. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  134. package/docs/components/Accordion/examples/Accordion.md +12 -12
  135. package/docs/components/ActionList/examples/ActionList.md +6 -6
  136. package/docs/components/Alert/examples/Alert.md +19 -19
  137. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  138. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  139. package/docs/components/Avatar/examples/Avatar.md +11 -11
  140. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  141. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  142. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  143. package/docs/components/Badge/examples/Badge.md +5 -5
  144. package/docs/components/Banner/examples/Banner.md +8 -8
  145. package/docs/components/Brand/examples/Brand.md +9 -9
  146. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  147. package/docs/components/Button/examples/Button.md +35 -35
  148. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  149. package/docs/components/Card/examples/Card.md +139 -64
  150. package/docs/components/Check/examples/Check.md +15 -19
  151. package/docs/components/Chip/examples/Chip.md +70 -52
  152. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  153. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  154. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  155. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  156. package/docs/components/Content/examples/Content.md +37 -9
  157. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  158. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  159. package/docs/components/DataList/examples/DataList.md +187 -148
  160. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  161. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  162. package/docs/components/Divider/examples/Divider.md +10 -10
  163. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  164. package/docs/components/Drawer/examples/Drawer.md +43 -43
  165. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  166. package/docs/components/Dropdown/examples/Dropdown.md +123 -99
  167. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  168. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  169. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  170. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  171. package/docs/components/Form/examples/Form.md +64 -64
  172. package/docs/components/FormControl/examples/FormControl.md +20 -20
  173. package/docs/components/HelperText/examples/HelperText.md +12 -12
  174. package/docs/components/Hint/examples/Hint.md +7 -7
  175. package/docs/components/Icon/examples/Icon.md +10 -10
  176. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  177. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  178. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  179. package/docs/components/Label/examples/Label.md +1427 -746
  180. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  181. package/docs/components/List/examples/List.md +18 -18
  182. package/docs/components/LogViewer/examples/LogViewer.md +79 -73
  183. package/docs/components/Login/examples/Login.md +32 -32
  184. package/docs/components/Masthead/examples/masthead.md +9 -9
  185. package/docs/components/Menu/examples/Menu.md +82 -80
  186. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  187. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  188. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  189. package/docs/components/Nav/examples/Navigation.md +69 -69
  190. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  191. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  192. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  193. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  194. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  195. package/docs/components/Page/examples/Page.md +54 -54
  196. package/docs/components/Pagination/examples/Pagination.md +27 -27
  197. package/docs/components/Panel/examples/Panel.md +10 -10
  198. package/docs/components/Popover/examples/Popover.md +201 -144
  199. package/docs/components/Progress/examples/Progress.md +31 -60
  200. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  201. package/docs/components/Radio/examples/Radio.md +11 -11
  202. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  203. package/docs/components/Select/examples/Select.md +367 -313
  204. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  205. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  206. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  207. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  208. package/docs/components/Slider/examples/Slider.md +24 -24
  209. package/docs/components/Spinner/examples/Spinner.md +24 -24
  210. package/docs/components/Switch/examples/Switch.md +19 -19
  211. package/docs/components/TabContent/examples/TabContent.md +13 -13
  212. package/docs/components/Table/examples/Table.css +4 -0
  213. package/docs/components/Table/examples/Table.md +3163 -1712
  214. package/docs/components/Tabs/examples/Tabs.md +149 -149
  215. package/docs/components/TextInputGroup/examples/TextInputGroup.md +362 -280
  216. package/docs/components/Tile/examples/Tile.md +15 -15
  217. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  218. package/docs/components/Title/examples/Title.md +17 -17
  219. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  220. package/docs/components/Toolbar/examples/Toolbar.md +471 -378
  221. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  222. package/docs/components/TreeView/examples/TreeView.md +34 -34
  223. package/docs/components/Truncate/examples/Truncate.md +4 -4
  224. package/docs/components/Wizard/examples/Wizard.md +119 -127
  225. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  226. package/docs/demos/Alert/examples/Alert.md +13 -13
  227. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  228. package/docs/demos/Banner/examples/Banner.md +8 -9
  229. package/docs/demos/Card/examples/Card.md +219 -156
  230. package/docs/demos/CardView/examples/CardView.md +56 -29
  231. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  232. package/docs/demos/Dashboard/examples/Dashboard.md +51 -35
  233. package/docs/demos/DataList/examples/DataList.md +160 -111
  234. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  235. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  236. package/docs/demos/Form/examples/BasicForms.md +28 -22
  237. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  238. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  239. package/docs/demos/Masthead/examples/Masthead.md +32 -35
  240. package/docs/demos/Modal/examples/Modal.md +54 -66
  241. package/docs/demos/Nav/examples/Nav.md +47 -47
  242. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  243. package/docs/demos/Page/examples/Page.md +37 -37
  244. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  245. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +83 -67
  246. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  247. package/docs/demos/Table/examples/Table.md +2465 -478
  248. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  249. package/docs/demos/Toolbar/examples/Toolbar.md +1811 -177
  250. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  251. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  252. package/docs/layouts/Flex/examples/Flex.md +98 -98
  253. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  254. package/docs/layouts/Grid/examples/Grid.md +9 -9
  255. package/docs/layouts/Level/examples/Level.md +5 -5
  256. package/docs/layouts/Split/examples/Split.md +7 -7
  257. package/docs/layouts/Stack/examples/Stack.md +6 -6
  258. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  259. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  260. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  261. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  262. package/docs/utilities/Display/examples/Display.md +11 -11
  263. package/docs/utilities/Flex/examples/Flex.md +34 -34
  264. package/docs/utilities/Float/examples/Float.md +4 -4
  265. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  266. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  267. package/docs/utilities/Text/examples/Text.md +27 -27
  268. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  269. package/layouts/Gallery/gallery.css +1 -1
  270. package/layouts/Gallery/gallery.scss +1 -1
  271. package/layouts/Grid/grid.css +7 -7
  272. package/layouts/Grid/grid.scss +2 -2
  273. package/package.json +59 -65
  274. package/patternfly-base-no-reset.css +23 -47
  275. package/patternfly-base.css +23 -47
  276. package/patternfly-no-reset.css +770 -652
  277. package/patternfly.css +770 -652
  278. package/patternfly.min.css +1 -1
  279. package/patternfly.min.css.map +1 -1
  280. package/sass-utilities/functions.scss +8 -24
  281. package/sass-utilities/mixins.scss +15 -39
  282. package/sass-utilities/scss-variables.scss +1 -1
  283. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  284. package/utilities/Spacing/spacing.scss +2 -2
  285. package/base/_shield-inheritable.scss +0 -69
  286. package/base/_shield-noninheritable.scss +0 -13
  287. package/base/patternfly-shield-inheritable.css +0 -66
  288. package/base/patternfly-shield-inheritable.scss +0 -4
  289. package/base/patternfly-shield-noninheritable.css +0 -9
  290. package/base/patternfly-shield-noninheritable.scss +0 -4
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  .pf-c-text-input-group {
2
- // Component
3
2
  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
4
3
 
5
4
  // Base border
@@ -31,7 +30,8 @@
31
30
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
32
31
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
33
32
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
34
- --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
33
+ --pf-c-text-input-group__text-input--placeholder--Color: var(--pf-global--Color--dark-200);
34
+ --pf-c-text-input-group__text-input--BackgroundColor: transparent;
35
35
 
36
36
  // Icon
37
37
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
@@ -106,9 +106,9 @@
106
106
 
107
107
  .pf-c-text-input-group__text {
108
108
  display: inline-grid;
109
- grid-template-columns: 1fr;
110
- grid-template-areas: "text-input";
111
109
  flex: 1;
110
+ grid-template-areas: "text-input";
111
+ grid-template-columns: 1fr;
112
112
 
113
113
  &::before,
114
114
  &::after {
@@ -155,6 +155,7 @@
155
155
  width: 100%;
156
156
  min-width: var(--pf-c-text-input-group__text-input--MinWidth);
157
157
  padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
158
+ background-color: var(--pf-c-text-input-group__text-input--BackgroundColor);
158
159
  border: 0;
159
160
 
160
161
  &,
@@ -167,7 +168,7 @@
167
168
  }
168
169
 
169
170
  &::placeholder {
170
- color: var(--pf-c-text-input-group--placeholder--Color);
171
+ color: var(--pf-c-text-input-group__text-input--placeholder--Color);
171
172
  }
172
173
  }
173
174
 
package/components/Tile/tile.css CHANGED
@@ -42,11 +42,11 @@
42
42
  --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
43
43
  position: relative;
44
44
  display: inline-grid;
45
+ grid-template-rows: min-content;
45
46
  padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
46
47
  text-align: center;
47
48
  cursor: pointer;
48
49
  background-color: var(--pf-c-tile--BackgroundColor);
49
- grid-template-rows: min-content;
50
50
  transition: var(--pf-c-tile--Transition);
51
51
  transform: translateY(var(--pf-c-tile--TranslateY));
52
52
  }
package/components/Tile/tile.scss CHANGED
@@ -63,11 +63,11 @@
63
63
 
64
64
  position: relative;
65
65
  display: inline-grid;
66
+ grid-template-rows: min-content;
66
67
  padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
67
68
  text-align: center;
68
69
  cursor: pointer;
69
70
  background-color: var(--pf-c-tile--BackgroundColor);
70
- grid-template-rows: min-content;
71
71
  transition: var(--pf-c-tile--Transition);
72
72
  transform: translateY(var(--pf-c-tile--TranslateY));
73
73
 
package/components/Timestamp/timestamp.css CHANGED
@@ -17,12 +17,12 @@
17
17
  outline-offset: var(--pf-c-timestamp--OutlineOffset);
18
18
  }
19
19
  .pf-c-timestamp.pf-m-help-text {
20
- cursor: pointer;
21
20
  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
22
- text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
23
21
  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
24
- text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
22
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
25
23
  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
24
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
25
+ cursor: pointer;
26
26
  }
27
27
  .pf-c-timestamp.pf-m-help-text:hover {
28
28
  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
package/components/Timestamp/timestamp.scss CHANGED
@@ -20,12 +20,12 @@
20
20
  outline-offset: var(--pf-c-timestamp--OutlineOffset);
21
21
 
22
22
  &.pf-m-help-text {
23
- cursor: pointer;
24
23
  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
25
- text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
26
24
  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
27
- text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
25
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
28
26
  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
27
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
28
+ cursor: pointer;
29
29
 
30
30
  &:hover {
31
31
  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
package/components/Toolbar/toolbar.css CHANGED
@@ -54,13 +54,17 @@
54
54
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
55
55
  --pf-c-toolbar__item--Display: block;
56
56
  --pf-c-toolbar__item--MinWidth--base: auto;
57
+ --pf-c-toolbar__item--AlignSelf: auto;
57
58
  --pf-c-toolbar__group--Display: flex;
59
+ --pf-c-toolbar__group--AlignItems: baseline;
60
+ --pf-c-toolbar__group--AlignSelf: auto;
58
61
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
59
62
  --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
60
63
  --pf-c-toolbar__content--Display: flex;
61
64
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
62
65
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
63
66
  --pf-c-toolbar__content-section--Display: flex;
67
+ --pf-c-toolbar__content-section--AlignItems: baseline;
64
68
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
65
69
  --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
66
70
  --pf-c-toolbar__expandable-content--Display: grid;
@@ -107,8 +111,8 @@
107
111
  --pf-c-toolbar--m-full-height__item--Display: flex;
108
112
  --pf-c-toolbar--m-full-height__item--AlignItems: center;
109
113
  position: relative;
110
- row-gap: var(--pf-c-toolbar--RowGap);
111
114
  display: grid;
115
+ row-gap: var(--pf-c-toolbar--RowGap);
112
116
  padding-top: var(--pf-c-toolbar--PaddingTop);
113
117
  padding-bottom: var(--pf-c-toolbar--PaddingBottom);
114
118
  background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -182,9 +186,22 @@
182
186
  .pf-c-toolbar__group {
183
187
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
184
188
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
185
- align-items: center;
189
+ align-items: var(--pf-c-toolbar__group--AlignItems);
190
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
186
191
  margin-right: var(--pf-c-toolbar--spacer);
187
192
  }
193
+ .pf-c-toolbar__group.pf-m-align-items-center {
194
+ align-items: center;
195
+ }
196
+ .pf-c-toolbar__group.pf-m-align-items-baseline {
197
+ align-items: baseline;
198
+ }
199
+ .pf-c-toolbar__group.pf-m-align-self-center {
200
+ align-self: center;
201
+ }
202
+ .pf-c-toolbar__group.pf-m-align-self-baseline {
203
+ align-self: baseline;
204
+ }
188
205
  .pf-c-toolbar__group.pf-m-button-group {
189
206
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
190
207
  }
@@ -225,6 +242,7 @@
225
242
  --pf-c-toolbar__item--Width--base: var(--pf-c-toolbar__item--Width);
226
243
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth);
227
244
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__item--Display);
245
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
228
246
  width: var(--pf-c-toolbar__item--Width--base);
229
247
  min-width: var(--pf-c-toolbar__item--MinWidth--base);
230
248
  margin-right: var(--pf-c-toolbar--spacer);
@@ -279,6 +297,12 @@
279
297
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth-on-2xl, var(--pf-c-toolbar__item--MinWidth-on-xl, var(--pf-c-toolbar__item--MinWidth-on-lg, var(--pf-c-toolbar__item--MinWidth-on-md, var(--pf-c-toolbar__item--MinWidth-on-sm, var(--pf-c-toolbar__item--MinWidth))))));
280
298
  }
281
299
  }
300
+ .pf-c-toolbar__item.pf-m-align-self-center {
301
+ align-self: center;
302
+ }
303
+ .pf-c-toolbar__item.pf-m-align-self-baseline {
304
+ align-self: baseline;
305
+ }
282
306
  .pf-c-toolbar__item.pf-m-overflow-menu {
283
307
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
284
308
  }
@@ -323,20 +347,24 @@
323
347
  .pf-c-toolbar__content,
324
348
  .pf-c-toolbar__content-section {
325
349
  flex-wrap: wrap;
326
- align-items: center;
327
350
  }
328
351
 
329
352
  .pf-c-toolbar__content {
330
353
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
331
354
  position: relative;
355
+ align-items: center;
332
356
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
333
357
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
334
358
  }
335
359
 
336
360
  .pf-c-toolbar__content-section {
337
361
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
362
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
338
363
  width: 100%;
339
364
  }
365
+ .pf-c-toolbar__content-section.pf-m-align-items-center {
366
+ align-items: center;
367
+ }
340
368
 
341
369
  .pf-c-toolbar__expandable-content {
342
370
  position: absolute;
@@ -377,9 +405,9 @@
377
405
  .pf-c-toolbar__group.pf-m-chip-container {
378
406
  display: flex;
379
407
  flex-wrap: wrap;
408
+ grid-row-gap: 0;
380
409
  align-items: baseline;
381
410
  margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
382
- grid-row-gap: 0;
383
411
  }
384
412
  .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item,
385
413
  .pf-c-toolbar__group.pf-m-chip-container .pf-c-toolbar__item {
@@ -429,7 +457,7 @@
429
457
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
430
458
  }
431
459
  .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__group,
432
- .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__item {
460
+ .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__item {
433
461
  display: flex;
434
462
  flex: 0 1 auto;
435
463
  }
@@ -442,7 +470,7 @@
442
470
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
443
471
  }
444
472
  .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__group,
445
- .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__item {
473
+ .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__item {
446
474
  display: flex;
447
475
  flex: 0 1 auto;
448
476
  }
@@ -455,7 +483,7 @@
455
483
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
456
484
  }
457
485
  .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__group,
458
- .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__item {
486
+ .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__item {
459
487
  display: flex;
460
488
  flex: 0 1 auto;
461
489
  }
@@ -468,7 +496,7 @@
468
496
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
469
497
  }
470
498
  .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__group,
471
- .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__item {
499
+ .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__item {
472
500
  display: flex;
473
501
  flex: 0 1 auto;
474
502
  }
@@ -481,7 +509,7 @@
481
509
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
482
510
  }
483
511
  .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__group,
484
- .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__item {
512
+ .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__item {
485
513
  display: flex;
486
514
  flex: 0 1 auto;
487
515
  }
@@ -515,131 +543,131 @@
515
543
  }
516
544
  @media (min-width: 576px) {
517
545
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-sm,
518
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm {
546
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm {
519
547
  margin-left: auto;
520
548
  }
521
549
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-sm ~ .pf-m-pagination,
522
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm ~ .pf-m-pagination {
550
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm ~ .pf-m-pagination {
523
551
  margin-left: 0;
524
552
  }
525
553
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-sm,
526
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm {
554
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm {
527
555
  margin-left: 0;
528
556
  }
529
557
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-sm ~ .pf-m-pagination,
530
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm ~ .pf-m-pagination {
558
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm ~ .pf-m-pagination {
531
559
  margin-left: auto;
532
560
  }
533
561
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-sm,
534
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-sm {
562
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-sm {
535
563
  flex-wrap: nowrap;
536
564
  }
537
565
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-sm,
538
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-sm {
566
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-sm {
539
567
  flex-wrap: wrap;
540
568
  }
541
569
  }
542
570
  @media (min-width: 768px) {
543
571
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-md,
544
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md {
572
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md {
545
573
  margin-left: auto;
546
574
  }
547
575
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-md ~ .pf-m-pagination,
548
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md ~ .pf-m-pagination {
576
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md ~ .pf-m-pagination {
549
577
  margin-left: 0;
550
578
  }
551
579
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-md,
552
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md {
580
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md {
553
581
  margin-left: 0;
554
582
  }
555
583
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-md ~ .pf-m-pagination,
556
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md ~ .pf-m-pagination {
584
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md ~ .pf-m-pagination {
557
585
  margin-left: auto;
558
586
  }
559
587
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-md,
560
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-md {
588
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-md {
561
589
  flex-wrap: nowrap;
562
590
  }
563
591
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-md,
564
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-md {
592
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-md {
565
593
  flex-wrap: wrap;
566
594
  }
567
595
  }
568
596
  @media (min-width: 992px) {
569
597
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-lg,
570
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg {
598
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg {
571
599
  margin-left: auto;
572
600
  }
573
601
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-lg ~ .pf-m-pagination,
574
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg ~ .pf-m-pagination {
602
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg ~ .pf-m-pagination {
575
603
  margin-left: 0;
576
604
  }
577
605
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-lg,
578
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg {
606
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg {
579
607
  margin-left: 0;
580
608
  }
581
609
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-lg ~ .pf-m-pagination,
582
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg ~ .pf-m-pagination {
610
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg ~ .pf-m-pagination {
583
611
  margin-left: auto;
584
612
  }
585
613
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-lg,
586
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-lg {
614
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-lg {
587
615
  flex-wrap: nowrap;
588
616
  }
589
617
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-lg,
590
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-lg {
618
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-lg {
591
619
  flex-wrap: wrap;
592
620
  }
593
621
  }
594
622
  @media (min-width: 1200px) {
595
623
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-xl,
596
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl {
624
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl {
597
625
  margin-left: auto;
598
626
  }
599
627
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-xl ~ .pf-m-pagination,
600
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl ~ .pf-m-pagination {
628
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl ~ .pf-m-pagination {
601
629
  margin-left: 0;
602
630
  }
603
631
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-xl,
604
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl {
632
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl {
605
633
  margin-left: 0;
606
634
  }
607
635
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-xl ~ .pf-m-pagination,
608
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl ~ .pf-m-pagination {
636
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl ~ .pf-m-pagination {
609
637
  margin-left: auto;
610
638
  }
611
639
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-xl,
612
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-xl {
640
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-xl {
613
641
  flex-wrap: nowrap;
614
642
  }
615
643
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-xl,
616
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-xl {
644
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-xl {
617
645
  flex-wrap: wrap;
618
646
  }
619
647
  }
620
648
  @media (min-width: 1450px) {
621
649
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-2xl,
622
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl {
650
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl {
623
651
  margin-left: auto;
624
652
  }
625
653
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-2xl ~ .pf-m-pagination,
626
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl ~ .pf-m-pagination {
654
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl ~ .pf-m-pagination {
627
655
  margin-left: 0;
628
656
  }
629
657
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-2xl,
630
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl {
658
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl {
631
659
  margin-left: 0;
632
660
  }
633
661
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-2xl ~ .pf-m-pagination,
634
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl ~ .pf-m-pagination {
662
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl ~ .pf-m-pagination {
635
663
  margin-left: auto;
636
664
  }
637
665
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-2xl,
638
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-2xl {
666
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-2xl {
639
667
  flex-wrap: nowrap;
640
668
  }
641
669
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-2xl,
642
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-2xl {
670
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-2xl {
643
671
  flex-wrap: wrap;
644
672
  }
645
673
  }
package/components/Toolbar/toolbar.scss CHANGED
@@ -13,9 +13,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
13
13
  // Item
14
14
  --pf-c-toolbar__item--Display: block;
15
15
  --pf-c-toolbar__item--MinWidth--base: auto;
16
+ --pf-c-toolbar__item--AlignSelf: auto;
16
17
 
17
18
  // Group
18
19
  --pf-c-toolbar__group--Display: flex;
20
+ --pf-c-toolbar__group--AlignItems: baseline;
21
+ --pf-c-toolbar__group--AlignSelf: auto;
19
22
 
20
23
  // Sticky
21
24
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
@@ -28,6 +31,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
28
31
 
29
32
  // Content section
30
33
  --pf-c-toolbar__content-section--Display: flex;
34
+ --pf-c-toolbar__content-section--AlignItems: baseline;
31
35
 
32
36
  // Insets
33
37
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md); // make this the default inset at breaking change
@@ -127,8 +131,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
127
131
  }
128
132
 
129
133
  position: relative;
130
- row-gap: var(--pf-c-toolbar--RowGap);
131
134
  display: grid;
135
+ row-gap: var(--pf-c-toolbar--RowGap);
132
136
  padding-top: var(--pf-c-toolbar--PaddingTop);
133
137
  padding-bottom: var(--pf-c-toolbar--PaddingBottom);
134
138
  background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -208,9 +212,26 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
208
212
 
209
213
  @include pf-hidden-visible(var(--pf-c-toolbar__group--Display));
210
214
 
211
- align-items: center;
215
+ align-items: var(--pf-c-toolbar__group--AlignItems);
216
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
212
217
  margin-right: var(--pf-c-toolbar--spacer);
213
218
 
219
+ &.pf-m-align-items-center {
220
+ align-items: center;
221
+ }
222
+
223
+ &.pf-m-align-items-baseline {
224
+ align-items: baseline;
225
+ }
226
+
227
+ &.pf-m-align-self-center {
228
+ align-self: center;
229
+ }
230
+
231
+ &.pf-m-align-self-baseline {
232
+ align-self: baseline;
233
+ }
234
+
214
235
  // Button group
215
236
  &.pf-m-button-group {
216
237
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
@@ -270,10 +291,19 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
270
291
  @include pf-build-css-variable-stack("--pf-c-toolbar__item--MinWidth--base", "--pf-c-toolbar__item--MinWidth", $pf-c-toolbar--breakpoint-map);
271
292
  @include pf-hidden-visible(var(--pf-c-toolbar__item--Display));
272
293
 
294
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
273
295
  width: var(--pf-c-toolbar__item--Width--base);
274
296
  min-width: var(--pf-c-toolbar__item--MinWidth--base);
275
297
  margin-right: var(--pf-c-toolbar--spacer);
276
298
 
299
+ &.pf-m-align-self-center {
300
+ align-self: center;
301
+ }
302
+
303
+ &.pf-m-align-self-baseline {
304
+ align-self: baseline;
305
+ }
306
+
277
307
  // Overflow menu
278
308
  &.pf-m-overflow-menu {
279
309
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
@@ -329,7 +359,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
329
359
  }
330
360
  }
331
361
 
332
-
333
362
  .pf-c-toolbar__expand-all-icon {
334
363
  display: inline-block;
335
364
  transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -339,7 +368,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
339
368
  .pf-c-toolbar__content,
340
369
  .pf-c-toolbar__content-section {
341
370
  flex-wrap: wrap;
342
- align-items: center;
343
371
  }
344
372
 
345
373
  // Content
@@ -347,6 +375,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
347
375
  @include pf-hidden-visible(var(--pf-c-toolbar__content--Display));
348
376
 
349
377
  position: relative;
378
+ align-items: center;
350
379
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
351
380
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
352
381
  }
@@ -355,7 +384,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
355
384
  .pf-c-toolbar__content-section {
356
385
  @include pf-hidden-visible(var(--pf-c-toolbar__content-section--Display));
357
386
 
387
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
358
388
  width: 100%;
389
+
390
+ &.pf-m-align-items-center {
391
+ align-items: center;
392
+ }
359
393
  }
360
394
 
361
395
  // Expandable content
@@ -403,9 +437,9 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
403
437
  .pf-c-toolbar__group.pf-m-chip-container {
404
438
  display: flex;
405
439
  flex-wrap: wrap;
440
+ grid-row-gap: 0;
406
441
  align-items: baseline;
407
442
  margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
408
- grid-row-gap: 0;
409
443
 
410
444
  .pf-c-toolbar__item {
411
445
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--spacer);
package/components/Tooltip/themes/dark/tooltip.scss CHANGED
@@ -2,17 +2,7 @@
2
2
 
3
3
  @mixin pf-theme-dark-tooltip() {
4
4
  .pf-c-tooltip {
5
- --pf-c-tooltip--BoxShadow: none;
6
5
  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
7
- }
8
-
9
- .pf-c-tooltip,
10
- .pf-c-tooltip__arrow {
11
- border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
12
- }
13
-
14
- .pf-c-tooltip__arrow {
15
- --pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
16
- --pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
6
+ --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
17
7
  }
18
8
  }
package/components/Tooltip/tooltip.css CHANGED
@@ -8,8 +8,10 @@
8
8
  --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
9
9
  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
10
10
  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
11
- --pf-c-tooltip__arrow--Width: 0.5rem;
12
- --pf-c-tooltip__arrow--Height: 0.5rem;
11
+ --pf-c-tooltip__arrow--Width: 0.9375rem;
12
+ --pf-c-tooltip__arrow--Height: 0.9375rem;
13
+ --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
14
+ --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
13
15
  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
14
16
  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
15
17
  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -79,18 +81,11 @@
79
81
  width: var(--pf-c-tooltip__arrow--Width);
80
82
  height: var(--pf-c-tooltip__arrow--Height);
81
83
  pointer-events: none;
82
- background-color: var(--pf-c-tooltip__content--BackgroundColor);
84
+ background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
85
+ box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
83
86
  }
84
87
 
85
88
  :where(.pf-theme-dark) .pf-c-tooltip {
86
- --pf-c-tooltip--BoxShadow: none;
87
89
  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
88
- }
89
- :where(.pf-theme-dark) .pf-c-tooltip,
90
- :where(.pf-theme-dark) .pf-c-tooltip__arrow {
91
- border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
92
- }
93
- :where(.pf-theme-dark) .pf-c-tooltip__arrow {
94
- --pf-c-tooltip__arrow--Width: 0.9375rem;
95
- --pf-c-tooltip__arrow--Height: 0.9375rem;
90
+ --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
96
91
  }
package/components/Tooltip/tooltip.scss CHANGED
@@ -13,8 +13,10 @@
13
13
  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
14
14
 
15
15
  // Arrow variables
16
- --pf-c-tooltip__arrow--Width: #{pf-size-prem(8px)};
17
- --pf-c-tooltip__arrow--Height: #{pf-size-prem(8px)};
16
+ --pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
17
+ --pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
18
+ --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
19
+ --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
18
20
  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
19
21
  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
20
22
  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -122,7 +124,8 @@
122
124
  width: var(--pf-c-tooltip__arrow--Width);
123
125
  height: var(--pf-c-tooltip__arrow--Height);
124
126
  pointer-events: none;
125
- background-color: var(--pf-c-tooltip__content--BackgroundColor);
127
+ background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
128
+ box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
126
129
  }
127
130
 
128
131
  // stylelint-disable no-invalid-position-at-import-rule