@patternfly/patternfly 5.0.0-alpha.6 → 5.0.0-alpha.7

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 (14) hide show
  1. package/components/ChipGroup/chip-group.css +29 -17
  2. package/components/ChipGroup/chip-group.scss +39 -22
  3. package/components/EmptyState/empty-state.css +46 -52
  4. package/components/EmptyState/empty-state.scss +58 -57
  5. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  6. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  7. package/docs/components/Wizard/examples/Wizard.md +4 -7
  8. package/docs/demos/CardView/examples/CardView.md +1 -3
  9. package/docs/demos/Table/examples/Table.md +7 -10
  10. package/package.json +1 -1
  11. package/patternfly-no-reset.css +75 -69
  12. package/patternfly.css +75 -69
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/components/ChipGroup/chip-group.css CHANGED
@@ -10,28 +10,40 @@
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: var(--pf-global--spacer--sm);
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);
33
+ --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
28
34
  max-width: 100%;
35
+ padding-top: var(--pf-c-chip-group--PaddingTop);
36
+ padding-right: var(--pf-c-chip-group--PaddingRight);
37
+ padding-bottom: var(--pf-c-chip-group--PaddingBottom);
38
+ padding-left: var(--pf-c-chip-group--PaddingLeft);
39
+ row-gap: var(--pf-c-chip-group--RowGap);
40
+ column-gap: var(--pf-c-chip-group--ColumnGap);
29
41
  }
30
42
  .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);
43
+ --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
44
+ --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
45
+ --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
46
+ --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
35
47
  background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
36
48
  border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
37
49
  }
@@ -42,11 +54,8 @@
42
54
  flex-wrap: wrap;
43
55
  align-items: baseline;
44
56
  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);
57
+ row-gap: var(--pf-c-chip-group__main--RowGap);
58
+ column-gap: var(--pf-c-chip-group__main--ColumnGap);
50
59
  }
51
60
 
52
61
  .pf-c-chip-group,
@@ -57,11 +66,14 @@
57
66
  min-width: 0;
58
67
  }
59
68
 
69
+ .pf-c-chip-group__list {
70
+ row-gap: var(--pf-c-chip-group__list--RowGap);
71
+ column-gap: var(--pf-c-chip-group__list--ColumnGap);
72
+ }
73
+
60
74
  .pf-c-chip-group__list-item {
61
75
  display: inline-flex;
62
76
  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
77
  }
66
78
 
67
79
  .pf-c-chip-group__label {
@@ -69,7 +81,6 @@
69
81
  text-overflow: ellipsis;
70
82
  white-space: nowrap;
71
83
  max-width: var(--pf-c-chip-group__label--MaxWidth);
72
- margin-right: var(--pf-c-chip-group__label--MarginRight);
73
84
  font-size: var(--pf-c-chip-group__label--FontSize);
74
85
  }
75
86
 
@@ -78,4 +89,5 @@
78
89
  align-self: flex-start;
79
90
  margin-top: var(--pf-c-chip-group__close--MarginTop);
80
91
  margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
92
+ margin-left: var(--pf-c-chip-group__close--MarginLeft);
81
93
  }
package/components/ChipGroup/chip-group.scss CHANGED
@@ -1,11 +1,24 @@
1
1
  .pf-c-chip-group {
2
2
  @include pf-t-light; // force the container follow the light theme
3
3
 
4
- // Chip group list
5
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
6
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
4
+ // Chip group - spaces main and close
5
+ // column-gap spacer supports legacy chip group
6
+ --pf-c-chip-group--PaddingTop: 0;
7
+ --pf-c-chip-group--PaddingRight: 0;
8
+ --pf-c-chip-group--PaddingBottom: 0;
9
+ --pf-c-chip-group--PaddingLeft: 0;
10
+ --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
11
+ --pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
7
12
 
8
- // Category
13
+ // Chip group main - spaces the category label and list
14
+ --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
15
+ --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
16
+
17
+ // Chip group list - spaces the chips
18
+ --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
19
+ --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
20
+
21
+ // Category modifier
9
22
  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10
23
  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
11
24
  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
@@ -14,25 +27,29 @@
14
27
  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
15
28
 
16
29
  // Label in group
17
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
18
30
  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
19
31
  --pf-c-chip-group__label--MaxWidth: 18ch;
20
32
 
21
- // Chip group close
33
+ // Chip group close - negative margin stretches height for click area
34
+ // margin-left supports legacy chip group
22
35
  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
23
36
  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
24
-
25
- // Chip
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);
37
+ --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
28
38
 
29
39
  max-width: 100%;
40
+ padding-top: var(--pf-c-chip-group--PaddingTop);
41
+ padding-right: var(--pf-c-chip-group--PaddingRight);
42
+ padding-bottom: var(--pf-c-chip-group--PaddingBottom);
43
+ padding-left: var(--pf-c-chip-group--PaddingLeft);
44
+ row-gap: var(--pf-c-chip-group--RowGap);
45
+ column-gap: var(--pf-c-chip-group--ColumnGap);
30
46
 
31
47
  &.pf-m-category {
32
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
33
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
34
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
35
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
48
+ --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
49
+ --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
50
+ --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
51
+ --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
52
+
36
53
  background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
37
54
  border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
38
55
  }
@@ -44,11 +61,8 @@
44
61
  flex-wrap: wrap;
45
62
  align-items: baseline;
46
63
  min-width: 0;
47
- }
48
-
49
- .pf-c-chip-group__list {
50
- margin-right: var(--pf-c-chip-group__list--MarginRight);
51
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
64
+ row-gap: var(--pf-c-chip-group__main--RowGap);
65
+ column-gap: var(--pf-c-chip-group__main--ColumnGap);
52
66
  }
53
67
 
54
68
  .pf-c-chip-group,
@@ -59,18 +73,20 @@
59
73
  min-width: 0;
60
74
  }
61
75
 
76
+ .pf-c-chip-group__list {
77
+ row-gap: var(--pf-c-chip-group__list--RowGap);
78
+ column-gap: var(--pf-c-chip-group__list--ColumnGap);
79
+ }
80
+
62
81
  .pf-c-chip-group__list-item {
63
82
  display: inline-flex;
64
83
  min-width: 0;
65
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
66
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
67
84
  }
68
85
 
69
86
  .pf-c-chip-group__label {
70
87
  @include pf-text-overflow;
71
88
 
72
89
  max-width: var(--pf-c-chip-group__label--MaxWidth);
73
- margin-right: var(--pf-c-chip-group__label--MarginRight);
74
90
  font-size: var(--pf-c-chip-group__label--FontSize);
75
91
  }
76
92
 
@@ -79,4 +95,5 @@
79
95
  align-self: flex-start;
80
96
  margin-top: var(--pf-c-chip-group__close--MarginTop);
81
97
  margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
98
+ margin-left: var(--pf-c-chip-group__close--MarginLeft);
82
99
  }
package/components/EmptyState/empty-state.css CHANGED
@@ -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
  }
package/components/EmptyState/empty-state.scss CHANGED
@@ -3,38 +3,51 @@
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);
10
+
11
+ // Content
6
12
  --pf-c-empty-state__content--MaxWidth: none;
13
+ --pf-c-empty-state--m-xs__content--MaxWidth: #{pf-size-prem(350px)};
14
+ --pf-c-empty-state--m-sm__content--MaxWidth: #{pf-size-prem(400px)};
15
+ --pf-c-empty-state--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
16
+
17
+ // Icon
7
18
  --pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
8
19
  --pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
9
20
  --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);
21
+ --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
22
+ --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
23
+ --pf-c-empty-state--m-xl__icon--FontSize: #{pf-size-prem(100px)};
24
+
25
+ // Title text
26
+ --pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
27
+ --pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
28
+ --pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
29
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
30
+ --pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
31
+ --pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
32
+ --pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
33
+
34
+ // Body
11
35
  --pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
12
36
  --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: #{pf-size-prem(350px)};
37
+ --pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
21
38
  --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
39
  --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: #{pf-size-prem(400px)};
32
- --pf-c-empty-state--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
33
40
  --pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
34
41
  --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: #{pf-size-prem(100px)};
37
- --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
42
+
43
+ // Footer
44
+ --pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
45
+ --pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
46
+ --pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
47
+
48
+ // Actions
49
+ --pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
50
+ --pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
38
51
 
39
52
  display: flex;
40
53
  align-items: center;
@@ -47,19 +60,12 @@
47
60
  --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
48
61
  --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
49
62
  --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
63
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
50
64
  --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
51
65
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
52
66
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
53
- --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
54
- --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
55
-
56
- .pf-c-empty-state__body {
57
- font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
58
- }
59
-
60
- .pf-c-button {
61
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
62
- }
67
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
68
+ --pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
63
69
  }
64
70
 
65
71
  &.pf-m-sm {
@@ -72,13 +78,11 @@
72
78
 
73
79
  &.pf-m-xl {
74
80
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
81
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
75
82
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
76
83
  --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
77
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
78
-
79
- .pf-c-empty-state__body {
80
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
81
- }
84
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
85
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
82
86
  }
83
87
 
84
88
  &.pf-m-full-height {
@@ -88,42 +92,39 @@
88
92
 
89
93
  .pf-c-empty-state__content {
90
94
  max-width: var(--pf-c-empty-state__content--MaxWidth);
91
-
92
- > .pf-c-title.pf-m-lg {
93
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
94
- }
95
95
  }
96
96
 
97
97
  .pf-c-empty-state__icon {
98
98
  margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
99
99
  font-size: var(--pf-c-empty-state__icon--FontSize);
100
+ line-height: 1;
100
101
  color: var(--pf-c-empty-state__icon--Color);
101
102
  }
102
103
 
104
+ .pf-c-empty-state__title-text {
105
+ font-family: var(--pf-c-empty-state__title-text--FontFamily);
106
+ font-size: var(--pf-c-empty-state__title-text--FontSize);
107
+ font-weight: var(--pf-c-empty-state__title-text--FontWeight);
108
+ line-height: var(--pf-c-empty-state__title-text--LineHeight);
109
+ }
110
+
103
111
  .pf-c-empty-state__body {
104
112
  margin-top: var(--pf-c-empty-state__body--MarginTop);
113
+ font-size: var(--pf-c-empty-state--body--FontSize);
105
114
  color: var(--pf-c-empty-state__body--Color);
106
115
  }
107
116
 
108
- @at-root .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
109
- .pf-c-empty-state__primary {
110
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
111
-
112
- + .pf-c-empty-state__secondary {
113
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
114
- }
117
+ .pf-c-empty-state__footer {
118
+ display: flex;
119
+ flex-direction: column;
120
+ align-items: center;
121
+ row-gap: var(--pf-c-empty-state__footer--RowGap);
122
+ margin-top: var(--pf-c-empty-state__footer--MarginTop);
115
123
  }
116
124
 
117
- .pf-c-empty-state__secondary {
125
+ .pf-c-empty-state__actions {
118
126
  display: flex;
119
127
  flex-wrap: wrap;
120
128
  justify-content: center;
121
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
122
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
123
-
124
- > * {
125
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
126
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
127
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
128
- }
129
+ gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
129
130
  }
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -123,9 +123,7 @@ cssPrefix: pf-c-code-editor
123
123
  class="pf-c-empty-state__body"
124
124
  >Drag a file here or browse to upload.</div>
125
125
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
126
- <div class="pf-c-empty-state__secondary">
127
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
128
- </div>
126
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
129
127
  </div>
130
128
  </div>
131
129
  </div>
@@ -157,9 +155,7 @@ cssPrefix: pf-c-code-editor
157
155
  class="pf-c-empty-state__body"
158
156
  >Drag a file here or browse to upload.</div>
159
157
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
160
- <div class="pf-c-empty-state__secondary">
161
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
162
- </div>
158
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
163
159
  </div>
164
160
  </div>
165
161
  </div>