@patternfly/react-styles 5.0.0 → 5.1.1-prerelease.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +20 -13
  3. package/css/components/Accordion/accordion.css +30 -20
  4. package/css/components/ActionList/action-list.css +2 -2
  5. package/css/components/Alert/alert-group.css +7 -4
  6. package/css/components/Alert/alert.css +16 -13
  7. package/css/components/AppLauncher/app-launcher.css +32 -23
  8. package/css/components/BackToTop/back-to-top.css +2 -2
  9. package/css/components/Backdrop/backdrop.css +2 -2
  10. package/css/components/BackgroundImage/background-image.css +2 -2
  11. package/css/components/Badge/badge.css +2 -2
  12. package/css/components/Banner/banner.css +5 -2
  13. package/css/components/Breadcrumb/breadcrumb.css +6 -3
  14. package/css/components/Button/button.css +23 -17
  15. package/css/components/CalendarMonth/calendar-month.css +21 -15
  16. package/css/components/Card/card.css +21 -16
  17. package/css/components/Check/check.css +2 -2
  18. package/css/components/Chip/chip-group.css +6 -6
  19. package/css/components/Chip/chip.css +16 -9
  20. package/css/components/Chip/chip.d.ts +1 -0
  21. package/css/components/Chip/chip.js +1 -0
  22. package/css/components/Chip/chip.mjs +1 -0
  23. package/css/components/ClipboardCopy/clipboard-copy.css +16 -10
  24. package/css/components/CodeBlock/code-block.css +6 -3
  25. package/css/components/CodeEditor/code-editor.css +31 -22
  26. package/css/components/Content/content.css +33 -30
  27. package/css/components/ContextSelector/context-selector.css +41 -26
  28. package/css/components/DataList/data-list-grid.css +21 -49
  29. package/css/components/DataList/data-list.css +66 -84
  30. package/css/components/DatePicker/date-picker.css +8 -8
  31. package/css/components/DescriptionList/description-list.css +8 -5
  32. package/css/components/DragDrop/drag-drop.css +8 -8
  33. package/css/components/Drawer/drawer.css +75 -60
  34. package/css/components/Dropdown/dropdown.css +75 -66
  35. package/css/components/DualListSelector/dual-list-selector.css +20 -14
  36. package/css/components/EmptyState/empty-state.css +7 -4
  37. package/css/components/ExpandableSection/expandable-section.css +13 -10
  38. package/css/components/FileUpload/file-upload.css +9 -15
  39. package/css/components/Form/form.css +50 -50
  40. package/css/components/FormControl/form-control.css +21 -11
  41. package/css/components/HelperText/helper-text.css +1 -1
  42. package/css/components/Hint/hint.css +9 -6
  43. package/css/components/Icon/icon.css +1 -1
  44. package/css/components/InlineEdit/inline-edit.css +4 -4
  45. package/css/components/InputGroup/input-group.css +12 -6
  46. package/css/components/JumpLinks/jump-links.css +24 -24
  47. package/css/components/Label/label-group.css +13 -10
  48. package/css/components/Label/label.css +9 -9
  49. package/css/components/List/list.css +9 -9
  50. package/css/components/LogViewer/log-viewer.css +14 -14
  51. package/css/components/Login/login.css +36 -27
  52. package/css/components/Masthead/masthead.css +19 -22
  53. package/css/components/Menu/menu.css +69 -66
  54. package/css/components/MenuToggle/menu-toggle.css +41 -29
  55. package/css/components/ModalBox/modal-box.css +19 -19
  56. package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  57. package/css/components/Nav/nav.css +100 -93
  58. package/css/components/NotificationBadge/notification-badge.css +13 -7
  59. package/css/components/NotificationDrawer/notification-drawer.css +28 -19
  60. package/css/components/NumberInput/number-input.css +3 -3
  61. package/css/components/OptionsMenu/options-menu.css +43 -31
  62. package/css/components/OverflowMenu/overflow-menu.css +2 -2
  63. package/css/components/Page/page.css +119 -65
  64. package/css/components/Pagination/pagination.css +24 -18
  65. package/css/components/Panel/panel.css +13 -7
  66. package/css/components/Popover/popover.css +24 -21
  67. package/css/components/Progress/progress.css +7 -7
  68. package/css/components/ProgressStepper/progress-stepper.css +26 -20
  69. package/css/components/Radio/radio.css +4 -5
  70. package/css/components/Select/select.css +56 -47
  71. package/css/components/Sidebar/sidebar.css +11 -5
  72. package/css/components/SimpleList/simple-list.css +10 -4
  73. package/css/components/Skeleton/skeleton.css +2 -5
  74. package/css/components/SkipToContent/skip-to-content.css +3 -3
  75. package/css/components/Slider/slider.css +17 -20
  76. package/css/components/Switch/switch.css +5 -5
  77. package/css/components/TabContent/tab-content.css +4 -1
  78. package/css/components/Table/table-grid.css +256 -219
  79. package/css/components/Table/table-scrollable.css +2 -2
  80. package/css/components/Table/table-tree-view.css +107 -104
  81. package/css/components/Table/table.css +87 -69
  82. package/css/components/Tabs/tabs.css +66 -48
  83. package/css/components/TextInputGroup/text-input-group.css +15 -15
  84. package/css/components/Tile/tile.css +10 -10
  85. package/css/components/ToggleGroup/toggle-group.css +14 -11
  86. package/css/components/Toolbar/toolbar.css +44 -41
  87. package/css/components/Tooltip/tooltip.css +19 -16
  88. package/css/components/TreeView/tree-view.css +42 -27
  89. package/css/components/Wizard/wizard.css +47 -35
  90. package/css/docs/components/Button/examples/Button.css +2 -2
  91. package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
  92. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  93. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  94. package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
  95. package/css/docs/components/Nav/examples/Navigation.css +2 -2
  96. package/css/docs/components/Popover/examples/Popover.css +2 -2
  97. package/css/docs/components/Select/deprecated/Select.css +3 -3
  98. package/css/docs/components/Table/examples/Table.css +2 -2
  99. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  100. package/css/docs/components/Tile/examples/Tile.css +1 -1
  101. package/css/docs/demos/Card/examples/Card.css +3 -3
  102. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  103. package/css/layouts/Flex/flex.css +115 -43
  104. package/css/utilities/Accessibility/accessibility.css +12 -12
  105. package/css/utilities/Spacing/spacing.css +720 -960
  106. package/package.json +3 -3
package/css/components/Skeleton/skeleton.css CHANGED
@@ -54,15 +54,12 @@
54
54
  .pf-v5-c-skeleton::before {
55
55
  display: block;
56
56
  height: var(--pf-v5-c-skeleton--before--Height);
57
- padding-bottom: var(--pf-v5-c-skeleton--before--PaddingBottom);
57
+ padding-block-end: var(--pf-v5-c-skeleton--before--PaddingBottom);
58
58
  content: var(--pf-v5-c-skeleton--before--Content);
59
59
  }
60
60
  .pf-v5-c-skeleton::after {
61
61
  position: absolute;
62
- top: 0;
63
- right: 0;
64
- bottom: 0;
65
- left: 0;
62
+ inset: 0;
66
63
  display: block;
67
64
  content: "";
68
65
  background: linear-gradient(var(--pf-v5-c-skeleton--after--LinearGradientAngle), var(--pf-v5-c-skeleton--after--LinearGradientColorStop1), var(--pf-v5-c-skeleton--after--LinearGradientColorStop2), var(--pf-v5-c-skeleton--after--LinearGradientColorStop3));
package/css/components/SkipToContent/skip-to-content.css CHANGED
@@ -3,10 +3,10 @@
3
3
  --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
4
4
  --pf-v5-c-skip-to-content--focus--Left: var(--pf-v5-global--spacer--md);
5
5
  position: absolute;
6
- top: var(--pf-v5-c-skip-to-content--Top);
7
- left: -300%;
6
+ inset-block-start: var(--pf-v5-c-skip-to-content--Top);
7
+ inset-inline-start: -300%;
8
8
  z-index: var(--pf-v5-c-skip-to-content--ZIndex);
9
9
  }
10
10
  .pf-v5-c-skip-to-content:focus-within {
11
- left: var(--pf-v5-c-skip-to-content--focus--Left);
11
+ inset-inline-start: var(--pf-v5-c-skip-to-content--focus--Left);
12
12
  }
package/css/components/Slider/slider.css CHANGED
@@ -77,8 +77,8 @@
77
77
  }
78
78
 
79
79
  .pf-v5-c-slider__rail {
80
- padding-top: var(--pf-v5-c-slider__rail--PaddingTop);
81
- padding-bottom: var(--pf-v5-c-slider__rail--PaddingBottom);
80
+ padding-block-start: var(--pf-v5-c-slider__rail--PaddingTop);
81
+ padding-block-end: var(--pf-v5-c-slider__rail--PaddingBottom);
82
82
  }
83
83
 
84
84
  .pf-v5-c-slider__rail-track {
@@ -87,10 +87,7 @@
87
87
  }
88
88
  .pf-v5-c-slider__rail-track::before {
89
89
  position: absolute;
90
- top: 0;
91
- right: 0;
92
- bottom: 0;
93
- left: 0;
90
+ inset: 0;
94
91
  content: "";
95
92
  background: linear-gradient(to right, var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
96
93
  border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
@@ -104,8 +101,8 @@
104
101
 
105
102
  .pf-v5-c-slider__step {
106
103
  position: absolute;
107
- top: 0;
108
- left: var(--pf-v5-c-slider__step--Left);
104
+ inset-block-start: 0;
105
+ inset-inline-start: var(--pf-v5-c-slider__step--Left);
109
106
  content: "";
110
107
  }
111
108
  .pf-v5-c-slider__step.pf-m-active {
@@ -122,8 +119,8 @@
122
119
 
123
120
  .pf-v5-c-slider__step-tick {
124
121
  position: absolute;
125
- top: var(--pf-v5-c-slider__step-tick--Top);
126
- left: 0;
122
+ inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
123
+ inset-inline-start: 0;
127
124
  width: var(--pf-v5-c-slider__step-tick--Width);
128
125
  height: var(--pf-v5-c-slider__step-tick--Height);
129
126
  background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
@@ -133,15 +130,15 @@
133
130
 
134
131
  .pf-v5-c-slider__step-label {
135
132
  position: absolute;
136
- top: var(--pf-v5-c-slider__step-label--Top);
133
+ inset-block-start: var(--pf-v5-c-slider__step-label--Top);
137
134
  word-break: normal;
138
135
  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
139
136
  }
140
137
 
141
138
  .pf-v5-c-slider__thumb {
142
139
  position: absolute;
143
- top: var(--pf-v5-c-slider__thumb--Top);
144
- left: var(--pf-v5-c-slider__thumb--Left);
140
+ inset-block-start: var(--pf-v5-c-slider__thumb--Top);
141
+ inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
145
142
  width: var(--pf-v5-c-slider__thumb--Width);
146
143
  height: var(--pf-v5-c-slider__thumb--Height);
147
144
  cursor: pointer;
@@ -152,8 +149,8 @@
152
149
  }
153
150
  .pf-v5-c-slider__thumb::before {
154
151
  position: absolute;
155
- top: 50%;
156
- left: 50%;
152
+ inset-block-start: 50%;
153
+ inset-inline-start: 50%;
157
154
  width: var(--pf-v5-c-slider__thumb--before--Width);
158
155
  height: var(--pf-v5-c-slider__thumb--before--Height);
159
156
  content: "";
@@ -172,13 +169,13 @@
172
169
  }
173
170
 
174
171
  .pf-v5-c-slider__value {
175
- margin-left: var(--pf-v5-c-slider__value--MarginLeft);
172
+ margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
176
173
  }
177
174
  .pf-v5-c-slider__value.pf-m-floating {
178
175
  --pf-v5-c-slider__value--MarginLeft: 0;
179
176
  position: absolute;
180
- top: 0;
181
- left: var(--pf-v5-c-slider__value--m-floating--Left);
177
+ inset-block-start: 0;
178
+ inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
182
179
  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
183
180
  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
184
181
  }
@@ -188,9 +185,9 @@
188
185
 
189
186
  .pf-v5-c-slider__actions {
190
187
  display: flex;
191
- margin-right: var(--pf-v5-c-slider__actions--MarginRight);
188
+ margin-inline-end: var(--pf-v5-c-slider__actions--MarginRight);
192
189
  }
193
190
  .pf-v5-c-slider__main ~ .pf-v5-c-slider__actions {
194
191
  --pf-v5-c-slider__actions--MarginRight: 0;
195
- margin-left: var(--pf-v5-c-slider__main--actions--MarginLeft);
192
+ margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
196
193
  }
package/css/components/Switch/switch.css CHANGED
@@ -107,8 +107,8 @@
107
107
  }
108
108
  .pf-v5-c-switch__toggle::before {
109
109
  position: absolute;
110
- top: var(--pf-v5-c-switch__toggle--before--Top);
111
- left: var(--pf-v5-c-switch__toggle--before--Left);
110
+ inset-block-start: var(--pf-v5-c-switch__toggle--before--Top);
111
+ inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
112
112
  display: block;
113
113
  width: var(--pf-v5-c-switch__toggle--before--Width);
114
114
  height: var(--pf-v5-c-switch__toggle--before--Height);
@@ -121,9 +121,9 @@
121
121
 
122
122
  .pf-v5-c-switch__toggle-icon {
123
123
  position: absolute;
124
- top: 0;
125
- bottom: 0;
126
- left: var(--pf-v5-c-switch__toggle-icon--Left);
124
+ inset-block-start: 0;
125
+ inset-block-end: 0;
126
+ inset-inline-start: var(--pf-v5-c-switch__toggle-icon--Left);
127
127
  display: flex;
128
128
  align-items: center;
129
129
  font-size: var(--pf-v5-c-switch__toggle-icon--FontSize);
package/css/components/TabContent/tab-content.css CHANGED
@@ -26,7 +26,10 @@
26
26
  }
27
27
 
28
28
  .pf-v5-c-tab-content__body {
29
- padding: var(--pf-v5-c-tab-content__body--PaddingTop) var(--pf-v5-c-tab-content__body--PaddingRight) var(--pf-v5-c-tab-content__body--PaddingBottom) var(--pf-v5-c-tab-content__body--PaddingLeft);
29
+ padding-block-start: var(--pf-v5-c-tab-content__body--PaddingTop);
30
+ padding-block-end: var(--pf-v5-c-tab-content__body--PaddingBottom);
31
+ padding-inline-start: var(--pf-v5-c-tab-content__body--PaddingLeft);
32
+ padding-inline-end: var(--pf-v5-c-tab-content__body--PaddingRight);
30
33
  }
31
34
  .pf-v5-c-tab-content__body.pf-m-padding {
32
35
  --pf-v5-c-tab-content__body--PaddingTop: var(--pf-v5-c-tab-content__body--m-padding--PaddingTop);