@patternfly/patternfly 5.1.0-prerelease.7 → 5.1.0-prerelease.8

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 (219) hide show
  1. package/assets/icons/iconUnicodes.json +1 -0
  2. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  3. package/assets/pficon/pficon.scss +6 -129
  4. package/base/_globals.scss +1 -1
  5. package/base/patternfly-common.css +2 -2
  6. package/base/patternfly-globals.css +1 -1
  7. package/base/patternfly-icons.css +5 -1
  8. package/base/patternfly-pf-icons.css +5 -1
  9. package/components/AboutModalBox/about-modal-box.css +18 -12
  10. package/components/AboutModalBox/about-modal-box.scss +18 -12
  11. package/components/Accordion/accordion.css +30 -20
  12. package/components/Accordion/accordion.scss +30 -20
  13. package/components/ActionList/action-list.css +2 -2
  14. package/components/ActionList/action-list.scss +2 -2
  15. package/components/Alert/alert-group.css +7 -4
  16. package/components/Alert/alert-group.scss +7 -4
  17. package/components/Alert/alert.css +16 -13
  18. package/components/Alert/alert.scss +16 -13
  19. package/components/AppLauncher/app-launcher.css +32 -23
  20. package/components/AppLauncher/app-launcher.scss +32 -23
  21. package/components/BackToTop/back-to-top.css +2 -2
  22. package/components/BackToTop/back-to-top.scss +2 -2
  23. package/components/Backdrop/backdrop.css +2 -2
  24. package/components/Backdrop/backdrop.scss +2 -2
  25. package/components/BackgroundImage/background-image.css +2 -2
  26. package/components/BackgroundImage/background-image.scss +2 -2
  27. package/components/Badge/badge.css +2 -2
  28. package/components/Badge/badge.scss +2 -2
  29. package/components/Banner/banner.css +5 -2
  30. package/components/Banner/banner.scss +5 -2
  31. package/components/Breadcrumb/breadcrumb.css +6 -3
  32. package/components/Breadcrumb/breadcrumb.scss +6 -3
  33. package/components/Button/button.css +23 -17
  34. package/components/Button/button.scss +22 -16
  35. package/components/Button/themes/dark/button.scss +1 -1
  36. package/components/CalendarMonth/calendar-month.css +21 -15
  37. package/components/CalendarMonth/calendar-month.scss +21 -15
  38. package/components/Card/card.css +21 -16
  39. package/components/Card/card.scss +21 -16
  40. package/components/Check/check.css +2 -2
  41. package/components/Check/check.scss +2 -2
  42. package/components/Chip/chip-group.css +6 -6
  43. package/components/Chip/chip-group.scss +6 -6
  44. package/components/Chip/chip.css +13 -10
  45. package/components/Chip/chip.scss +13 -10
  46. package/components/ClipboardCopy/clipboard-copy.css +16 -10
  47. package/components/ClipboardCopy/clipboard-copy.scss +14 -8
  48. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  49. package/components/CodeBlock/code-block.css +6 -3
  50. package/components/CodeBlock/code-block.scss +6 -3
  51. package/components/CodeEditor/code-editor.css +31 -22
  52. package/components/CodeEditor/code-editor.scss +30 -21
  53. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  54. package/components/Content/content.css +33 -30
  55. package/components/Content/content.scss +33 -30
  56. package/components/ContextSelector/context-selector.css +41 -26
  57. package/components/ContextSelector/context-selector.scss +40 -25
  58. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  59. package/components/DataList/data-list-grid.css +21 -21
  60. package/components/DataList/data-list-grid.scss +3 -3
  61. package/components/DataList/data-list.css +66 -56
  62. package/components/DataList/data-list.scss +45 -35
  63. package/components/DatePicker/date-picker.css +8 -8
  64. package/components/DatePicker/date-picker.scss +8 -8
  65. package/components/DescriptionList/description-list.css +8 -5
  66. package/components/DescriptionList/description-list.scss +8 -5
  67. package/components/DragDrop/drag-drop.css +8 -8
  68. package/components/DragDrop/drag-drop.scss +8 -8
  69. package/components/Drawer/drawer.css +75 -60
  70. package/components/Drawer/drawer.scss +51 -36
  71. package/components/Dropdown/dropdown.css +73 -64
  72. package/components/Dropdown/dropdown.scss +63 -54
  73. package/components/DualListSelector/dual-list-selector.css +20 -14
  74. package/components/DualListSelector/dual-list-selector.scss +20 -14
  75. package/components/EmptyState/empty-state.css +7 -4
  76. package/components/EmptyState/empty-state.scss +7 -4
  77. package/components/ExpandableSection/expandable-section.css +13 -10
  78. package/components/ExpandableSection/expandable-section.scss +13 -10
  79. package/components/FileUpload/file-upload.css +9 -15
  80. package/components/FileUpload/file-upload.scss +9 -15
  81. package/components/Form/form.css +50 -50
  82. package/components/Form/form.scss +44 -44
  83. package/components/FormControl/form-control.css +18 -9
  84. package/components/FormControl/form-control.scss +18 -9
  85. package/components/HelperText/helper-text.css +1 -1
  86. package/components/HelperText/helper-text.scss +1 -1
  87. package/components/Hint/hint.css +9 -6
  88. package/components/Hint/hint.scss +9 -6
  89. package/components/Icon/icon.css +1 -1
  90. package/components/Icon/icon.scss +1 -1
  91. package/components/InlineEdit/inline-edit.css +4 -4
  92. package/components/InlineEdit/inline-edit.scss +4 -4
  93. package/components/InputGroup/input-group.css +12 -6
  94. package/components/InputGroup/input-group.scss +11 -5
  95. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  96. package/components/JumpLinks/jump-links.css +24 -24
  97. package/components/JumpLinks/jump-links.scss +24 -24
  98. package/components/Label/label-group.css +12 -9
  99. package/components/Label/label-group.scss +12 -9
  100. package/components/Label/label.css +9 -9
  101. package/components/Label/label.scss +9 -9
  102. package/components/List/list.css +9 -9
  103. package/components/List/list.scss +9 -9
  104. package/components/LogViewer/log-viewer.css +14 -14
  105. package/components/LogViewer/log-viewer.scss +14 -14
  106. package/components/Login/login.css +36 -27
  107. package/components/Login/login.scss +36 -27
  108. package/components/Masthead/masthead.css +19 -22
  109. package/components/Masthead/masthead.scss +19 -22
  110. package/components/Menu/menu.css +68 -65
  111. package/components/Menu/menu.scss +68 -66
  112. package/components/MenuToggle/menu-toggle.css +41 -29
  113. package/components/MenuToggle/menu-toggle.scss +41 -29
  114. package/components/ModalBox/modal-box.css +19 -19
  115. package/components/ModalBox/modal-box.scss +20 -20
  116. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  117. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  118. package/components/Nav/nav.css +100 -93
  119. package/components/Nav/nav.scss +98 -91
  120. package/components/Nav/themes/dark/nav.scss +2 -2
  121. package/components/NotificationBadge/notification-badge.css +13 -7
  122. package/components/NotificationBadge/notification-badge.scss +13 -7
  123. package/components/NotificationDrawer/notification-drawer.css +28 -19
  124. package/components/NotificationDrawer/notification-drawer.scss +28 -19
  125. package/components/NumberInput/number-input.css +2 -2
  126. package/components/NumberInput/number-input.scss +2 -2
  127. package/components/OptionsMenu/options-menu.css +43 -31
  128. package/components/OptionsMenu/options-menu.scss +43 -31
  129. package/components/OverflowMenu/overflow-menu.css +2 -2
  130. package/components/OverflowMenu/overflow-menu.scss +2 -2
  131. package/components/Page/page.css +119 -65
  132. package/components/Page/page.scss +63 -39
  133. package/components/Page/themes/dark/page.scss +1 -1
  134. package/components/Pagination/pagination.css +23 -17
  135. package/components/Pagination/pagination.scss +23 -17
  136. package/components/Panel/panel.css +13 -7
  137. package/components/Panel/panel.scss +13 -7
  138. package/components/Popover/popover.css +24 -21
  139. package/components/Popover/popover.scss +24 -21
  140. package/components/Progress/progress.css +7 -7
  141. package/components/Progress/progress.scss +7 -7
  142. package/components/ProgressStepper/progress-stepper.css +25 -19
  143. package/components/ProgressStepper/progress-stepper.scss +24 -18
  144. package/components/Radio/radio.css +3 -3
  145. package/components/Radio/radio.scss +3 -3
  146. package/components/Select/select.css +56 -47
  147. package/components/Select/select.scss +56 -47
  148. package/components/Sidebar/sidebar.css +9 -3
  149. package/components/Sidebar/sidebar.scss +9 -3
  150. package/components/SimpleList/simple-list.css +10 -4
  151. package/components/SimpleList/simple-list.scss +10 -4
  152. package/components/Skeleton/skeleton.css +2 -5
  153. package/components/Skeleton/skeleton.scss +2 -5
  154. package/components/SkipToContent/skip-to-content.css +3 -3
  155. package/components/SkipToContent/skip-to-content.scss +3 -3
  156. package/components/Slider/slider.css +17 -20
  157. package/components/Slider/slider.scss +17 -20
  158. package/components/Switch/switch.css +5 -5
  159. package/components/Switch/switch.scss +5 -5
  160. package/components/TabContent/tab-content.css +4 -1
  161. package/components/TabContent/tab-content.scss +4 -1
  162. package/components/Table/table-grid.css +256 -195
  163. package/components/Table/table-grid.scss +53 -39
  164. package/components/Table/table-scrollable.css +2 -2
  165. package/components/Table/table-scrollable.scss +2 -2
  166. package/components/Table/table-tree-view.css +107 -104
  167. package/components/Table/table-tree-view.scss +32 -32
  168. package/components/Table/table.css +87 -69
  169. package/components/Table/table.scss +87 -69
  170. package/components/Tabs/tabs.css +66 -48
  171. package/components/Tabs/tabs.scss +66 -48
  172. package/components/TextInputGroup/text-input-group.css +15 -15
  173. package/components/TextInputGroup/text-input-group.scss +15 -15
  174. package/components/Tile/tile.css +10 -10
  175. package/components/Tile/tile.scss +10 -10
  176. package/components/ToggleGroup/toggle-group.css +14 -11
  177. package/components/ToggleGroup/toggle-group.scss +14 -11
  178. package/components/Toolbar/toolbar.css +44 -41
  179. package/components/Toolbar/toolbar.scss +24 -21
  180. package/components/Tooltip/tooltip.css +19 -16
  181. package/components/Tooltip/tooltip.scss +19 -16
  182. package/components/TreeView/tree-view.css +42 -27
  183. package/components/TreeView/tree-view.scss +42 -27
  184. package/components/Wizard/wizard.css +47 -35
  185. package/components/Wizard/wizard.scss +47 -35
  186. package/docs/components/Button/examples/Button.css +2 -2
  187. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  188. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  189. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  190. package/docs/components/ModalBox/examples/ModalBox.css +2 -2
  191. package/docs/components/Nav/examples/Navigation.css +2 -2
  192. package/docs/components/Popover/examples/Popover.css +2 -2
  193. package/docs/components/Table/examples/Table.css +2 -2
  194. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  195. package/docs/components/Tile/examples/Tile.css +1 -1
  196. package/docs/demos/Card/examples/Card.css +3 -3
  197. package/docs/demos/Card/examples/Card.md +3 -3
  198. package/docs/demos/Dashboard/examples/Dashboard.md +3 -3
  199. package/docs/layouts/Flex/examples/Flex.md +5 -5
  200. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  201. package/icons/pficons.mjs +1 -0
  202. package/layouts/Flex/flex.css +115 -43
  203. package/layouts/Flex/flex.scss +20 -8
  204. package/package.json +4 -1
  205. package/patternfly-addons.css +732 -972
  206. package/patternfly-base-no-globals-theme-dark-unversioned.css +7 -3
  207. package/patternfly-base-no-globals.css +7 -3
  208. package/patternfly-base-theme-dark-unversioned.css +8 -4
  209. package/patternfly-base.css +8 -4
  210. package/patternfly-no-globals.css +2320 -1800
  211. package/patternfly-theme-dark-unversioned.css +2321 -1801
  212. package/patternfly.css +2321 -1801
  213. package/patternfly.min.css +1 -1
  214. package/patternfly.min.css.map +1 -1
  215. package/sass-utilities/mixins.scss +2 -2
  216. package/sass-utilities/scss-variables.scss +8 -8
  217. package/utilities/Accessibility/accessibility.css +12 -12
  218. package/utilities/Spacing/spacing.css +720 -960
  219. package/utilities/Spacing/spacing.scss +4 -8
package/components/ContextSelector/context-selector.css CHANGED
@@ -143,10 +143,10 @@
143
143
  align-self: stretch;
144
144
  }
145
145
  .pf-v5-c-context-selector.pf-m-full-height .pf-v5-c-context-selector__toggle::before {
146
- border-top-width: var(--pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
146
+ border-block-start-width: var(--pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
147
147
  }
148
148
  .pf-v5-c-context-selector.pf-m-full-height:hover .pf-v5-c-context-selector__toggle::before {
149
- border-bottom-width: var(--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
149
+ border-block-end-width: var(--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
150
150
  }
151
151
  .pf-v5-c-context-selector.pf-m-large {
152
152
  --pf-v5-c-context-selector__toggle--PaddingTop: var(--pf-v5-c-context-selector--m-large__toggle--PaddingTop);
@@ -176,7 +176,10 @@
176
176
  column-gap: var(--pf-v5-c-context-selector__toggle--ColumnGap);
177
177
  align-items: center;
178
178
  width: 100%;
179
- padding: var(--pf-v5-c-context-selector__toggle--PaddingTop) var(--pf-v5-c-context-selector__toggle--PaddingRight) var(--pf-v5-c-context-selector__toggle--PaddingBottom) var(--pf-v5-c-context-selector__toggle--PaddingLeft);
179
+ padding-block-start: var(--pf-v5-c-context-selector__toggle--PaddingTop);
180
+ padding-block-end: var(--pf-v5-c-context-selector__toggle--PaddingBottom);
181
+ padding-inline-start: var(--pf-v5-c-context-selector__toggle--PaddingLeft);
182
+ padding-inline-end: var(--pf-v5-c-context-selector__toggle--PaddingRight);
180
183
  color: var(--pf-v5-c-context-selector__toggle--Color);
181
184
  white-space: nowrap;
182
185
  cursor: pointer;
@@ -185,25 +188,28 @@
185
188
  }
186
189
  .pf-v5-c-context-selector__toggle::before {
187
190
  position: absolute;
188
- top: 0;
189
- right: 0;
190
- bottom: 0;
191
- left: 0;
191
+ inset-block-start: 0;
192
+ inset-block-end: 0;
193
+ inset-inline-start: 0;
194
+ inset-inline-end: 0;
192
195
  content: "";
193
196
  border: var(--pf-v5-c-context-selector__toggle--BorderWidth) solid;
194
- border-color: var(--pf-v5-c-context-selector__toggle--BorderTopColor) var(--pf-v5-c-context-selector__toggle--BorderRightColor) var(--pf-v5-c-context-selector__toggle--BorderBottomColor) var(--pf-v5-c-context-selector__toggle--BorderLeftColor);
197
+ border-block-start-color: var(--pf-v5-c-context-selector__toggle--BorderTopColor);
198
+ border-block-end-color: var(--pf-v5-c-context-selector__toggle--BorderBottomColor);
199
+ border-inline-start-color: var(--pf-v5-c-context-selector__toggle--BorderLeftColor);
200
+ border-inline-end-color: var(--pf-v5-c-context-selector__toggle--BorderRightColor);
195
201
  }
196
202
  .pf-v5-c-context-selector__toggle:hover::before {
197
203
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomColor);
198
- border-bottom-width: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth);
204
+ border-block-end-width: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth);
199
205
  }
200
206
  .pf-v5-c-context-selector__toggle:active::before, .pf-v5-c-context-selector__toggle.pf-m-active::before, .pf-v5-c-context-selector__toggle:focus-within::before {
201
207
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--active--BorderBottomColor);
202
- border-bottom-width: var(--pf-v5-c-context-selector__toggle--active--BorderBottomWidth);
208
+ border-block-end-width: var(--pf-v5-c-context-selector__toggle--active--BorderBottomWidth);
203
209
  }
204
210
  .pf-m-expanded > .pf-v5-c-context-selector__toggle::before {
205
211
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomColor);
206
- border-bottom-width: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth);
212
+ border-block-end-width: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth);
207
213
  }
208
214
  .pf-v5-c-context-selector__toggle.pf-m-plain {
209
215
  --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-c-context-selector__toggle--m-plain--PaddingRight);
@@ -237,19 +243,19 @@
237
243
  font-size: var(--pf-v5-c-context-selector__toggle-text--FontSize);
238
244
  font-weight: var(--pf-v5-c-context-selector__toggle-text--FontWeight);
239
245
  line-height: var(--pf-v5-c-context-selector__toggle-text--LineHeight);
240
- text-align: left;
246
+ text-align: start;
241
247
  }
242
248
 
243
249
  .pf-v5-c-context-selector__toggle-icon {
244
- padding-right: var(--pf-v5-c-context-selector__toggle-icon--PaddingRight);
245
- padding-left: var(--pf-v5-c-context-selector__toggle-icon--PaddingLeft);
250
+ padding-inline-start: var(--pf-v5-c-context-selector__toggle-icon--PaddingLeft);
251
+ padding-inline-end: var(--pf-v5-c-context-selector__toggle-icon--PaddingRight);
246
252
  color: var(--pf-v5-c-context-selector__toggle-icon--Color, inherit);
247
253
  }
248
254
 
249
255
  .pf-v5-c-context-selector__menu {
250
256
  color: var(--pf-v5-global--Color--100);
251
257
  position: absolute;
252
- top: var(--pf-v5-c-context-selector__menu--Top);
258
+ inset-block-start: var(--pf-v5-c-context-selector__menu--Top);
253
259
  z-index: var(--pf-v5-c-context-selector__menu--ZIndex);
254
260
  min-width: 100%;
255
261
  background-color: var(--pf-v5-c-context-selector__menu--BackgroundColor);
@@ -258,29 +264,35 @@
258
264
  }
259
265
  .pf-v5-c-context-selector__menu.pf-m-static {
260
266
  position: static;
261
- top: auto;
262
- right: auto;
263
- bottom: auto;
264
- left: auto;
267
+ inset-block-start: auto;
268
+ inset-block-end: auto;
269
+ inset-inline-start: auto;
270
+ inset-inline-end: auto;
265
271
  z-index: auto;
266
272
  min-width: min-content;
267
273
  }
268
274
 
269
275
  .pf-v5-c-context-selector__menu-search {
270
276
  position: relative;
271
- padding: var(--pf-v5-c-context-selector__menu-search--PaddingTop) var(--pf-v5-c-context-selector__menu-search--PaddingRight) var(--pf-v5-c-context-selector__menu-search--PaddingBottom) var(--pf-v5-c-context-selector__menu-search--PaddingLeft);
272
- border-bottom: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor);
277
+ padding-block-start: var(--pf-v5-c-context-selector__menu-search--PaddingTop);
278
+ padding-block-end: var(--pf-v5-c-context-selector__menu-search--PaddingBottom);
279
+ padding-inline-start: var(--pf-v5-c-context-selector__menu-search--PaddingLeft);
280
+ padding-inline-end: var(--pf-v5-c-context-selector__menu-search--PaddingRight);
281
+ border-block-end: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor);
273
282
  }
274
283
 
275
284
  .pf-v5-c-context-selector__menu-footer {
276
- padding: var(--pf-v5-c-context-selector__menu-footer--PaddingTop) var(--pf-v5-c-context-selector__menu-footer--PaddingRight) var(--pf-v5-c-context-selector__menu-footer--PaddingBottom) var(--pf-v5-c-context-selector__menu-footer--PaddingLeft);
285
+ padding-block-start: var(--pf-v5-c-context-selector__menu-footer--PaddingTop);
286
+ padding-block-end: var(--pf-v5-c-context-selector__menu-footer--PaddingBottom);
287
+ padding-inline-start: var(--pf-v5-c-context-selector__menu-footer--PaddingLeft);
288
+ padding-inline-end: var(--pf-v5-c-context-selector__menu-footer--PaddingRight);
277
289
  box-shadow: var(--pf-v5-c-context-selector__menu-footer--BoxShadow);
278
290
  }
279
291
 
280
292
  .pf-v5-c-context-selector__menu-list {
281
293
  max-height: var(--pf-v5-c-context-selector__menu-list--MaxHeight);
282
- padding-top: var(--pf-v5-c-context-selector__menu-list--PaddingTop);
283
- padding-bottom: var(--pf-v5-c-context-selector__menu-list--PaddingBottom);
294
+ padding-block-start: var(--pf-v5-c-context-selector__menu-list--PaddingTop);
295
+ padding-block-end: var(--pf-v5-c-context-selector__menu-list--PaddingBottom);
284
296
  overflow-y: auto;
285
297
  }
286
298
 
@@ -288,7 +300,10 @@
288
300
  display: flex;
289
301
  align-items: center;
290
302
  width: 100%;
291
- padding: var(--pf-v5-c-context-selector__menu-list-item--PaddingTop) var(--pf-v5-c-context-selector__menu-list-item--PaddingRight) var(--pf-v5-c-context-selector__menu-list-item--PaddingBottom) var(--pf-v5-c-context-selector__menu-list-item--PaddingLeft);
303
+ padding-block-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingTop);
304
+ padding-block-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingBottom);
305
+ padding-inline-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingLeft);
306
+ padding-inline-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingRight);
292
307
  color: var(--pf-v5-c-context-selector__menu-list-item--Color);
293
308
  white-space: nowrap;
294
309
  background-color: var(--pf-v5-c-context-selector__menu-list-item--BackgroundColor);
@@ -317,5 +332,5 @@
317
332
  background: var(--pf-v5-global--BackgroundColor--300);
318
333
  }
319
334
  :where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu-footer {
320
- border-top: 1px solid var(--pf-v5-global--BorderColor--300);
335
+ border-block-start: 1px solid var(--pf-v5-global--BorderColor--300);
321
336
  }
package/components/ContextSelector/context-selector.scss CHANGED
@@ -159,13 +159,13 @@
159
159
  align-self: stretch;
160
160
 
161
161
  &::before {
162
- border-top-width: var(--#{$context-selector}--m-full-height__toggle--before--BorderTopWidth);
162
+ border-block-start-width: var(--#{$context-selector}--m-full-height__toggle--before--BorderTopWidth);
163
163
  }
164
164
  }
165
165
 
166
166
  &:hover {
167
167
  .#{$context-selector}__toggle::before {
168
- border-bottom-width: var(--#{$context-selector}--m-full-height__toggle--hover--BorderBottomWidth);
168
+ border-block-end-width: var(--#{$context-selector}--m-full-height__toggle--hover--BorderBottomWidth);
169
169
  }
170
170
  }
171
171
  }
@@ -200,7 +200,10 @@
200
200
  column-gap: var(--#{$context-selector}__toggle--ColumnGap);
201
201
  align-items: center;
202
202
  width: 100%;
203
- padding: var(--#{$context-selector}__toggle--PaddingTop) var(--#{$context-selector}__toggle--PaddingRight) var(--#{$context-selector}__toggle--PaddingBottom) var(--#{$context-selector}__toggle--PaddingLeft);
203
+ padding-block-start: var(--#{$context-selector}__toggle--PaddingTop);
204
+ padding-block-end: var(--#{$context-selector}__toggle--PaddingBottom);
205
+ padding-inline-start: var(--#{$context-selector}__toggle--PaddingLeft);
206
+ padding-inline-end: var(--#{$context-selector}__toggle--PaddingRight);
204
207
  color: var(--#{$context-selector}__toggle--Color);
205
208
  white-space: nowrap;
206
209
  cursor: pointer;
@@ -209,20 +212,23 @@
209
212
 
210
213
  &::before {
211
214
  position: absolute;
212
- top: 0;
213
- right: 0;
214
- bottom: 0;
215
- left: 0;
215
+ inset-block-start: 0;
216
+ inset-block-end: 0;
217
+ inset-inline-start: 0;
218
+ inset-inline-end: 0;
216
219
  content: "";
217
220
  border: var(--#{$context-selector}__toggle--BorderWidth) solid;
218
- border-color: var(--#{$context-selector}__toggle--BorderTopColor) var(--#{$context-selector}__toggle--BorderRightColor) var(--#{$context-selector}__toggle--BorderBottomColor) var(--#{$context-selector}__toggle--BorderLeftColor);
221
+ border-block-start-color: var(--#{$context-selector}__toggle--BorderTopColor);
222
+ border-block-end-color: var(--#{$context-selector}__toggle--BorderBottomColor);
223
+ border-inline-start-color: var(--#{$context-selector}__toggle--BorderLeftColor);
224
+ border-inline-end-color: var(--#{$context-selector}__toggle--BorderRightColor);
219
225
  }
220
226
 
221
227
  &:hover {
222
228
  &::before {
223
229
  --#{$context-selector}__toggle--BorderBottomColor: var(--#{$context-selector}__toggle--hover--BorderBottomColor);
224
230
 
225
- border-bottom-width: var(--#{$context-selector}__toggle--hover--BorderBottomWidth);
231
+ border-block-end-width: var(--#{$context-selector}__toggle--hover--BorderBottomWidth);
226
232
  }
227
233
  }
228
234
 
@@ -232,7 +238,7 @@
232
238
  &::before {
233
239
  --#{$context-selector}__toggle--BorderBottomColor: var(--#{$context-selector}__toggle--active--BorderBottomColor);
234
240
 
235
- border-bottom-width: var(--#{$context-selector}__toggle--active--BorderBottomWidth);
241
+ border-block-end-width: var(--#{$context-selector}__toggle--active--BorderBottomWidth);
236
242
  }
237
243
  }
238
244
 
@@ -240,7 +246,7 @@
240
246
  &::before {
241
247
  --#{$context-selector}__toggle--BorderBottomColor: var(--#{$context-selector}__toggle--expanded--BorderBottomColor);
242
248
 
243
- border-bottom-width: var(--#{$context-selector}__toggle--expanded--BorderBottomWidth);
249
+ border-block-end-width: var(--#{$context-selector}__toggle--expanded--BorderBottomWidth);
244
250
  }
245
251
  }
246
252
 
@@ -286,13 +292,13 @@
286
292
  font-size: var(--#{$context-selector}__toggle-text--FontSize);
287
293
  font-weight: var(--#{$context-selector}__toggle-text--FontWeight);
288
294
  line-height: var(--#{$context-selector}__toggle-text--LineHeight);
289
- text-align: left;
295
+ text-align: start;
290
296
  }
291
297
  }
292
298
 
293
299
  .#{$context-selector}__toggle-icon {
294
- padding-right: var(--#{$context-selector}__toggle-icon--PaddingRight);
295
- padding-left: var(--#{$context-selector}__toggle-icon--PaddingLeft);
300
+ padding-inline-start: var(--#{$context-selector}__toggle-icon--PaddingLeft);
301
+ padding-inline-end: var(--#{$context-selector}__toggle-icon--PaddingRight);
296
302
  color: var(--#{$context-selector}__toggle-icon--Color, inherit);
297
303
  }
298
304
 
@@ -300,7 +306,7 @@
300
306
  @include pf-v5-t-light;
301
307
 
302
308
  position: absolute;
303
- top: var(--#{$context-selector}__menu--Top);
309
+ inset-block-start: var(--#{$context-selector}__menu--Top);
304
310
  z-index: var(--#{$context-selector}__menu--ZIndex);
305
311
  min-width: 100%;
306
312
  background-color: var(--#{$context-selector}__menu--BackgroundColor);
@@ -309,10 +315,10 @@
309
315
 
310
316
  &.pf-m-static {
311
317
  position: static;
312
- top: auto;
313
- right: auto;
314
- bottom: auto;
315
- left: auto;
318
+ inset-block-start: auto;
319
+ inset-block-end: auto;
320
+ inset-inline-start: auto;
321
+ inset-inline-end: auto;
316
322
  z-index: auto;
317
323
  min-width: min-content;
318
324
  }
@@ -320,19 +326,25 @@
320
326
 
321
327
  .#{$context-selector}__menu-search {
322
328
  position: relative;
323
- padding: var(--#{$context-selector}__menu-search--PaddingTop) var(--#{$context-selector}__menu-search--PaddingRight) var(--#{$context-selector}__menu-search--PaddingBottom) var(--#{$context-selector}__menu-search--PaddingLeft);
324
- border-bottom: var(--#{$context-selector}__menu-search--BorderBottomWidth) solid var(--#{$context-selector}__menu-search--BorderBottomColor);
329
+ padding-block-start: var(--#{$context-selector}__menu-search--PaddingTop);
330
+ padding-block-end: var(--#{$context-selector}__menu-search--PaddingBottom);
331
+ padding-inline-start: var(--#{$context-selector}__menu-search--PaddingLeft);
332
+ padding-inline-end: var(--#{$context-selector}__menu-search--PaddingRight);
333
+ border-block-end: var(--#{$context-selector}__menu-search--BorderBottomWidth) solid var(--#{$context-selector}__menu-search--BorderBottomColor);
325
334
  }
326
335
 
327
336
  .#{$context-selector}__menu-footer {
328
- padding: var(--#{$context-selector}__menu-footer--PaddingTop) var(--#{$context-selector}__menu-footer--PaddingRight) var(--#{$context-selector}__menu-footer--PaddingBottom) var(--#{$context-selector}__menu-footer--PaddingLeft);
337
+ padding-block-start: var(--#{$context-selector}__menu-footer--PaddingTop);
338
+ padding-block-end: var(--#{$context-selector}__menu-footer--PaddingBottom);
339
+ padding-inline-start: var(--#{$context-selector}__menu-footer--PaddingLeft);
340
+ padding-inline-end: var(--#{$context-selector}__menu-footer--PaddingRight);
329
341
  box-shadow: var(--#{$context-selector}__menu-footer--BoxShadow);
330
342
  }
331
343
 
332
344
  .#{$context-selector}__menu-list {
333
345
  max-height: var(--#{$context-selector}__menu-list--MaxHeight);
334
- padding-top: var(--#{$context-selector}__menu-list--PaddingTop);
335
- padding-bottom: var(--#{$context-selector}__menu-list--PaddingBottom);
346
+ padding-block-start: var(--#{$context-selector}__menu-list--PaddingTop);
347
+ padding-block-end: var(--#{$context-selector}__menu-list--PaddingBottom);
336
348
  overflow-y: auto;
337
349
  }
338
350
 
@@ -340,7 +352,10 @@
340
352
  display: flex;
341
353
  align-items: center;
342
354
  width: 100%;
343
- padding: var(--#{$context-selector}__menu-list-item--PaddingTop) var(--#{$context-selector}__menu-list-item--PaddingRight) var(--#{$context-selector}__menu-list-item--PaddingBottom) var(--#{$context-selector}__menu-list-item--PaddingLeft);
355
+ padding-block-start: var(--#{$context-selector}__menu-list-item--PaddingTop);
356
+ padding-block-end: var(--#{$context-selector}__menu-list-item--PaddingBottom);
357
+ padding-inline-start: var(--#{$context-selector}__menu-list-item--PaddingLeft);
358
+ padding-inline-end: var(--#{$context-selector}__menu-list-item--PaddingRight);
344
359
  color: var(--#{$context-selector}__menu-list-item--Color);
345
360
  white-space: nowrap;
346
361
  background-color: var(--#{$context-selector}__menu-list-item--BackgroundColor);
package/components/ContextSelector/themes/dark/context-selector.scss CHANGED
@@ -19,6 +19,6 @@
19
19
  }
20
20
 
21
21
  .#{$context-selector}__menu-footer {
22
- border-top: 1px solid var(--#{$pf-global}--BorderColor--300);
22
+ border-block-start: 1px solid var(--#{$pf-global}--BorderColor--300);
23
23
  }
24
24
  }
package/components/DataList/data-list-grid.css CHANGED
@@ -23,17 +23,17 @@
23
23
  display: flex;
24
24
  flex-grow: 1;
25
25
  flex-wrap: wrap;
26
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
26
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
27
27
  }
28
28
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
29
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
29
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
30
30
  }
31
31
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
32
32
  flex: 1;
33
33
  order: initial;
34
34
  }
35
35
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-align-right {
36
- margin-left: auto;
36
+ margin-inline-start: auto;
37
37
  }
38
38
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-no-fill {
39
39
  flex: none;
@@ -81,17 +81,17 @@
81
81
  display: flex;
82
82
  flex-grow: 1;
83
83
  flex-wrap: wrap;
84
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
84
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
85
85
  }
86
86
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
87
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
87
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
88
88
  }
89
89
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
90
90
  flex: 1;
91
91
  order: initial;
92
92
  }
93
93
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-align-right {
94
- margin-left: auto;
94
+ margin-inline-start: auto;
95
95
  }
96
96
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-no-fill {
97
97
  flex: none;
@@ -139,17 +139,17 @@
139
139
  display: flex;
140
140
  flex-grow: 1;
141
141
  flex-wrap: wrap;
142
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
142
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
143
143
  }
144
144
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
145
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
145
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
146
146
  }
147
147
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
148
148
  flex: 1;
149
149
  order: initial;
150
150
  }
151
151
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-align-right {
152
- margin-left: auto;
152
+ margin-inline-start: auto;
153
153
  }
154
154
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-no-fill {
155
155
  flex: none;
@@ -197,17 +197,17 @@
197
197
  display: flex;
198
198
  flex-grow: 1;
199
199
  flex-wrap: wrap;
200
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
200
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
201
201
  }
202
202
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
203
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
203
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
204
204
  }
205
205
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
206
206
  flex: 1;
207
207
  order: initial;
208
208
  }
209
209
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-align-right {
210
- margin-left: auto;
210
+ margin-inline-start: auto;
211
211
  }
212
212
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-no-fill {
213
213
  flex: none;
@@ -255,17 +255,17 @@
255
255
  display: flex;
256
256
  flex-grow: 1;
257
257
  flex-wrap: wrap;
258
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
258
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
259
259
  }
260
260
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
261
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
261
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
262
262
  }
263
263
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
264
264
  flex: 1;
265
265
  order: initial;
266
266
  }
267
267
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-align-right {
268
- margin-left: auto;
268
+ margin-inline-start: auto;
269
269
  }
270
270
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-no-fill {
271
271
  flex: none;
@@ -313,17 +313,17 @@
313
313
  display: flex;
314
314
  flex-grow: 1;
315
315
  flex-wrap: wrap;
316
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
316
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
317
317
  }
318
318
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
319
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
319
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
320
320
  }
321
321
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
322
322
  flex: 1;
323
323
  order: initial;
324
324
  }
325
325
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-align-right {
326
- margin-left: auto;
326
+ margin-inline-start: auto;
327
327
  }
328
328
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-no-fill {
329
329
  flex: none;
@@ -371,17 +371,17 @@
371
371
  display: flex;
372
372
  flex-grow: 1;
373
373
  flex-wrap: wrap;
374
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
374
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
375
375
  }
376
376
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
377
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
377
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
378
378
  }
379
379
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
380
380
  flex: 1;
381
381
  order: initial;
382
382
  }
383
383
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-align-right {
384
- margin-left: auto;
384
+ margin-inline-start: auto;
385
385
  }
386
386
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-no-fill {
387
387
  flex: none;
package/components/DataList/data-list-grid.scss CHANGED
@@ -43,14 +43,14 @@
43
43
  display: flex;
44
44
  flex-grow: 1;
45
45
  flex-wrap: wrap;
46
- padding-bottom: var(--#{$data-list}__item-content--md--PaddingBottom);
46
+ padding-block-end: var(--#{$data-list}__item-content--md--PaddingBottom);
47
47
  }
48
48
 
49
49
  .#{$data-list}__cell {
50
50
  // stylelint-disable selector-not-notation
51
51
  // update to single :not() in breaking change
52
52
  &:not(:last-child):not(.pf-m-icon) {
53
- margin-right: var(--#{$data-list}__cell--MarginRight);
53
+ margin-inline-end: var(--#{$data-list}__cell--MarginRight);
54
54
  }
55
55
 
56
56
  // for all subsequent .#{$data-list}__cell's, set to full width
@@ -60,7 +60,7 @@
60
60
  }
61
61
 
62
62
  &.pf-m-align-right {
63
- margin-left: auto;
63
+ margin-inline-start: auto;
64
64
  }
65
65
 
66
66
  &.pf-m-no-fill {