@patternfly/react-styles 5.0.0-alpha.1 → 5.0.0-alpha.2

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -3,7 +3,59 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- # [5.0.0-alpha.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.91.6...@patternfly/react-styles@5.0.0-alpha.1) (2023-01-10)
6
+ # 5.0.0-alpha.2 (2023-02-08)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+ ## 4.92.6 (2023-01-23)
11
+
12
+ **Note:** Version bump only for package @patternfly/react-styles
13
+
14
+ ## 4.92.5 (2023-01-19)
15
+
16
+ **Note:** Version bump only for package @patternfly/react-styles
17
+
18
+ ## 4.92.4 (2023-01-18)
19
+
20
+ ### Bug Fixes
21
+
22
+ - **Tabs:** Removed isHelpAction prop from TabsAction ([#8560](https://github.com/patternfly/patternfly-react/issues/8560)) ([05fa1b0](https://github.com/patternfly/patternfly-react/commit/05fa1b0acfe886f09c5bdf4ad9f8e27878ee817e))
23
+
24
+ ## 4.92.3 (2022-12-08)
25
+
26
+ **Note:** Version bump only for package @patternfly/react-styles
27
+
28
+ ## 4.92.2 (2022-12-07)
29
+
30
+ **Note:** Version bump only for package @patternfly/react-styles
31
+
32
+ ## 4.92.1 (2022-12-01)
33
+
34
+ **Note:** Version bump only for package @patternfly/react-styles
35
+
36
+ # 4.92.0 (2022-11-16)
37
+
38
+ ### Features
39
+
40
+ - **Tabs:** add TabAction, update core ver ([#8348](https://github.com/patternfly/patternfly-react/issues/8348)) ([8c584b4](https://github.com/patternfly/patternfly-react/commit/8c584b48f8e545cf226f785b873ee11eda505724))
41
+
42
+ ## 4.91.10 (2022-10-27)
43
+
44
+ **Note:** Version bump only for package @patternfly/react-styles
45
+
46
+ ## 4.91.9 (2022-10-26)
47
+
48
+ **Note:** Version bump only for package @patternfly/react-styles
49
+
50
+ ## [4.91.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.91.7...@patternfly/react-styles@4.91.8) (2022-10-17)
51
+
52
+ **Note:** Version bump only for package @patternfly/react-styles
53
+
54
+ ## 4.91.7 (2022-10-14)
55
+
56
+ **Note:** Version bump only for package @patternfly/react-styles
57
+
58
+ ## 4.91.6 (2022-10-05)
7
59
 
8
60
  ### Bug Fixes
9
61
 
@@ -16,7 +16,7 @@
16
16
  --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
17
17
  --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
18
18
  --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
19
- --pf-c-calendar-month__header-year--Width: 8ch;
19
+ --pf-c-calendar-month__header-year--Width: 8.5ch;
20
20
  --pf-c-calendar-month__header-nav-control--MarginRight: 0;
21
21
  --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
22
22
  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
@@ -13,7 +13,9 @@
13
13
  --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
14
14
  --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
15
15
  --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
16
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
16
+ --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
17
+ --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
18
+ --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
17
19
  --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
18
20
  --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
19
21
  --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -84,7 +86,6 @@
84
86
  --pf-c-card--m-plain--BackgroundColor: transparent;
85
87
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
86
88
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
87
- --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
88
89
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
89
90
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
90
91
  display: flex;
@@ -230,13 +231,11 @@
230
231
  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
231
232
  --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
232
233
  }
233
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
234
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
235
- }
236
234
  .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
237
235
  order: 2;
238
236
  }
239
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
237
+
238
+ .pf-c-card__header-main {
240
239
  flex: 1;
241
240
  }
242
241
 
@@ -262,10 +261,8 @@
262
261
  align-self: flex-start;
263
262
  order: 1;
264
263
  padding-left: var(--pf-c-card__actions--PaddingLeft);
265
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
266
- }
267
- .pf-c-card__actions > * + * {
268
- margin-left: var(--pf-c-card__actions--child--MarginLeft);
264
+ margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
265
+ gap: var(--pf-c-card__actions--Gap);
269
266
  }
270
267
  .pf-c-card__actions + .pf-c-card__title,
271
268
  .pf-c-card__actions + .pf-c-card__body,
@@ -273,8 +270,8 @@
273
270
  padding: 0;
274
271
  }
275
272
  .pf-c-card__actions.pf-m-no-offset {
276
- --pf-c-card__header-toggle--MarginTop: 0;
277
- --pf-c-card__header-toggle--MarginBottom: 0;
273
+ --pf-c-card__actions--MarginTop: 0;
274
+ --pf-c-card__actions--MarginBottom: 0;
278
275
  }
279
276
 
280
277
  .pf-c-card__header,
@@ -6,6 +6,7 @@ declare const _default: {
6
6
  "cardExpandableContent": "pf-c-card__expandable-content",
7
7
  "cardFooter": "pf-c-card__footer",
8
8
  "cardHeader": "pf-c-card__header",
9
+ "cardHeaderMain": "pf-c-card__header-main",
9
10
  "cardHeaderToggle": "pf-c-card__header-toggle",
10
11
  "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
11
12
  "cardSrInput": "pf-c-card__sr-input",
@@ -8,6 +8,7 @@ exports.default = {
8
8
  "cardExpandableContent": "pf-c-card__expandable-content",
9
9
  "cardFooter": "pf-c-card__footer",
10
10
  "cardHeader": "pf-c-card__header",
11
+ "cardHeaderMain": "pf-c-card__header-main",
11
12
  "cardHeaderToggle": "pf-c-card__header-toggle",
12
13
  "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
13
14
  "cardSrInput": "pf-c-card__sr-input",
@@ -6,6 +6,7 @@ export default {
6
6
  "cardExpandableContent": "pf-c-card__expandable-content",
7
7
  "cardFooter": "pf-c-card__footer",
8
8
  "cardHeader": "pf-c-card__header",
9
+ "cardHeaderMain": "pf-c-card__header-main",
9
10
  "cardHeaderToggle": "pf-c-card__header-toggle",
10
11
  "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
11
12
  "cardSrInput": "pf-c-card__sr-input",
@@ -10,28 +10,39 @@
10
10
 
11
11
  .pf-c-chip-group {
12
12
  color: var(--pf-global--Color--100);
13
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
14
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
13
+ --pf-c-chip-group--PaddingTop: 0;
14
+ --pf-c-chip-group--PaddingRight: 0;
15
+ --pf-c-chip-group--PaddingBottom: 0;
16
+ --pf-c-chip-group--PaddingLeft: 0;
17
+ --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
18
+ --pf-c-chip-group--ColumnGap: 0;
19
+ --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
20
+ --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
21
+ --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
22
+ --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
15
23
  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
16
24
  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
17
25
  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
18
26
  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
19
27
  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
20
28
  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
21
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
22
29
  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
23
30
  --pf-c-chip-group__label--MaxWidth: 18ch;
24
31
  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
25
32
  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
26
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
27
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
28
33
  max-width: 100%;
34
+ padding-top: var(--pf-c-chip-group--PaddingTop);
35
+ padding-right: var(--pf-c-chip-group--PaddingRight);
36
+ padding-bottom: var(--pf-c-chip-group--PaddingBottom);
37
+ padding-left: var(--pf-c-chip-group--PaddingLeft);
38
+ row-gap: var(--pf-c-chip-group--RowGap);
39
+ column-gap: var(--pf-c-chip-group--ColumnGap);
29
40
  }
30
41
  .pf-c-chip-group.pf-m-category {
31
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
32
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
33
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
34
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
42
+ --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
43
+ --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
44
+ --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
45
+ --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
35
46
  background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
36
47
  border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
37
48
  }
@@ -42,11 +53,8 @@
42
53
  flex-wrap: wrap;
43
54
  align-items: baseline;
44
55
  min-width: 0;
45
- }
46
-
47
- .pf-c-chip-group__list {
48
- margin-right: var(--pf-c-chip-group__list--MarginRight);
49
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
56
+ row-gap: var(--pf-c-chip-group__main--RowGap);
57
+ column-gap: var(--pf-c-chip-group__main--ColumnGap);
50
58
  }
51
59
 
52
60
  .pf-c-chip-group,
@@ -57,11 +65,14 @@
57
65
  min-width: 0;
58
66
  }
59
67
 
68
+ .pf-c-chip-group__list {
69
+ row-gap: var(--pf-c-chip-group__list--RowGap);
70
+ column-gap: var(--pf-c-chip-group__list--ColumnGap);
71
+ }
72
+
60
73
  .pf-c-chip-group__list-item {
61
74
  display: inline-flex;
62
75
  min-width: 0;
63
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
64
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
65
76
  }
66
77
 
67
78
  .pf-c-chip-group__label {
@@ -69,7 +80,6 @@
69
80
  text-overflow: ellipsis;
70
81
  white-space: nowrap;
71
82
  max-width: var(--pf-c-chip-group__label--MaxWidth);
72
- margin-right: var(--pf-c-chip-group__label--MarginRight);
73
83
  font-size: var(--pf-c-chip-group__label--FontSize);
74
84
  }
75
85
 
@@ -127,6 +127,12 @@
127
127
  .pf-c-content ul {
128
128
  margin: 0;
129
129
  }
130
+ .pf-c-content ol.pf-m-plain,
131
+ .pf-c-content ul.pf-m-plain {
132
+ padding-left: 0;
133
+ margin-left: 0;
134
+ list-style: none;
135
+ }
130
136
  .pf-c-content h1 {
131
137
  margin-top: var(--pf-c-content--h1--MarginTop);
132
138
  margin-bottom: var(--pf-c-content--h1--MarginBottom);
@@ -2,7 +2,8 @@ import './content.css';
2
2
  declare const _default: {
3
3
  "content": "pf-c-content",
4
4
  "modifiers": {
5
- "visited": "pf-m-visited"
5
+ "visited": "pf-m-visited",
6
+ "plain": "pf-m-plain"
6
7
  }
7
8
  };
8
9
  export default _default;
@@ -4,6 +4,7 @@ require('./content.css');
4
4
  exports.default = {
5
5
  "content": "pf-c-content",
6
6
  "modifiers": {
7
- "visited": "pf-m-visited"
7
+ "visited": "pf-m-visited",
8
+ "plain": "pf-m-plain"
8
9
  }
9
10
  };
@@ -2,6 +2,7 @@ import './content.css';
2
2
  export default {
3
3
  "content": "pf-c-content",
4
4
  "modifiers": {
5
- "visited": "pf-m-visited"
5
+ "visited": "pf-m-visited",
6
+ "plain": "pf-m-plain"
6
7
  }
7
8
  };
@@ -281,7 +281,6 @@
281
281
  }
282
282
 
283
283
  .pf-c-drawer__body {
284
- min-height: 0;
285
284
  padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
286
285
  }
287
286
  .pf-c-drawer__body.pf-m-no-padding {
@@ -3,38 +3,39 @@
3
3
  --pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
4
4
  --pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
5
5
  --pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
6
+ --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
7
+ --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
8
+ --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
9
+ --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
6
10
  --pf-c-empty-state__content--MaxWidth: none;
11
+ --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
12
+ --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
13
+ --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
7
14
  --pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
8
15
  --pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
9
16
  --pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
10
- --pf-c-empty-state__content--c-title--m-lg--FontSize: var(--pf-global--FontSize--xl);
17
+ --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
18
+ --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
19
+ --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
20
+ --pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
21
+ --pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
22
+ --pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
23
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
24
+ --pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
25
+ --pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
26
+ --pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
11
27
  --pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
12
28
  --pf-c-empty-state__body--Color: var(--pf-global--Color--200);
13
- --pf-c-empty-state__primary--MarginTop: var(--pf-global--spacer--xl);
14
- --pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
15
- --pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
16
- --pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
17
- --pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
18
- --pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
19
- --pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
20
- --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
29
+ --pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
21
30
  --pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
22
- --pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
23
- --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
24
- --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
25
- --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
26
- --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
27
- --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
28
31
  --pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
29
- --pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
30
- --pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
31
- --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
32
- --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
33
32
  --pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
34
33
  --pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
35
- --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
36
- --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
37
- --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
34
+ --pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
35
+ --pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
36
+ --pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
37
+ --pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
38
+ --pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
38
39
  display: flex;
39
40
  align-items: center;
40
41
  justify-content: center;
@@ -46,17 +47,12 @@
46
47
  --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
47
48
  --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
48
49
  --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
50
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
49
51
  --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
50
52
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
51
53
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
52
- --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
53
- --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
54
- }
55
- .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
56
- font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
57
- }
58
- .pf-c-empty-state.pf-m-xs .pf-c-button {
59
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
54
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
55
+ --pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
60
56
  }
61
57
  .pf-c-empty-state.pf-m-sm {
62
58
  --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
@@ -66,12 +62,11 @@
66
62
  }
67
63
  .pf-c-empty-state.pf-m-xl {
68
64
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
65
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
69
66
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
70
67
  --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
71
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
72
- }
73
- .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
74
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
68
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
69
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
75
70
  }
76
71
  .pf-c-empty-state.pf-m-full-height {
77
72
  height: 100%;
@@ -80,39 +75,38 @@
80
75
  .pf-c-empty-state__content {
81
76
  max-width: var(--pf-c-empty-state__content--MaxWidth);
82
77
  }
83
- .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
84
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
85
- }
86
78
 
87
79
  .pf-c-empty-state__icon {
88
80
  margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
89
81
  font-size: var(--pf-c-empty-state__icon--FontSize);
82
+ line-height: 1;
90
83
  color: var(--pf-c-empty-state__icon--Color);
91
84
  }
92
85
 
86
+ .pf-c-empty-state__title-text {
87
+ font-family: var(--pf-c-empty-state__title-text--FontFamily);
88
+ font-size: var(--pf-c-empty-state__title-text--FontSize);
89
+ font-weight: var(--pf-c-empty-state__title-text--FontWeight);
90
+ line-height: var(--pf-c-empty-state__title-text--LineHeight);
91
+ }
92
+
93
93
  .pf-c-empty-state__body {
94
94
  margin-top: var(--pf-c-empty-state__body--MarginTop);
95
+ font-size: var(--pf-c-empty-state--body--FontSize);
95
96
  color: var(--pf-c-empty-state__body--Color);
96
97
  }
97
98
 
98
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
99
- .pf-c-empty-state__primary {
100
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
101
- }
102
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
103
- .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
104
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
99
+ .pf-c-empty-state__footer {
100
+ display: flex;
101
+ flex-direction: column;
102
+ align-items: center;
103
+ row-gap: var(--pf-c-empty-state__footer--RowGap);
104
+ margin-top: var(--pf-c-empty-state__footer--MarginTop);
105
105
  }
106
106
 
107
- .pf-c-empty-state__secondary {
107
+ .pf-c-empty-state__actions {
108
108
  display: flex;
109
109
  flex-wrap: wrap;
110
110
  justify-content: center;
111
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
112
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
113
- }
114
- .pf-c-empty-state__secondary > * {
115
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
116
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
117
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
111
+ gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
118
112
  }
@@ -1,20 +1,18 @@
1
1
  import './empty-state.css';
2
2
  declare const _default: {
3
- "button": "pf-c-button",
4
3
  "emptyState": "pf-c-empty-state",
4
+ "emptyStateActions": "pf-c-empty-state__actions",
5
5
  "emptyStateBody": "pf-c-empty-state__body",
6
6
  "emptyStateContent": "pf-c-empty-state__content",
7
+ "emptyStateFooter": "pf-c-empty-state__footer",
7
8
  "emptyStateIcon": "pf-c-empty-state__icon",
8
- "emptyStatePrimary": "pf-c-empty-state__primary",
9
- "emptyStateSecondary": "pf-c-empty-state__secondary",
9
+ "emptyStateTitleText": "pf-c-empty-state__title-text",
10
10
  "modifiers": {
11
11
  "xs": "pf-m-xs",
12
12
  "sm": "pf-m-sm",
13
13
  "lg": "pf-m-lg",
14
14
  "xl": "pf-m-xl",
15
- "fullHeight": "pf-m-full-height",
16
- "primary": "pf-m-primary"
17
- },
18
- "title": "pf-c-title"
15
+ "fullHeight": "pf-m-full-height"
16
+ }
19
17
  };
20
18
  export default _default;
@@ -2,20 +2,18 @@
2
2
  exports.__esModule = true;
3
3
  require('./empty-state.css');
4
4
  exports.default = {
5
- "button": "pf-c-button",
6
5
  "emptyState": "pf-c-empty-state",
6
+ "emptyStateActions": "pf-c-empty-state__actions",
7
7
  "emptyStateBody": "pf-c-empty-state__body",
8
8
  "emptyStateContent": "pf-c-empty-state__content",
9
+ "emptyStateFooter": "pf-c-empty-state__footer",
9
10
  "emptyStateIcon": "pf-c-empty-state__icon",
10
- "emptyStatePrimary": "pf-c-empty-state__primary",
11
- "emptyStateSecondary": "pf-c-empty-state__secondary",
11
+ "emptyStateTitleText": "pf-c-empty-state__title-text",
12
12
  "modifiers": {
13
13
  "xs": "pf-m-xs",
14
14
  "sm": "pf-m-sm",
15
15
  "lg": "pf-m-lg",
16
16
  "xl": "pf-m-xl",
17
- "fullHeight": "pf-m-full-height",
18
- "primary": "pf-m-primary"
19
- },
20
- "title": "pf-c-title"
17
+ "fullHeight": "pf-m-full-height"
18
+ }
21
19
  };
@@ -1,19 +1,17 @@
1
1
  import './empty-state.css';
2
2
  export default {
3
- "button": "pf-c-button",
4
3
  "emptyState": "pf-c-empty-state",
4
+ "emptyStateActions": "pf-c-empty-state__actions",
5
5
  "emptyStateBody": "pf-c-empty-state__body",
6
6
  "emptyStateContent": "pf-c-empty-state__content",
7
+ "emptyStateFooter": "pf-c-empty-state__footer",
7
8
  "emptyStateIcon": "pf-c-empty-state__icon",
8
- "emptyStatePrimary": "pf-c-empty-state__primary",
9
- "emptyStateSecondary": "pf-c-empty-state__secondary",
9
+ "emptyStateTitleText": "pf-c-empty-state__title-text",
10
10
  "modifiers": {
11
11
  "xs": "pf-m-xs",
12
12
  "sm": "pf-m-sm",
13
13
  "lg": "pf-m-lg",
14
14
  "xl": "pf-m-xl",
15
- "fullHeight": "pf-m-full-height",
16
- "primary": "pf-m-primary"
17
- },
18
- "title": "pf-c-title"
15
+ "fullHeight": "pf-m-full-height"
16
+ }
19
17
  };
@@ -1,6 +1,16 @@
1
1
  .pf-c-label-group {
2
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
2
+ --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
3
+ --pf-c-label-group--ColumnGap: 0;
4
+ --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
5
+ --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
6
+ --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
7
+ --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
8
+ --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
9
+ --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
10
+ --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
11
+ --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
12
+ --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
13
+ --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
4
14
  --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
5
15
  --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
6
16
  --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
@@ -10,20 +20,14 @@
10
20
  --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
11
21
  --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
12
22
  --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
13
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
14
- --pf-c-label-group__label--MarginBottom: 0;
15
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
16
23
  --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
17
24
  --pf-c-label-group__label--MaxWidth: 18ch;
18
25
  --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
19
26
  --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
20
27
  --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
21
28
  --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
22
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
23
29
  --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
24
30
  --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
25
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
26
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
27
31
  --pf-c-label-group__textarea--MinWidth: 12.5rem;
28
32
  --pf-c-label-group__textarea--PaddingTop: 0.125rem;
29
33
  --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
@@ -31,6 +35,8 @@
31
35
  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
32
36
  display: inline-flex;
33
37
  align-items: center;
38
+ row-gap: var(--pf-c-label-group--RowGap);
39
+ column-gap: var(--pf-c-label-group--ColumnGap);
34
40
  }
35
41
  .pf-c-label-group.pf-m-category {
36
42
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
@@ -42,11 +48,12 @@
42
48
  border-radius: var(--pf-c-label-group--m-category--BorderRadius);
43
49
  }
44
50
  .pf-c-label-group.pf-m-vertical {
45
- --pf-c-label-group__list--MarginRight: 0;
46
- --pf-c-label-group__list--MarginBottom: 0;
47
- --pf-c-label-group__list-item--MarginRight: 0;
48
- --pf-c-label-group__label--MarginRight: 0;
49
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
51
+ --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
52
+ --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
53
+ --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
54
+ --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
55
+ --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
56
+ --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
50
57
  --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
51
58
  --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
52
59
  --pf-c-label-group__close--MarginBottom: 0;
@@ -63,9 +70,6 @@
63
70
  .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
64
71
  flex-direction: column;
65
72
  }
66
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
67
- --pf-c-label-group__list-item--MarginBottom: 0;
68
- }
69
73
  .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
70
74
  --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
71
75
  --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -87,19 +91,19 @@
87
91
  flex: 1;
88
92
  flex-wrap: wrap;
89
93
  align-items: baseline;
94
+ row-gap: var(--pf-c-label-group__main--RowGap);
95
+ column-gap: var(--pf-c-label-group__main--ColumnGap);
90
96
  }
91
97
 
92
98
  .pf-c-label-group__list {
93
99
  display: inline-flex;
94
100
  flex-wrap: wrap;
95
- margin-right: var(--pf-c-label-group__list--MarginRight);
96
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
101
+ row-gap: var(--pf-c-label-group__list--RowGap);
102
+ column-gap: var(--pf-c-label-group__list--ColumnGap);
97
103
  }
98
104
 
99
105
  .pf-c-label-group__list-item {
100
106
  display: inline-flex;
101
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
102
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
103
107
  }
104
108
 
105
109
  .pf-c-label-group__label {
@@ -107,12 +111,12 @@
107
111
  text-overflow: ellipsis;
108
112
  white-space: nowrap;
109
113
  max-width: var(--pf-c-label-group__label--MaxWidth);
110
- margin-right: var(--pf-c-label-group__label--MarginRight);
111
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
112
114
  font-size: var(--pf-c-label-group__label--FontSize);
113
115
  }
114
116
 
115
117
  .pf-c-label-group__close {
118
+ display: flex;
119
+ align-self: start;
116
120
  margin-top: var(--pf-c-label-group__close--MarginTop);
117
121
  margin-right: var(--pf-c-label-group__close--MarginRight);
118
122
  margin-bottom: var(--pf-c-label-group__close--MarginBottom);
@@ -172,14 +172,9 @@
172
172
  }
173
173
 
174
174
  :where(.pf-theme-dark) .pf-c-popover {
175
- --pf-c-popover--BoxShadow: none;
176
- --pf-c-popover__arrow--BoxShadow: none;
177
- --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
175
+ --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
176
+ --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
178
177
  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
179
178
  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
180
179
  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
181
- }
182
- :where(.pf-theme-dark) .pf-c-popover,
183
- :where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
184
- border: 4px solid var(--pf-global--BorderColor--400);
185
180
  }
@@ -115,7 +115,6 @@
115
115
  --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
116
116
  --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
117
117
  --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
118
- --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
119
118
  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
120
119
  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
121
120
  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -589,9 +588,6 @@
589
588
  --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
590
589
  outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
591
590
  }
592
- .pf-c-tabs__item-action.pf-m-help {
593
- --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
594
- }
595
591
  .pf-c-tabs__item-action:last-child {
596
592
  --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
597
593
  }
@@ -29,7 +29,6 @@ declare const _default: {
29
29
  "active": "pf-m-active",
30
30
  "disabled": "pf-m-disabled",
31
31
  "ariaDisabled": "pf-m-aria-disabled",
32
- "help": "pf-m-help",
33
32
  "insetNone": "pf-m-inset-none",
34
33
  "insetSm": "pf-m-inset-sm",
35
34
  "insetMd": "pf-m-inset-md",
@@ -31,7 +31,6 @@ exports.default = {
31
31
  "active": "pf-m-active",
32
32
  "disabled": "pf-m-disabled",
33
33
  "ariaDisabled": "pf-m-aria-disabled",
34
- "help": "pf-m-help",
35
34
  "insetNone": "pf-m-inset-none",
36
35
  "insetSm": "pf-m-inset-sm",
37
36
  "insetMd": "pf-m-inset-md",
@@ -29,7 +29,6 @@ export default {
29
29
  "active": "pf-m-active",
30
30
  "disabled": "pf-m-disabled",
31
31
  "ariaDisabled": "pf-m-aria-disabled",
32
- "help": "pf-m-help",
33
32
  "insetNone": "pf-m-inset-none",
34
33
  "insetSm": "pf-m-inset-sm",
35
34
  "insetMd": "pf-m-inset-md",
@@ -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;
@@ -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;
@@ -20,6 +20,10 @@ declare const _default: {
20
20
  "fullHeight": "pf-m-full-height",
21
21
  "static": "pf-m-static",
22
22
  "vertical": "pf-m-vertical",
23
+ "alignItemsCenter": "pf-m-align-items-center",
24
+ "alignItemsBaseline": "pf-m-align-items-baseline",
25
+ "alignSelfCenter": "pf-m-align-self-center",
26
+ "alignSelfBaseline": "pf-m-align-self-baseline",
23
27
  "buttonGroup": "pf-m-button-group",
24
28
  "iconButtonGroup": "pf-m-icon-button-group",
25
29
  "filterGroup": "pf-m-filter-group",
@@ -22,6 +22,10 @@ exports.default = {
22
22
  "fullHeight": "pf-m-full-height",
23
23
  "static": "pf-m-static",
24
24
  "vertical": "pf-m-vertical",
25
+ "alignItemsCenter": "pf-m-align-items-center",
26
+ "alignItemsBaseline": "pf-m-align-items-baseline",
27
+ "alignSelfCenter": "pf-m-align-self-center",
28
+ "alignSelfBaseline": "pf-m-align-self-baseline",
25
29
  "buttonGroup": "pf-m-button-group",
26
30
  "iconButtonGroup": "pf-m-icon-button-group",
27
31
  "filterGroup": "pf-m-filter-group",
@@ -20,6 +20,10 @@ export default {
20
20
  "fullHeight": "pf-m-full-height",
21
21
  "static": "pf-m-static",
22
22
  "vertical": "pf-m-vertical",
23
+ "alignItemsCenter": "pf-m-align-items-center",
24
+ "alignItemsBaseline": "pf-m-align-items-baseline",
25
+ "alignSelfCenter": "pf-m-align-self-center",
26
+ "alignSelfBaseline": "pf-m-align-self-baseline",
23
27
  "buttonGroup": "pf-m-button-group",
24
28
  "iconButtonGroup": "pf-m-icon-button-group",
25
29
  "filterGroup": "pf-m-filter-group",
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "5.0.0-alpha.1",
3
+ "version": "5.0.0-alpha.2",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "5.0.0-alpha.3",
22
+ "@patternfly/patternfly": "5.0.0-alpha.12",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.7.4"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "5204f0b671c8030ea8b9c1b80f653a4a2985d883"
32
+ "gitHead": "dd91c73c726d471205cc7ce2cf463fa8c1a6e593"
33
33
  }