@patternfly/react-styles 6.0.0-prerelease.1 → 6.0.0-prerelease.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +18 -13
  3. package/css/components/Accordion/accordion.css +2 -1
  4. package/css/components/ActionList/action-list.css +2 -1
  5. package/css/components/Alert/alert-group.css +2 -1
  6. package/css/components/Alert/alert.css +5 -3
  7. package/css/components/Avatar/avatar.css +2 -1
  8. package/css/components/BackToTop/back-to-top.css +4 -2
  9. package/css/components/Backdrop/backdrop.css +2 -1
  10. package/css/components/BackgroundImage/background-image.css +2 -1
  11. package/css/components/Badge/badge.css +2 -1
  12. package/css/components/Banner/banner.css +4 -2
  13. package/css/components/Brand/brand.css +2 -1
  14. package/css/components/Breadcrumb/breadcrumb.css +2 -1
  15. package/css/components/Button/button.css +4 -3
  16. package/css/components/CalendarMonth/calendar-month.css +2 -1
  17. package/css/components/Card/card.css +5 -3
  18. package/css/components/Check/check.css +2 -1
  19. package/css/components/ClipboardCopy/clipboard-copy.css +2 -4
  20. package/css/components/CodeBlock/code-block.css +2 -1
  21. package/css/components/CodeEditor/code-editor.css +2 -1
  22. package/css/components/Content/content.css +2 -1
  23. package/css/components/DataList/data-list.css +6 -3
  24. package/css/components/DatePicker/date-picker.css +2 -1
  25. package/css/components/DescriptionList/description-list.css +14 -7
  26. package/css/components/Divider/divider.css +2 -1
  27. package/css/components/DragDrop/drag-drop.css +4 -2
  28. package/css/components/Drawer/drawer.css +6 -3
  29. package/css/components/DualListSelector/dual-list-selector.css +5 -3
  30. package/css/components/EmptyState/empty-state.css +2 -1
  31. package/css/components/ExpandableSection/expandable-section.css +2 -1
  32. package/css/components/FileUpload/file-upload.css +2 -1
  33. package/css/components/Form/form.css +5 -3
  34. package/css/components/FormControl/form-control.css +2 -1
  35. package/css/components/HelperText/helper-text.css +2 -1
  36. package/css/components/Hint/hint.css +2 -1
  37. package/css/components/Icon/icon.css +2 -1
  38. package/css/components/InlineEdit/inline-edit.css +2 -1
  39. package/css/components/InputGroup/input-group.css +2 -1
  40. package/css/components/JumpLinks/jump-links.css +5 -3
  41. package/css/components/Label/label-group.css +2 -1
  42. package/css/components/Label/label.css +2 -1
  43. package/css/components/List/list.css +2 -1
  44. package/css/components/Login/login.css +18 -9
  45. package/css/components/Masthead/masthead.css +2 -1
  46. package/css/components/Menu/menu.css +6 -5
  47. package/css/components/MenuToggle/menu-toggle.css +2 -1
  48. package/css/components/ModalBox/modal-box.css +4 -2
  49. package/css/components/MultipleFileUpload/multiple-file-upload.css +2 -1
  50. package/css/components/Nav/nav.css +2 -1
  51. package/css/components/NotificationDrawer/notification-drawer.css +2 -1
  52. package/css/components/NumberInput/number-input.css +2 -1
  53. package/css/components/OverflowMenu/overflow-menu.css +2 -1
  54. package/css/components/Page/page.css +7 -4
  55. package/css/components/Pagination/pagination.css +6 -3
  56. package/css/components/Panel/panel.css +2 -1
  57. package/css/components/Popover/popover.css +2 -1
  58. package/css/components/Progress/progress.css +2 -1
  59. package/css/components/ProgressStepper/progress-stepper.css +4 -2
  60. package/css/components/Radio/radio.css +2 -1
  61. package/css/components/Sidebar/sidebar.css +2 -1
  62. package/css/components/SimpleList/simple-list.css +2 -1
  63. package/css/components/Skeleton/skeleton.css +2 -1
  64. package/css/components/SkipToContent/skip-to-content.css +2 -1
  65. package/css/components/Slider/slider.css +2 -1
  66. package/css/components/Spinner/spinner.css +2 -1
  67. package/css/components/Switch/switch.css +2 -1
  68. package/css/components/TabContent/tab-content.css +2 -1
  69. package/css/components/Table/table-grid.css +2 -1
  70. package/css/components/Table/table-scrollable.css +2 -1
  71. package/css/components/Table/table-tree-view.css +2 -1
  72. package/css/components/Table/table.css +44 -42
  73. package/css/components/Table/table.d.ts +5 -5
  74. package/css/components/Table/table.js +5 -5
  75. package/css/components/Table/table.mjs +5 -5
  76. package/css/components/Tabs/tabs.css +2 -1
  77. package/css/components/TextInputGroup/text-input-group.css +2 -1
  78. package/css/components/Tile/tile.css +2 -1
  79. package/css/components/Timestamp/timestamp.css +2 -1
  80. package/css/components/Title/title.css +2 -1
  81. package/css/components/ToggleGroup/toggle-group.css +2 -1
  82. package/css/components/Toolbar/toolbar.css +5 -3
  83. package/css/components/Tooltip/tooltip.css +2 -1
  84. package/css/components/TreeView/tree-view.css +2 -1
  85. package/css/components/Truncate/truncate.css +2 -1
  86. package/css/components/Wizard/wizard.css +7 -4
  87. package/css/components/_index.css +306 -187
  88. package/css/components/_index.d.ts +1 -1
  89. package/css/components/_index.js +1 -1
  90. package/css/components/_index.mjs +1 -1
  91. package/css/layouts/Bullseye/bullseye.css +2 -1
  92. package/css/layouts/Flex/flex.css +2 -1
  93. package/css/layouts/Gallery/gallery.css +2 -1
  94. package/css/layouts/Grid/grid.css +2 -1
  95. package/css/layouts/Level/level.css +2 -1
  96. package/css/layouts/Split/split.css +2 -1
  97. package/css/layouts/Stack/stack.css +2 -1
  98. package/css/layouts/_index.css +14 -7
  99. package/css/utilities/Text/text.css +6 -6
  100. package/css/utilities/_index.css +6 -6
  101. package/package.json +3 -3
package/css/components/Tabs/tabs.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-tabs) {
1
+ :root,
2
+ .pf-v6-c-tabs {
2
3
  --pf-v6-c-tabs--inset: 0;
3
4
  --pf-v6-c-tabs--Width: auto;
4
5
  --pf-v6-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);
package/css/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-text-input-group) {
1
+ :root,
2
+ .pf-v6-c-text-input-group {
2
3
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
4
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
4
5
  --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
package/css/components/Tile/tile.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-tile) {
1
+ :root,
2
+ .pf-v6-c-tile {
2
3
  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
3
4
  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
4
5
  --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
package/css/components/Timestamp/timestamp.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-timestamp) {
1
+ :root,
2
+ .pf-v6-c-timestamp {
2
3
  --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
3
4
  --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
4
5
  --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;
package/css/components/Title/title.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-title) {
1
+ :root,
2
+ .pf-v6-c-title {
2
3
  --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
3
4
  --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
4
5
  --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
package/css/components/ToggleGroup/toggle-group.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-toggle-group) {
1
+ :root,
2
+ .pf-v6-c-toggle-group {
2
3
  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3
4
  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4
5
  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
package/css/components/Toolbar/toolbar.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-toolbar) {
1
+ :root,
2
+ .pf-v6-c-toolbar {
2
3
  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
3
4
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
4
5
  --pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -37,7 +38,8 @@
37
38
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
38
39
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
40
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
40
- --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-t--global--transition);
41
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
42
+ --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
41
43
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
42
44
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
43
45
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -369,7 +371,7 @@
369
371
 
370
372
  .pf-v6-c-toolbar__expand-all-icon {
371
373
  display: inline-flex;
372
- transition: var(--pf-v6-c-toolbar__expand-all-icon--Transition);
374
+ transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
373
375
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
374
376
  }
375
377
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
package/css/components/Tooltip/tooltip.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-tooltip) {
1
+ :root,
2
+ .pf-v6-c-tooltip {
2
3
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3
4
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
4
5
  --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
package/css/components/TreeView/tree-view.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-tree-view) {
1
+ :root,
2
+ .pf-v6-c-tree-view {
2
3
  --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));
3
4
  --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
4
5
  --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
package/css/components/Truncate/truncate.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-truncate) {
1
+ :root,
2
+ .pf-v6-c-truncate {
2
3
  --pf-v6-c-truncate--MinWidth: 6ch;
3
4
  --pf-v6-c-truncate__start--MinWidth: 6ch;
4
5
  }
package/css/components/Wizard/wizard.css CHANGED
@@ -1,4 +1,5 @@
1
- :where(:root, .pf-v6-c-wizard) {
1
+ :root,
2
+ .pf-v6-c-wizard {
2
3
  --pf-v6-c-wizard--Height: initial;
3
4
  --pf-v6-c-wizard--Height--base: 100%;
4
5
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
@@ -39,7 +40,8 @@
39
40
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
41
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
41
42
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
42
- --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
43
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
44
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
43
45
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
44
46
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
45
47
  --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
@@ -113,7 +115,8 @@
113
115
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
114
116
  }
115
117
  @media screen and (min-width: 62rem) {
116
- :where(:root, .pf-v6-c-wizard) {
118
+ :root,
119
+ .pf-v6-c-wizard {
117
120
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
118
121
  --pf-v6-c-wizard__nav--BoxShadow: none;
119
122
  }
@@ -444,7 +447,7 @@
444
447
 
445
448
  .pf-v6-c-wizard__nav-link-toggle-icon {
446
449
  display: inline-block;
447
- transition: var(--pf-v6-c-wizard__nav-link-toggle-icon--Transition);
450
+ transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
448
451
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
449
452
  }
450
453
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {