@patternfly/patternfly 6.0.0-alpha.20 → 6.0.0-alpha.22

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 (17) hide show
  1. package/base/_common.scss +8 -4
  2. package/base/patternfly-common.css +8 -4
  3. package/base/patternfly-variables.css +10 -3
  4. package/base/tokens/_tokens-font.scss +12 -3
  5. package/components/ExpandableSection/expandable-section.css +64 -55
  6. package/components/ExpandableSection/expandable-section.scss +72 -68
  7. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals-theme-dark-unversioned.css +18 -7
  10. package/patternfly-base-no-globals.css +18 -7
  11. package/patternfly-base-theme-dark-unversioned.css +18 -7
  12. package/patternfly-base.css +18 -7
  13. package/patternfly-no-globals.css +82 -62
  14. package/patternfly-theme-dark-unversioned.css +82 -62
  15. package/patternfly.css +82 -62
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/base/_common.scss CHANGED
@@ -18,10 +18,14 @@
18
18
  }
19
19
 
20
20
  // Variable font opt-in
21
- .#{$pf-prefix}m-vf-font {
22
- --#{$pf-global}--FontFamily--text: var(--#{$pf-global}--FontFamily--text--vf);
23
- --#{$pf-global}--FontFamily--heading: var(--#{$pf-global}--FontFamily--heading--vf);
24
- --#{$pf-global}--FontFamily--monospace: var(--#{$pf-global}--FontFamily--monospace--vf);
21
+ .#{$pf-prefix}m-legacy-font {
22
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
23
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
24
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
25
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
26
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
27
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
28
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
25
29
  }
26
30
 
27
31
  // RTL helpers
package/base/patternfly-common.css CHANGED
@@ -19,10 +19,14 @@
19
19
  font-variant-numeric: tabular-nums;
20
20
  }
21
21
 
22
- .pf-v5-m-vf-font {
23
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
24
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
25
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
22
+ .pf-v5-m-legacy-font {
23
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
24
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
25
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
26
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
27
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
28
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
29
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
26
30
  }
27
31
 
28
32
  .pf-v5-m-dir-rtl {
package/base/patternfly-variables.css CHANGED
@@ -784,9 +784,9 @@
784
784
  }
785
785
 
786
786
  :root {
787
- --pf-t--global--font--family--100: redhattext;
788
- --pf-t--global--font--family--200: redhatdisplay;
789
- --pf-t--global--font--family--300: redhatmono;
787
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
788
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
789
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
790
790
  --pf-t--global--font--line-height--100: 1.3;
791
791
  --pf-t--global--font--line-height--200: 1.5;
792
792
  --pf-t--global--font--weight--body--100: 400;
@@ -821,6 +821,13 @@
821
821
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
822
822
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
823
823
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
824
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
825
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
826
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
827
+ --pf-t--global--font--weight--body--legacy: 400;
828
+ --pf-t--global--font--weight--body--bold--legacy: 700;
829
+ --pf-t--global--font--weight--heading--legacy: 400;
830
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
824
831
  --pf-t--global--text-decoration--100: none;
825
832
  --pf-t--global--text-decoration--200: underline;
826
833
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
package/base/tokens/_tokens-font.scss CHANGED
@@ -5,9 +5,9 @@
5
5
 
6
6
  :root {
7
7
  // Base tokens for fonts
8
- --pf-t--global--font--family--100: redhattext;
9
- --pf-t--global--font--family--200: redhatdisplay;
10
- --pf-t--global--font--family--300: redhatmono;
8
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
9
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
10
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
11
11
  --pf-t--global--font--line-height--100: 1.3;
12
12
  --pf-t--global--font--line-height--200: 1.5;
13
13
  --pf-t--global--font--weight--body--100: 400;
@@ -45,6 +45,15 @@
45
45
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
46
46
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
47
47
 
48
+ // Legacy/non-variable font opt-in
49
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
50
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
51
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
52
+ --pf-t--global--font--weight--body--legacy: 400;
53
+ --pf-t--global--font--weight--body--bold--legacy: 700;
54
+ --pf-t--global--font--weight--heading--legacy: 400;
55
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
56
+
48
57
  // Other missing ones
49
58
  // text-decoration
50
59
  --pf-t--global--text-decoration--100: none;
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -1,50 +1,61 @@
1
- .pf-v5-c-expandable-section {
2
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
3
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
5
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
6
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
7
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
8
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
9
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
10
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
11
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
1
+ :root {
2
+ --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
3
+ --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
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);
12
11
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
12
+ --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
13
13
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
14
- --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
14
+ --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
15
15
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
16
16
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
17
17
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
18
18
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
19
19
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
20
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
21
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
20
+ --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
21
+ --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
22
+ --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
23
+ --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
22
24
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
23
25
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
24
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
25
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
26
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
27
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
28
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
29
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
30
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
31
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
32
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
33
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
34
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
35
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
36
- --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section__toggle-text--MarginLeft) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
26
+ --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
27
+ --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
28
+ --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
29
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
30
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
31
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
32
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
33
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
34
+ --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
35
+ --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
36
+ --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
37
+ --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
38
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
39
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
40
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
41
+ --pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
42
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v5-c-expandable-section__toggle--ColumnGap) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
43
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section__toggle--PaddingLeft));
44
+ --pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft));
45
+ --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
46
+ --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
47
+ --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
48
+ --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
49
+ --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
37
50
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
38
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
39
51
  }
52
+
40
53
  .pf-v5-c-expandable-section.pf-m-expanded {
41
54
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
42
55
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
43
56
  --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);
44
57
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
45
- }
46
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
47
- --pf-v5-c-expandable-section__content--MarginTop: 0;
58
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
48
59
  }
49
60
  .pf-v5-c-expandable-section.pf-m-limit-width {
50
61
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -54,31 +65,31 @@
54
65
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
55
66
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
56
67
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
68
+ --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
69
+ --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
70
+ --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
71
+ --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
72
+ --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
57
73
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
58
74
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
59
75
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
60
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
61
- position: relative;
62
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
63
- }
64
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
65
- position: absolute;
66
- inset-block-start: 0;
67
- inset-block-end: 0;
68
- inset-inline-start: 0;
69
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
70
- content: "";
71
- background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
76
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
77
+ background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
78
+ border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
79
+ border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
72
80
  }
73
81
  .pf-v5-c-expandable-section.pf-m-indented {
74
82
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
75
83
  }
76
84
  .pf-v5-c-expandable-section.pf-m-truncate {
77
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
78
85
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
79
86
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
80
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
81
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
87
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
88
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
89
+ --pf-v5-c-expandable-section__content--PaddingTop: 0;
90
+ --pf-v5-c-expandable-section__content--PaddingRight: 0;
91
+ --pf-v5-c-expandable-section__content--PaddingBottom: 0;
92
+ --pf-v5-c-expandable-section__content--PaddingLeft: 0;
82
93
  }
83
94
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
84
95
  display: -webkit-box;
@@ -86,29 +97,31 @@
86
97
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
87
98
  overflow: hidden;
88
99
  }
89
- .pf-v5-c-expandable-section.pf-m-detached {
90
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
91
- }
92
100
 
93
101
  .pf-v5-c-expandable-section__toggle {
94
102
  display: flex;
103
+ column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
104
+ width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
95
105
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
96
106
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
97
107
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
98
108
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
99
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
100
109
  color: var(--pf-v5-c-expandable-section__toggle--Color);
101
110
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
102
111
  border: none;
112
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
103
113
  }
104
114
  .pf-v5-c-expandable-section__toggle:hover {
105
115
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
116
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
106
117
  }
107
118
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
108
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);
109
121
  }
110
122
  .pf-v5-c-expandable-section__toggle:focus {
111
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);
112
125
  }
113
126
 
114
127
  .pf-v5-c-expandable-section__toggle-icon {
@@ -125,14 +138,10 @@
125
138
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
126
139
  }
127
140
 
128
- .pf-v5-c-expandable-section__toggle-text {
129
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
130
- }
131
-
132
141
  .pf-v5-c-expandable-section__content {
133
142
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
143
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
134
144
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
135
145
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
136
146
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
137
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
138
147
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -1,70 +1,78 @@
1
1
  // @debug $expandable-section; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$expandable-section} {
3
+ :root {
4
4
  // Toggle
5
- --#{$expandable-section}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
6
- --#{$expandable-section}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
7
- --#{$expandable-section}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
8
- --#{$expandable-section}__toggle--PaddingLeft: 0;
9
- --#{$expandable-section}__toggle--MarginTop: 0;
10
- --#{$expandable-section}__toggle--Color: var(--#{$pf-global}--link--Color);
11
- --#{$expandable-section}__toggle--hover--Color: var(--#{$pf-global}--link--Color--hover);
12
- --#{$expandable-section}__toggle--active--Color: var(--#{$pf-global}--link--Color--hover);
13
- --#{$expandable-section}__toggle--focus--Color: var(--#{$pf-global}--link--Color--hover);
14
- --#{$expandable-section}__toggle--m-expanded--Color: var(--#{$pf-global}--link--Color--hover);
5
+ --#{$expandable-section}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
6
+ --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
7
+ --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
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);
15
14
  --#{$expandable-section}__toggle--BackgroundColor: transparent;
16
-
15
+ --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
16
+
17
17
  // Toggle icon
18
18
  --#{$expandable-section}__toggle-icon--MinWidth: 1em;
19
- --#{$expandable-section}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
19
+ --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
20
20
  --#{$expandable-section}__toggle-icon--Transition: .2s ease-in 0s;
21
21
  --#{$expandable-section}__toggle-icon--Rotate: 0;
22
22
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
23
23
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
24
24
  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
25
-
26
- // Toggle text
27
- --#{$expandable-section}__toggle-text--MarginLeft: calc(var(--#{$pf-global}--spacer--xs) + var(--#{$pf-global}--spacer--sm));
28
-
25
+
29
26
  // Content
30
- --#{$expandable-section}__content--MarginTop: var(--#{$pf-global}--spacer--md);
27
+ --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
28
+ --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
29
+ --#{$expandable-section}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
30
+ --#{$expandable-section}__content--PaddingLeft: var(--pf-t--global--spacer--sm);
31
31
  --#{$expandable-section}__content--MaxWidth: auto;
32
-
32
+
33
33
  // Limit Width
34
34
  --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
35
+
36
+ // Large / Disclosure
37
+ --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
38
+ --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
39
+ --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
40
+ --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
41
+ --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
42
+ --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
43
+ --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
44
+ --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
45
+ --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
46
+ --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
47
+ --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
48
+ --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
49
+ --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
50
+ --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
51
+ --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
52
+ --#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
35
53
 
36
- // Large
37
- --#{$expandable-section}--m-display-lg--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
38
- --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
39
- --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
40
- --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
41
- --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
42
- --#{$expandable-section}--m-display-lg__content--MarginTop: 0;
43
- --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--#{$pf-global}--spacer--lg);
44
- --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
45
- --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--#{$pf-global}--spacer--lg);
46
- --#{$expandable-section}--m-display-lg--after--BackgroundColor: transparent;
47
- --#{$expandable-section}--m-display-lg--after--Width: var(--#{$pf-global}--BorderWidth--lg);
48
- --#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
49
54
 
50
55
  // Indented
51
- --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}__toggle-text--MarginLeft) + var(--#{$expandable-section}__toggle-icon--MinWidth));
52
-
56
+ --#{$expandable-section}--m-indented__content--PaddingLeft--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
57
+ --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}__toggle--PaddingLeft));
58
+ --#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingLeft));
59
+
53
60
  // Truncate
61
+ --#{$expandable-section}--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
62
+ --#{$expandable-section}--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
63
+ --#{$expandable-section}--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
64
+ --#{$expandable-section}--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
65
+ --#{$expandable-section}--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
54
66
  --#{$expandable-section}--m-truncate__content--LineClamp: 3;
55
- --#{$expandable-section}--m-truncate__toggle--MarginTop: var(--#{$pf-global}--spacer--xs);
56
-
67
+ }
57
68
 
69
+ .#{$expandable-section} {
58
70
  &.pf-m-expanded {
59
71
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
60
72
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
61
73
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
62
74
  --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
63
- }
64
-
65
- &.pf-m-detached,
66
- &.pf-m-truncate {
67
- --#{$expandable-section}__content--MarginTop: 0;
75
+ --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius);
68
76
  }
69
77
 
70
78
  &.pf-m-limit-width {
@@ -76,23 +84,19 @@
76
84
  --#{$expandable-section}__toggle--PaddingRight: var(--#{$expandable-section}--m-display-lg__toggle--PaddingRight);
77
85
  --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBottom);
78
86
  --#{$expandable-section}__toggle--PaddingLeft: var(--#{$expandable-section}--m-display-lg__toggle--PaddingLeft);
87
+ --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
88
+ --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
89
+ --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
90
+ --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
91
+ --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
79
92
  --#{$expandable-section}__content--PaddingRight: var(--#{$expandable-section}--m-display-lg__content--PaddingRight);
80
93
  --#{$expandable-section}__content--PaddingBottom: var(--#{$expandable-section}--m-display-lg__content--PaddingBottom);
81
94
  --#{$expandable-section}__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg__content--PaddingLeft);
82
- --#{$expandable-section}__content--MarginTop: var(--#{$expandable-section}--m-display-lg__content--MarginTop);
83
-
84
- position: relative;
85
- box-shadow: var(--#{$expandable-section}--m-display-lg--BoxShadow);
86
-
87
- &::after {
88
- position: absolute;
89
- inset-block-start: 0;
90
- inset-block-end: 0;
91
- inset-inline-start: 0;
92
- width: var(--#{$expandable-section}--m-display-lg--after--Width);
93
- content: "";
94
- background-color: var(--#{$expandable-section}--m-display-lg--after--BackgroundColor);
95
- }
95
+ --#{$expandable-section}--m-indented__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft);
96
+
97
+ background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
98
+ border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
99
+ border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
96
100
  }
97
101
 
98
102
  &.pf-m-indented {
@@ -100,11 +104,14 @@
100
104
  }
101
105
 
102
106
  &.pf-m-truncate {
103
- --#{$expandable-section}__toggle--MarginTop: var(--#{$expandable-section}--m-truncate__toggle--MarginTop);
104
107
  --#{$expandable-section}__toggle--PaddingTop: 0;
105
108
  --#{$expandable-section}__toggle--PaddingRight: 0;
106
- --#{$expandable-section}__toggle--PaddingBottom: 0;
107
- --#{$expandable-section}__toggle-text--MarginLeft: 0;
109
+ --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-truncate__toggle--PaddingBottom);
110
+ --#{$expandable-section}__toggle--PaddingLeft: 0;
111
+ --#{$expandable-section}__content--PaddingTop: 0;
112
+ --#{$expandable-section}__content--PaddingRight: 0;
113
+ --#{$expandable-section}__content--PaddingBottom: 0;
114
+ --#{$expandable-section}__content--PaddingLeft: 0;
108
115
 
109
116
  &:not(.pf-m-expanded) .#{$expandable-section}__content {
110
117
  // stylelint-disable
@@ -115,34 +122,35 @@
115
122
  overflow: hidden;
116
123
  }
117
124
  }
118
-
119
- &.pf-m-detached {
120
- --#{$expandable-section}--m-truncate__toggle--MarginTop: 0;
121
- }
122
125
  }
123
126
 
124
127
  .#{$expandable-section}__toggle {
125
128
  display: flex;
129
+ column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
130
+ width: var(--#{$expandable-section}__toggle--Width, initial);
126
131
  padding-block-start: var(--#{$expandable-section}__toggle--PaddingTop);
127
132
  padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
128
133
  padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
129
134
  padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
130
- margin-block-start: var(--#{$expandable-section}__toggle--MarginTop);
131
135
  color: var(--#{$expandable-section}__toggle--Color);
132
136
  background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
133
137
  border: none;
138
+ border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
134
139
 
135
140
  &:hover {
136
141
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
142
+ --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
137
143
  }
138
144
 
139
145
  &:active,
140
146
  &.pf-m-active {
141
147
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
148
+ --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--active--BackgroundColor, initial);
142
149
  }
143
150
 
144
151
  &:focus {
145
152
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
153
+ --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--focus--BackgroundColor, initial);
146
154
  }
147
155
  }
148
156
 
@@ -159,14 +167,10 @@
159
167
  }
160
168
  }
161
169
 
162
- .#{$expandable-section}__toggle-text {
163
- margin-inline-start: var(--#{$expandable-section}__toggle-text--MarginLeft);
164
- }
165
-
166
170
  .#{$expandable-section}__content {
167
171
  max-width: var(--#{$expandable-section}__content--MaxWidth);
172
+ padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
168
173
  padding-block-end: var(--#{$expandable-section}__content--PaddingBottom);
169
174
  padding-inline-start: var(--#{$expandable-section}__content--PaddingLeft);
170
175
  padding-inline-end: var(--#{$expandable-section}__content--PaddingRight);
171
- margin-block-start: var(--#{$expandable-section}__content--MarginTop);
172
176
  }
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -47,6 +47,27 @@ cssPrefix: pf-v5-c-expandable-section
47
47
 
48
48
  ```
49
49
 
50
+ ### Indented
51
+
52
+ ```html
53
+ <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented">
54
+ <button
55
+ type="button"
56
+ class="pf-v5-c-expandable-section__toggle"
57
+ aria-expanded="true"
58
+ >
59
+ <span class="pf-v5-c-expandable-section__toggle-icon">
60
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
61
+ </span>
62
+ <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
63
+ </button>
64
+ <div
65
+ class="pf-v5-c-expandable-section__content"
66
+ >This content is visible only when the component is expanded.</div>
67
+ </div>
68
+
69
+ ```
70
+
50
71
  ### Disclosure variation (hidden)
51
72
 
52
73
  ```html
@@ -92,7 +113,30 @@ cssPrefix: pf-v5-c-expandable-section
92
113
 
93
114
  ```
94
115
 
95
- ### Detached toggle
116
+ ### Disclosure variation (indented)
117
+
118
+ ```html
119
+ <div
120
+ class="pf-v5-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
+ >
122
+ <button
123
+ type="button"
124
+ class="pf-v5-c-expandable-section__toggle"
125
+ aria-expanded="true"
126
+ >
127
+ <span class="pf-v5-c-expandable-section__toggle-icon">
128
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
129
+ </span>
130
+ <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
131
+ </button>
132
+ <div
133
+ class="pf-v5-c-expandable-section__content"
134
+ >This content is visible only when the component is expanded.</div>
135
+ </div>
136
+
137
+ ```
138
+
139
+ ### Detached
96
140
 
97
141
  ```html
98
142
  <div class="pf-v5-l-stack pf-m-gutter">
@@ -124,28 +168,7 @@ cssPrefix: pf-v5-c-expandable-section
124
168
 
125
169
  ```
126
170
 
127
- ### Indented
128
-
129
- ```html
130
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented">
131
- <button
132
- type="button"
133
- class="pf-v5-c-expandable-section__toggle"
134
- aria-expanded="true"
135
- >
136
- <span class="pf-v5-c-expandable-section__toggle-icon">
137
- <i class="fas fa-angle-right" aria-hidden="true"></i>
138
- </span>
139
- <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
140
- </button>
141
- <div
142
- class="pf-v5-c-expandable-section__content"
143
- >This content is visible only when the component is expanded.</div>
144
- </div>
145
-
146
- ```
147
-
148
- ### Truncate expansion
171
+ ### Truncate expansion (hidden)
149
172
 
150
173
  ```html
151
174
  <div class="pf-v5-c-expandable-section pf-m-truncate">
@@ -163,7 +186,7 @@ cssPrefix: pf-v5-c-expandable-section
163
186
 
164
187
  ```
165
188
 
166
- ### Truncate expansion expanded
189
+ ### Truncate expansion (expanded)
167
190
 
168
191
  ```html
169
192
  <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-truncate">
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.20",
4
+ "version": "6.0.0-alpha.22",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {