@patternfly/patternfly 6.0.0-prerelease.8 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -62
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +12 -4
  7. package/base/tokens/tokens-default.scss +44 -27
  8. package/base/tokens/tokens-local.scss +30 -35
  9. package/base/tokens/tokens-palette.scss +1 -1
  10. package/components/AboutModalBox/about-modal-box.css +0 -7
  11. package/components/Accordion/accordion.css +0 -1
  12. package/components/ActionList/action-list.css +1 -2
  13. package/components/ActionList/action-list.scss +1 -1
  14. package/components/Alert/alert-group.css +0 -1
  15. package/components/Alert/alert.css +2 -7
  16. package/components/Alert/alert.scss +2 -7
  17. package/components/Avatar/avatar.css +0 -1
  18. package/components/BackToTop/back-to-top.css +0 -2
  19. package/components/Backdrop/backdrop.css +0 -1
  20. package/components/BackgroundImage/background-image.css +0 -1
  21. package/components/Badge/badge.css +0 -1
  22. package/components/Banner/banner.css +0 -2
  23. package/components/Brand/brand.css +0 -1
  24. package/components/Breadcrumb/breadcrumb.css +0 -1
  25. package/components/Button/button.css +8 -1
  26. package/components/Button/button.scss +8 -0
  27. package/components/CalendarMonth/calendar-month.css +0 -1
  28. package/components/Card/card.css +0 -1
  29. package/components/Check/check.css +0 -1
  30. package/components/ClipboardCopy/clipboard-copy.css +0 -1
  31. package/components/CodeBlock/code-block.css +0 -1
  32. package/components/CodeEditor/code-editor.css +0 -1
  33. package/components/Content/content.css +2 -3
  34. package/components/Content/content.scss +2 -2
  35. package/components/DataList/data-list.css +4 -16
  36. package/components/DataList/data-list.scss +4 -14
  37. package/components/DatePicker/date-picker.css +0 -1
  38. package/components/DescriptionList/description-list.css +2 -9
  39. package/components/DescriptionList/description-list.scss +2 -2
  40. package/components/Divider/divider.css +0 -1
  41. package/components/DragDrop/drag-drop.css +0 -2
  42. package/components/Drawer/drawer.css +5 -8
  43. package/components/Drawer/drawer.scss +4 -6
  44. package/components/DualListSelector/dual-list-selector.css +0 -1
  45. package/components/EmptyState/empty-state.css +1 -2
  46. package/components/EmptyState/empty-state.scss +1 -1
  47. package/components/ExpandableSection/expandable-section.css +0 -1
  48. package/components/FileUpload/file-upload.css +0 -1
  49. package/components/Form/form.css +1 -2
  50. package/components/Form/form.scss +1 -1
  51. package/components/FormControl/form-control.css +22 -4
  52. package/components/FormControl/form-control.scss +27 -4
  53. package/components/HelperText/helper-text.css +0 -1
  54. package/components/Hint/hint.css +0 -1
  55. package/components/Icon/icon.css +0 -1
  56. package/components/InlineEdit/inline-edit.css +0 -1
  57. package/components/InputGroup/input-group.css +0 -1
  58. package/components/JumpLinks/jump-links.css +0 -1
  59. package/components/Label/label-group.css +0 -1
  60. package/components/Label/label.css +0 -1
  61. package/components/List/list.css +0 -1
  62. package/components/Login/login.css +0 -9
  63. package/components/Masthead/masthead.css +0 -1
  64. package/components/Menu/menu.css +0 -1
  65. package/components/MenuToggle/menu-toggle.css +66 -56
  66. package/components/MenuToggle/menu-toggle.scss +76 -65
  67. package/components/ModalBox/modal-box.css +0 -2
  68. package/components/MultipleFileUpload/multiple-file-upload.css +0 -1
  69. package/components/Nav/nav.css +0 -1
  70. package/components/NotificationDrawer/notification-drawer.css +0 -1
  71. package/components/NumberInput/number-input.css +0 -1
  72. package/components/OverflowMenu/overflow-menu.css +0 -1
  73. package/components/Page/page.css +10 -10
  74. package/components/Page/page.scss +11 -8
  75. package/components/Pagination/pagination.css +31 -20
  76. package/components/Pagination/pagination.scss +35 -23
  77. package/components/Panel/panel.css +0 -1
  78. package/components/Popover/popover.css +0 -1
  79. package/components/Progress/progress.css +0 -1
  80. package/components/ProgressStepper/progress-stepper.css +0 -2
  81. package/components/Radio/radio.css +0 -1
  82. package/components/Sidebar/sidebar.css +0 -1
  83. package/components/SimpleList/simple-list.css +0 -1
  84. package/components/Skeleton/skeleton.css +0 -1
  85. package/components/SkipToContent/skip-to-content.css +0 -1
  86. package/components/Slider/slider.css +0 -1
  87. package/components/Spinner/spinner.css +0 -1
  88. package/components/Switch/switch.css +0 -1
  89. package/components/TabContent/tab-content.css +0 -1
  90. package/components/Table/table-grid.css +9 -5
  91. package/components/Table/table-grid.scss +5 -4
  92. package/components/Table/table-scrollable.css +0 -1
  93. package/components/Table/table-tree-view.css +0 -1
  94. package/components/Table/table.css +6 -6
  95. package/components/Table/table.scss +6 -5
  96. package/components/Tabs/tabs.css +0 -1
  97. package/components/TextInputGroup/text-input-group.css +2 -3
  98. package/components/TextInputGroup/text-input-group.scss +2 -2
  99. package/components/Tile/tile.css +0 -1
  100. package/components/Timestamp/timestamp.css +0 -1
  101. package/components/Title/title.css +0 -1
  102. package/components/ToggleGroup/toggle-group.css +0 -1
  103. package/components/Toolbar/toolbar.css +0 -1
  104. package/components/Tooltip/tooltip.css +0 -1
  105. package/components/TreeView/tree-view.css +0 -1
  106. package/components/Truncate/truncate.css +0 -1
  107. package/components/Wizard/wizard.css +0 -2
  108. package/components/_index.css +172 -240
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  111. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  112. package/docs/components/Content/examples/Content.md +188 -204
  113. package/docs/components/DataList/examples/DataList.md +187 -221
  114. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  115. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  116. package/docs/components/Form/examples/Form.md +4 -2
  117. package/docs/components/FormControl/examples/FormControl.md +10 -10
  118. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  119. package/docs/components/Login/examples/Login.md +6 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  121. package/docs/components/Pagination/examples/Pagination.md +12 -12
  122. package/docs/components/Table/examples/Table.md +1 -1
  123. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  124. package/docs/demos/Card/examples/Card.md +4 -4
  125. package/docs/demos/CardView/examples/CardView.md +10 -4
  126. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  127. package/docs/demos/DataList/examples/DataList.md +37 -13
  128. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  129. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  130. package/docs/demos/Page/examples/Page.md +2 -2
  131. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  132. package/docs/demos/Table/examples/Table.md +235 -91
  133. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  134. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  135. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  136. package/layouts/Bullseye/bullseye.css +0 -1
  137. package/layouts/Flex/flex.css +0 -1
  138. package/layouts/Gallery/gallery.css +0 -1
  139. package/layouts/Grid/grid.css +0 -1
  140. package/layouts/Level/level.css +0 -1
  141. package/layouts/Split/split.css +0 -1
  142. package/layouts/Stack/stack.css +0 -1
  143. package/layouts/_index.css +0 -7
  144. package/package.json +5 -5
  145. package/patternfly-base-no-globals.css +84 -62
  146. package/patternfly-base.css +99 -62
  147. package/patternfly-charts.css +2 -2
  148. package/patternfly-charts.scss +2 -2
  149. package/patternfly-no-globals.css +256 -309
  150. package/patternfly.css +271 -309
  151. package/patternfly.min.css +1 -1
  152. package/patternfly.min.css.map +1 -1
  153. package/sass-utilities/mixins.scss +3 -3
  154. package/assets/images/PF-Masthead-Logo.svg +0 -1
  155. package/assets/images/background-filter.svg +0 -17
  156. package/assets/images/g_sizing.png +0 -0
  157. package/assets/images/img_avatar-dark.svg +0 -22
  158. package/assets/images/img_avatar.svg +0 -21
  159. package/assets/images/l_pf-reverse-164x11.png +0 -0
  160. package/assets/images/l_pf-reverse.svg +0 -1
  161. package/assets/images/logo-dropbox-old.svg +0 -1
  162. package/assets/images/logo-dropbox.svg +0 -6
  163. package/assets/images/logo-facebook.svg +0 -4
  164. package/assets/images/logo-github.svg +0 -4
  165. package/assets/images/logo-gitlab.svg +0 -4
  166. package/assets/images/logo-google.svg +0 -4
  167. package/assets/images/logo-google2.svg +0 -10
  168. package/assets/images/logo__pf--reverse--base.png +0 -0
  169. package/assets/images/logo__pf--reverse--base.svg +0 -40
  170. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  171. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  172. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  173. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  174. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  175. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  176. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  177. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  178. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  179. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  180. package/assets/images/pf-c-brand__logo.svg +0 -10
  181. package/assets/images/pf-logo.svg +0 -28
  182. package/assets/images/pf_logo.svg +0 -37
  183. package/assets/images/pf_logo_color.svg +0 -22
  184. package/assets/images/pf_logo_white.svg +0 -37
  185. package/assets/images/pf_mini_logo_white.svg +0 -1
  186. package/assets/images/pfbg_1200.jpg +0 -0
  187. package/assets/images/pfbg_2000.jpg +0 -0
  188. package/assets/images/pfbg_576.jpg +0 -0
  189. package/assets/images/pfbg_576@2x.jpg +0 -0
  190. package/assets/images/pfbg_768.jpg +0 -0
  191. package/assets/images/pfbg_768@2x.jpg +0 -0
  192. package/assets/images/pfbg_992.jpg +0 -0
  193. package/assets/images/pfbg_992@2x.jpg +0 -0
  194. package/assets/images/status-icon-sprite.svg +0 -38
package/components/Table/table.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  --#{$table}__caption--PaddingBlockStart: var(--pf-t--global--spacer--md);
15
15
  --#{$table}__caption--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
16
16
  --#{$table}__caption--PaddingBlockEnd: var(--pf-t--global--spacer--md);
17
- --#{$table}__caption--PaddingInlineStart: var(--pf-t--global--spacer--lg);
17
+ --#{$table}__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
18
18
 
19
19
  // * Table thead cell
20
20
  --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -44,7 +44,7 @@
44
44
  --#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body--default);
45
45
  --#{$table}--cell--LineHeight: var(--pf-t--global--font--line-height--body);
46
46
  --#{$table}--cell--Color: var(--pf-t--global--text--color--regular);
47
- --#{$table}--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--sm);
47
+ --#{$table}--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
48
48
  --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
49
49
 
50
50
  // * Table cell - default variables
@@ -337,12 +337,12 @@
337
337
 
338
338
  // First child padding left
339
339
  &:first-child {
340
- padding-inline-start: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingInlineStart));
340
+ padding-inline-start: var(--#{$table}--cell--first-last-child--PaddingInline);
341
341
  }
342
342
 
343
343
  // Last child padding right
344
344
  &:last-child {
345
- padding-inline-end: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingInlineEnd));
345
+ padding-inline-end: var(--#{$table}--cell--first-last-child--PaddingInline);
346
346
  }
347
347
 
348
348
  &.pf-m-center {
@@ -677,7 +677,7 @@
677
677
  .#{$table}__column-help {
678
678
  display: inline-grid;
679
679
  grid-template-columns: auto max-content;
680
- align-items: baseline;
680
+ align-items: last baseline;
681
681
  justify-content: start;
682
682
 
683
683
  .#{$table}__text {
@@ -886,6 +886,7 @@
886
886
 
887
887
  // - Table column help action
888
888
  .#{$table}__column-help-action {
889
+ align-self: last baseline;
889
890
  margin-inline-start: var(--#{$table}__column-help--MarginInlineStart);
890
891
  }
891
892
 
package/components/Tabs/tabs.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tabs {
3
2
  --pf-v6-c-tabs--inset: 0;
4
3
  --pf-v6-c-tabs--Width: auto;
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-text-input-group {
3
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
4
3
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -40,9 +39,9 @@
40
39
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
41
40
  --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
42
41
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
43
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
42
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
44
43
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
45
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
44
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
46
45
  --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
47
46
  --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
48
47
  --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -54,9 +54,9 @@
54
54
  --#{$text-input-group}__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
55
55
  --#{$text-input-group}--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
56
56
  --#{$text-input-group}__icon--Color: var(--pf-t--global--icon--color--regular);
57
- --#{$text-input-group}--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
57
+ --#{$text-input-group}--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
58
58
  --#{$text-input-group}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
59
- --#{$text-input-group}--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
59
+ --#{$text-input-group}--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
60
60
  --#{$text-input-group}__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
61
61
  --#{$text-input-group}__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
62
62
  --#{$text-input-group}__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
package/components/Tile/tile.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tile {
3
2
  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
4
3
  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
package/components/Timestamp/timestamp.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-timestamp {
3
2
  --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
4
3
  --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
package/components/Title/title.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-title {
3
2
  --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
4
3
  --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-toggle-group {
3
2
  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
package/components/Toolbar/toolbar.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-toolbar {
3
2
  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
4
3
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
package/components/Tooltip/tooltip.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tooltip {
3
2
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
4
3
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
package/components/TreeView/tree-view.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tree-view {
3
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));
4
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));
package/components/Truncate/truncate.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-truncate {
3
2
  --pf-v6-c-truncate--MinWidth: 6ch;
4
3
  --pf-v6-c-truncate__start--MinWidth: 6ch;
package/components/Wizard/wizard.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-wizard {
3
2
  --pf-v6-c-wizard--Height: initial;
4
3
  --pf-v6-c-wizard--Height--base: 100%;
@@ -115,7 +114,6 @@
115
114
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
116
115
  }
117
116
  @media screen and (min-width: 62rem) {
118
- :root,
119
117
  .pf-v6-c-wizard {
120
118
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
121
119
  --pf-v6-c-wizard__nav--BoxShadow: none;