@patternfly/patternfly 6.0.0-alpha.33 → 6.0.0-alpha.34

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 (19) hide show
  1. package/base/patternfly-variables.css +2 -0
  2. package/base/tokens/_tokens-default.scss +2 -0
  3. package/components/EmptyState/empty-state.css +57 -34
  4. package/components/EmptyState/empty-state.scss +63 -34
  5. package/components/ExpandableSection/expandable-section.css +10 -17
  6. package/components/ExpandableSection/expandable-section.scss +13 -20
  7. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  8. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  9. package/docs/components/ExpandableSection/examples/ExpandableSection.md +2 -4
  10. package/package.json +1 -1
  11. package/patternfly-base-no-globals-theme-dark-unversioned.css +2 -0
  12. package/patternfly-base-no-globals.css +2 -0
  13. package/patternfly-base-theme-dark-unversioned.css +2 -0
  14. package/patternfly-base.css +2 -0
  15. package/patternfly-no-globals.css +69 -51
  16. package/patternfly-theme-dark-unversioned.css +69 -51
  17. package/patternfly.css +69 -51
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -414,6 +414,7 @@ html .ws-preview {
414
414
  --pf-t--global--border--width--300: 3px;
415
415
  --pf-t--global--border--width--200: 2px;
416
416
  --pf-t--global--border--width--100: 1px;
417
+ --pf-t--global--icon--size--500: 96px;
417
418
  --pf-t--global--icon--size--400: 56px;
418
419
  --pf-t--global--icon--size--300: 22px;
419
420
  --pf-t--global--icon--size--250: 16px;
@@ -530,6 +531,7 @@ html .ws-preview {
530
531
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
531
532
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
532
533
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
534
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
533
535
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
534
536
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
535
537
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/base/tokens/_tokens-default.scss CHANGED
@@ -29,6 +29,7 @@
29
29
  --pf-t--global--border--width--300: 3px;
30
30
  --pf-t--global--border--width--200: 2px;
31
31
  --pf-t--global--border--width--100: 1px;
32
+ --pf-t--global--icon--size--500: 96px;
32
33
  --pf-t--global--icon--size--400: 56px;
33
34
  --pf-t--global--icon--size--300: 22px;
34
35
  --pf-t--global--icon--size--250: 16px;
@@ -145,6 +146,7 @@
145
146
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
146
147
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
147
148
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
149
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
148
150
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
149
151
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
150
152
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/components/EmptyState/empty-state.css CHANGED
@@ -1,41 +1,49 @@
1
- .pf-v5-c-empty-state {
2
- --pf-v5-c-empty-state--PaddingTop: var(--pf-v5-global--spacer--xl);
3
- --pf-v5-c-empty-state--PaddingRight: var(--pf-v5-global--spacer--xl);
4
- --pf-v5-c-empty-state--PaddingBottom: var(--pf-v5-global--spacer--xl);
5
- --pf-v5-c-empty-state--PaddingLeft: var(--pf-v5-global--spacer--xl);
6
- --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-v5-global--spacer--md);
7
- --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-v5-global--spacer--md);
8
- --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-v5-global--spacer--md);
9
- --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-v5-global--spacer--md);
1
+ :root {
2
+ --pf-v5-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
3
+ --pf-v5-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
4
+ --pf-v5-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
5
+ --pf-v5-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
6
+ --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
8
+ --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
9
+ --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
10
10
  --pf-v5-c-empty-state__content--MaxWidth: none;
11
11
  --pf-v5-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
12
12
  --pf-v5-c-empty-state--m-sm__content--MaxWidth: 25rem;
13
13
  --pf-v5-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14
- --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-v5-global--spacer--lg);
15
- --pf-v5-c-empty-state__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
16
- --pf-v5-c-empty-state__icon--Color: var(--pf-v5-global--icon--Color--light);
17
- --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
18
- --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
19
- --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
20
- --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
21
- --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
22
- --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
23
- --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
24
- --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-v5-global--FontSize--md);
25
- --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-v5-global--FontSize--4xl);
26
- --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
27
- --pf-v5-c-empty-state__body--MarginTop: var(--pf-v5-global--spacer--md);
28
- --pf-v5-c-empty-state__body--Color: var(--pf-v5-global--Color--200);
29
- --pf-v5-c-empty-state--body--FontSize: var(--pf-v5-global--FontSize--md);
30
- --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-v5-global--FontSize--sm);
31
- --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-v5-global--spacer--md);
32
- --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-v5-global--FontSize--xl);
33
- --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-v5-global--spacer--lg);
34
- --pf-v5-c-empty-state__footer--RowGap: var(--pf-v5-global--spacer--sm);
35
- --pf-v5-c-empty-state__footer--MarginTop: var(--pf-v5-global--spacer--xl);
36
- --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-v5-global--spacer--md);
37
- --pf-v5-c-empty-state__actions--RowGap: var(--pf-v5-global--spacer--xs);
38
- --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-v5-global--spacer--xs);
14
+ --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
15
+ --pf-v5-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
16
+ --pf-v5-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
17
+ --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
18
+ --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
19
+ --pf-v5-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
20
+ --pf-v5-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
21
+ --pf-v5-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
22
+ --pf-v5-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
23
+ --pf-v5-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
24
+ --pf-v5-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
25
+ --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
26
+ --pf-v5-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
27
+ --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
28
+ --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
29
+ --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
30
+ --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
31
+ --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
32
+ --pf-v5-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
33
+ --pf-v5-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
34
+ --pf-v5-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
35
+ --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
36
+ --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
37
+ --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
38
+ --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
39
+ --pf-v5-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
40
+ --pf-v5-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
41
+ --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
42
+ --pf-v5-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
43
+ --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
44
+ }
45
+
46
+ .pf-v5-c-empty-state {
39
47
  display: flex;
40
48
  align-items: center;
41
49
  justify-content: center;
@@ -74,6 +82,21 @@
74
82
  .pf-v5-c-empty-state.pf-m-full-height {
75
83
  height: 100%;
76
84
  }
85
+ .pf-v5-c-empty-state.pf-m-danger {
86
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-danger__icon--Color);
87
+ }
88
+ .pf-v5-c-empty-state.pf-m-warning {
89
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-warning__icon--Color);
90
+ }
91
+ .pf-v5-c-empty-state.pf-m-success {
92
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-success__icon--Color);
93
+ }
94
+ .pf-v5-c-empty-state.pf-m-info {
95
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-info__icon--Color);
96
+ }
97
+ .pf-v5-c-empty-state.pf-m-custom {
98
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-custom__icon--Color);
99
+ }
77
100
 
78
101
  .pf-v5-c-empty-state__content {
79
102
  max-width: var(--pf-v5-c-empty-state__content--MaxWidth);
package/components/EmptyState/empty-state.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // @debug $empty-state; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$empty-state} {
4
- --#{$empty-state}--PaddingTop: var(--#{$pf-global}--spacer--xl);
5
- --#{$empty-state}--PaddingRight: var(--#{$pf-global}--spacer--xl);
6
- --#{$empty-state}--PaddingBottom: var(--#{$pf-global}--spacer--xl);
7
- --#{$empty-state}--PaddingLeft: var(--#{$pf-global}--spacer--xl);
8
- --#{$empty-state}--m-xs--PaddingTop: var(--#{$pf-global}--spacer--md);
9
- --#{$empty-state}--m-xs--PaddingRight: var(--#{$pf-global}--spacer--md);
10
- --#{$empty-state}--m-xs--PaddingBottom: var(--#{$pf-global}--spacer--md);
11
- --#{$empty-state}--m-xs--PaddingLeft: var(--#{$pf-global}--spacer--md);
3
+ :root {
4
+ --#{$empty-state}--PaddingTop: var(--pf-t--global--spacer--xl);
5
+ --#{$empty-state}--PaddingRight: var(--pf-t--global--spacer--xl);
6
+ --#{$empty-state}--PaddingBottom: var(--pf-t--global--spacer--xl);
7
+ --#{$empty-state}--PaddingLeft: var(--pf-t--global--spacer--xl);
8
+ --#{$empty-state}--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
9
+ --#{$empty-state}--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
10
+ --#{$empty-state}--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
11
+ --#{$empty-state}--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
12
12
 
13
13
  // Content
14
14
  --#{$empty-state}__content--MaxWidth: none;
@@ -17,40 +17,49 @@
17
17
  --#{$empty-state}--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
18
18
 
19
19
  // Icon
20
- --#{$empty-state}__icon--MarginBottom: var(--#{$pf-global}--spacer--lg);
21
- --#{$empty-state}__icon--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
22
- --#{$empty-state}__icon--Color: var(--#{$pf-global}--icon--Color--light);
23
- --#{$empty-state}--m-xs__icon--MarginBottom: var(--#{$pf-global}--spacer--md);
24
- --#{$empty-state}--m-xl__icon--MarginBottom: var(--#{$pf-global}--spacer--xl);
25
- --#{$empty-state}--m-xl__icon--FontSize: #{pf-size-prem(100px)};
20
+ --#{$empty-state}__icon--MarginBottom: var(--pf-t--global--spacer--lg);
21
+ --#{$empty-state}__icon--FontSize: var(--pf-t--global--icon--size--2xl);
22
+ --#{$empty-state}__icon--Color: var(--pf-t--global--icon--color--subtle);
23
+ --#{$empty-state}--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
24
+ --#{$empty-state}--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
25
+ --#{$empty-state}--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
26
+
27
+ // Status variant icon color
28
+ --#{$empty-state}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
29
+ --#{$empty-state}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
30
+ --#{$empty-state}--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
31
+ --#{$empty-state}--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
32
+ --#{$empty-state}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
26
33
 
27
34
  // Title text
28
- --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
29
- --#{$empty-state}__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
30
- --#{$empty-state}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
31
- --#{$empty-state}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
32
- --#{$empty-state}--m-xs__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
33
- --#{$empty-state}--m-xl__title-text--FontSize: var(--#{$pf-global}--FontSize--4xl);
34
- --#{$empty-state}--m-xl__title-text--LineHeight: var(--#{$pf-global}--LineHeight--sm);
35
+ --#{$empty-state}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
36
+ --#{$empty-state}__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
37
+ --#{$empty-state}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
38
+ --#{$empty-state}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
39
+ --#{$empty-state}--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
40
+ --#{$empty-state}--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
41
+ --#{$empty-state}--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
35
42
 
36
43
  // Body
37
- --#{$empty-state}__body--MarginTop: var(--#{$pf-global}--spacer--md);
38
- --#{$empty-state}__body--Color: var(--#{$pf-global}--Color--200);
39
- --#{$empty-state}--body--FontSize: var(--#{$pf-global}--FontSize--md);
40
- --#{$empty-state}--m-xs__body--FontSize: var(--#{$pf-global}--FontSize--sm);
41
- --#{$empty-state}--m-xs__body--MarginTop: var(--#{$pf-global}--spacer--md);
42
- --#{$empty-state}--m-xl__body--FontSize: var(--#{$pf-global}--FontSize--xl);
43
- --#{$empty-state}--m-xl__body--MarginTop: var(--#{$pf-global}--spacer--lg);
44
+ --#{$empty-state}__body--MarginTop: var(--pf-t--global--spacer--md);
45
+ --#{$empty-state}__body--Color: var(--pf-t--global--text--color--subtle);
46
+ --#{$empty-state}--body--FontSize: var(--pf-t--global--font--size--body--lg);
47
+ --#{$empty-state}--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
48
+ --#{$empty-state}--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
49
+ --#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
50
+ --#{$empty-state}--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
44
51
 
45
52
  // Footer
46
- --#{$empty-state}__footer--RowGap: var(--#{$pf-global}--spacer--sm);
47
- --#{$empty-state}__footer--MarginTop: var(--#{$pf-global}--spacer--xl);
48
- --#{$empty-state}--m-xs__footer--MarginTop: var(--#{$pf-global}--spacer--md);
53
+ --#{$empty-state}__footer--RowGap: var(--pf-t--global--spacer--sm);
54
+ --#{$empty-state}__footer--MarginTop: var(--pf-t--global--spacer--xl);
55
+ --#{$empty-state}--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
49
56
 
50
57
  // Actions
51
- --#{$empty-state}__actions--RowGap: var(--#{$pf-global}--spacer--xs);
52
- --#{$empty-state}__actions--ColumnGap: var(--#{$pf-global}--spacer--xs);
58
+ --#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--sm);
59
+ --#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--md);
60
+ }
53
61
 
62
+ .#{$empty-state} {
54
63
  display: flex;
55
64
  align-items: center;
56
65
  justify-content: center;
@@ -93,6 +102,26 @@
93
102
  &.pf-m-full-height {
94
103
  height: 100%;
95
104
  }
105
+
106
+ &.pf-m-danger {
107
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-danger__icon--Color);
108
+ }
109
+
110
+ &.pf-m-warning {
111
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-warning__icon--Color);
112
+ }
113
+
114
+ &.pf-m-success {
115
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-success__icon--Color);
116
+ }
117
+
118
+ &.pf-m-info {
119
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-info__icon--Color);
120
+ }
121
+
122
+ &.pf-m-custom {
123
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-custom__icon--Color);
124
+ }
96
125
  }
97
126
 
98
127
  .#{$empty-state}__content {
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -3,11 +3,6 @@
3
3
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
4
4
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
5
5
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
6
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
7
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
8
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
9
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
10
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
11
6
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
12
7
  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
13
8
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -17,6 +12,9 @@
17
12
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
18
13
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
19
14
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
16
+ --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
17
+ --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
20
18
  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
21
19
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
22
20
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -51,7 +49,7 @@
51
49
  }
52
50
 
53
51
  .pf-v5-c-expandable-section.pf-m-expanded {
54
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
52
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
55
53
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
56
54
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
57
55
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
@@ -106,23 +104,14 @@
106
104
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
107
105
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
108
106
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
109
- color: var(--pf-v5-c-expandable-section__toggle--Color);
110
107
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
111
108
  border: none;
112
109
  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
113
110
  }
114
- .pf-v5-c-expandable-section__toggle:hover {
115
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
111
+ .pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
112
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
116
113
  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
117
114
  }
118
- .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
119
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
120
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
121
- }
122
- .pf-v5-c-expandable-section__toggle:focus {
123
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
124
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
125
- }
126
115
 
127
116
  .pf-v5-c-expandable-section__toggle-icon {
128
117
  min-width: var(--pf-v5-c-expandable-section__toggle-icon--MinWidth);
@@ -138,6 +127,10 @@
138
127
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
139
128
  }
140
129
 
130
+ .pf-v5-c-expandable-section__toggle-text {
131
+ color: var(--pf-v5-c-expandable-section__toggle-text--Color);
132
+ }
133
+
141
134
  .pf-v5-c-expandable-section__content {
142
135
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
143
136
  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -6,11 +6,6 @@
6
6
  --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
7
7
  --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
8
8
  --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
9
- --#{$expandable-section}__toggle--Color: var(--pf-t--global--color--brand--default);
10
- --#{$expandable-section}__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
11
- --#{$expandable-section}__toggle--active--Color: var(--pf-t--global--color--brand--hover);
12
- --#{$expandable-section}__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
13
- --#{$expandable-section}__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
14
9
  --#{$expandable-section}__toggle--BackgroundColor: transparent;
15
10
  --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
16
11
 
@@ -23,6 +18,12 @@
23
18
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
24
19
  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
25
20
 
21
+ // Toggle text
22
+ --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
23
+ --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
24
+ --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
25
+
26
+
26
27
  // Content
27
28
  --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
28
29
  --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
@@ -68,7 +69,7 @@
68
69
 
69
70
  .#{$expandable-section} {
70
71
  &.pf-m-expanded {
71
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
72
+ --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}--m-expanded__toggle-text--Color);
72
73
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
73
74
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
74
75
  --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
@@ -132,26 +133,14 @@
132
133
  padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
133
134
  padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
134
135
  padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
135
- color: var(--#{$expandable-section}__toggle--Color);
136
136
  background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
137
137
  border: none;
138
138
  border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
139
139
 
140
- &:hover {
141
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
140
+ &:is(:hover, :focus) {
141
+ --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}__toggle-text--hover--Color);
142
142
  --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
143
143
  }
144
-
145
- &:active,
146
- &.pf-m-active {
147
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
148
- --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--active--BackgroundColor, initial);
149
- }
150
-
151
- &:focus {
152
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
153
- --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--focus--BackgroundColor, initial);
154
- }
155
144
  }
156
145
 
157
146
  .#{$expandable-section}__toggle-icon {
@@ -167,6 +156,10 @@
167
156
  }
168
157
  }
169
158
 
159
+ .#{$expandable-section}__toggle-text {
160
+ color: var(--#{$expandable-section}__toggle-text--Color);
161
+ }
162
+
170
163
  .#{$expandable-section}__content {
171
164
  max-width: var(--#{$expandable-section}__content--MaxWidth);
172
165
  padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -75,7 +75,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
75
75
  kind: HelmChartRepository
76
76
  metadata:
77
77
  name: azure-sample-repo<div
78
- class="pf-v5-c-expandable-section pf-m-detached"
78
+ class="pf-v5-c-expandable-section"
79
79
  ><div
80
80
  class="pf-v5-c-expandable-section__content"
81
81
  hidden
@@ -87,7 +87,7 @@ name: azure-sample-repo<div
87
87
  </div>
88
88
  </code>
89
89
  </pre>
90
- <div class="pf-v5-c-expandable-section pf-m-detached">
90
+ <div class="pf-v5-c-expandable-section">
91
91
  <button
92
92
  type="button"
93
93
  class="pf-v5-c-expandable-section__toggle"
@@ -136,7 +136,7 @@ name: azure-sample-repo<div
136
136
  kind: HelmChartRepository
137
137
  metadata:
138
138
  name: azure-sample-repo<div
139
- class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
139
+ class="pf-v5-c-expandable-section pf-m-expanded"
140
140
  ><div
141
141
  class="pf-v5-c-expandable-section__content"
142
142
  id="code-block-expandable-expanded-content"
@@ -147,7 +147,7 @@ name: azure-sample-repo<div
147
147
  </div>
148
148
  </code>
149
149
  </pre>
150
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
150
+ <div class="pf-v5-c-expandable-section pf-m-expanded">
151
151
  <button
152
152
  type="button"
153
153
  class="pf-v5-c-expandable-section__toggle"
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -46,6 +46,9 @@ cssPrefix: pf-v5-c-empty-state
46
46
  <div class="pf-v5-c-empty-state pf-m-xs">
47
47
  <div class="pf-v5-c-empty-state__content">
48
48
  <div class="pf-v5-c-empty-state__header">
49
+ <div class="pf-v5-c-empty-state__icon">
50
+ <i class="fas fa-cubes" aria-hidden="true"></i>
51
+ </div>
49
52
  <div class="pf-v5-c-empty-state__title">
50
53
  <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
51
54
  </div>
@@ -53,7 +56,7 @@ cssPrefix: pf-v5-c-empty-state
53
56
 
54
57
  <div
55
58
  class="pf-v5-c-empty-state__body"
56
- >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
59
+ >This represents an the empty state pattern in PatternFly. The icon is optional.</div>
57
60
 
58
61
  <div class="pf-v5-c-empty-state__footer">
59
62
  <div class="pf-v5-c-empty-state__actions">
@@ -190,6 +193,42 @@ cssPrefix: pf-v5-c-empty-state
190
193
 
191
194
  ```
192
195
 
196
+ ### With status
197
+
198
+ ```html
199
+ <div class="pf-v5-c-empty-state pf-m-success">
200
+ <div class="pf-v5-c-empty-state__content">
201
+ <div class="pf-v5-c-empty-state__header">
202
+ <div class="pf-v5-c-empty-state__icon">
203
+ <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
204
+ </div>
205
+ <div class="pf-v5-c-empty-state__title">
206
+ <h1 class="pf-v5-c-empty-state__title-text">You're all set</h1>
207
+ </div>
208
+ </div>
209
+
210
+ <div
211
+ class="pf-v5-c-empty-state__body"
212
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
213
+
214
+ <div class="pf-v5-c-empty-state__footer">
215
+ <div class="pf-v5-c-empty-state__actions">
216
+ <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
217
+ </div>
218
+ <div class="pf-v5-c-empty-state__actions">
219
+ <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
220
+ <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
221
+ <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
222
+ <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
223
+ <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
224
+ <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ ```
231
+
193
232
  ## Documentation
194
233
 
195
234
  ### Accessibility
@@ -216,3 +255,8 @@ cssPrefix: pf-v5-c-empty-state
216
255
  | `.pf-m-lg` | `.pf-v5-c-empty-state` | Modifies the empty state for a large max-width. |
217
256
  | `.pf-m-xl` | `.pf-v5-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
218
257
  | `.pf-m-full-height` | `.pf-v5-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-v5-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-v5-c-empty-state` have an implicit or explicit `height` defined. |
258
+ | `.pf-m-danger` | `.pf-v5-c-empty-state` | Modifies the empty state for danger status. |
259
+ | `.pf-m-warning` | `.pf-v5-c-empty-state` | Modifies the empty state for warning status. |
260
+ | `.pf-m-success` | `.pf-v5-c-empty-state` | Modifies the empty state for success status. |
261
+ | `.pf-m-info` | `.pf-v5-c-empty-state` | Modifies the empty state for info status. |
262
+ | `.pf-m-custom` | `.pf-v5-c-empty-state` | Modifies the empty state for custom status. |
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -141,7 +141,7 @@ cssPrefix: pf-v5-c-expandable-section
141
141
  ```html
142
142
  <div class="pf-v5-l-stack pf-m-gutter">
143
143
  <div class="pf-v5-l-stack__item">
144
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
144
+ <div class="pf-v5-c-expandable-section pf-m-expanded">
145
145
  <div
146
146
  class="pf-v5-c-expandable-section__content"
147
147
  id="detached-toggle-content"
@@ -150,7 +150,7 @@ cssPrefix: pf-v5-c-expandable-section
150
150
  </div>
151
151
 
152
152
  <div class="pf-v5-l-stack__item">
153
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
153
+ <div class="pf-v5-c-expandable-section pf-m-expanded">
154
154
  <button
155
155
  type="button"
156
156
  class="pf-v5-c-expandable-section__toggle"
@@ -228,9 +228,7 @@ cssPrefix: pf-v5-c-expandable-section
228
228
  | `.pf-v5-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
229
229
  | `.pf-m-expanded` | `.pf-v5-c-expandable-section` | Modifies the component for the expanded state. |
230
230
  | `.pf-m-display-lg` | `.pf-v5-c-expandable-section` | Modifies the styling of the component to have large display styling. |
231
- | `.pf-m-detached` | `.pf-v5-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
232
231
  | `.pf-m-indented` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
233
232
  | `.pf-m-truncate` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
234
- | `.pf-m-active` | `.pf-v5-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
235
233
  | `.pf-m-expand-top` | `.pf-v5-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
236
234
  | `--pf-v5-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v5-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.33",
4
+ "version": "6.0.0-alpha.34",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/patternfly-base-no-globals.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/patternfly-base.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);