Skip to content

Commit f53155b

Browse files
brianferrybrianferry
authored
[pfe-accordion]: Updating stylesheets, package.json exports, and gap (#2196)
* fix: fixing exports for pfe-accordion and updating the sidebar gap * fix: adding updating package.json export * fix: updating stylesheets to match newer format & reworking them into pfe-accordion * chore: updating pfe-accordion changeset
1 parent 07f49c4 commit f53155b

File tree

8 files changed

+200
-84
lines changed

8 files changed

+200
-84
lines changed

‎.changeset/smooth-chefs-listen.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@patternfly/pfe-accordion": patch
3+
---
4+
5+
Moving variable specific styles directly into pfe-accordion/header/panel.scss. Updating package exports to include Base Classes.

‎elements/pfe-accordion/BaseAccordion.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
:host {
2-
color: var(--pf-global--Color--100, #151515);
3-
background-color: var(--pf-global--BackgroundColor--100, #ffffff);
4-
}

‎elements/pfe-accordion/BaseAccordionHeader.scss‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
:host {
2-
--pfe-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
3-
4-
color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
5-
background-color: var(--pf-global--BackgroundColor--100, #ffffff);
6-
}
7-
81
#heading {
92
font-size: 100%;
103
padding: 0;
114
margin: 0;
12-
font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
135
}
146

157
button,
@@ -22,11 +14,6 @@ a {
2214
.toggle:after {
2315
padding: 0;
2416
margin: 0;
25-
background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
26-
}
27-
28-
.icon {
29-
transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
3017
}
3118

3219
.toggle {
@@ -36,54 +23,17 @@ a {
3623
justify-content: space-between;
3724
width: 100%;
3825
border: 0;
39-
padding:
40-
var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
41-
var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem))
42-
var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
43-
var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem));
44-
font-family: var(--pf-c-accordion__toggle--FontFamily, var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatTextUpdated", helvetica, arial, sans-serif));
45-
font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
46-
font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
47-
color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
48-
}
49-
50-
.toggle[aria-expanded="true"] {
51-
--pf-c-accordion__toggle--after--BackgroundColor: var(--pf-c-accordion__toggle--expanded--before--BackgroundColor, var(--pf-global--primary-color--100, #0066cc));
5226
}
5327

5428
.toggle:after {
5529
content: "";
5630
position: absolute;
5731
bottom: 0;
5832
left: 0;
59-
top: var(--pf-c-accordion__toggle--before--Top, 0);
60-
width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
61-
background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
6233
}
6334

6435
span {
6536
overflow: hidden;
6637
text-overflow: ellipsis;
6738
white-space: nowrap;
68-
max-width: var(--pf-c-accordion__toggle-text--MaxWidth, calc(100% - var(--pf-global--spacer--lg, 1.5rem)));
69-
}
70-
71-
.toggle[aria-expanded="true"] .icon {
72-
rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
73-
}
74-
75-
.toggle:hover,
76-
.toggle:active,
77-
.toggle:focus {
78-
background-color: var(--pf-c-accordion__toggle--active--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));
79-
}
80-
.toggle:hover span,
81-
.toggle:focus span,
82-
.toggle:active span {
83-
color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
84-
}
85-
86-
.toggle:focus span,
87-
.toggle:active span {
88-
font-weight: var(--pf-c-accordion__toggle--active-text--FontWeight, var(--pf-global--FontWeight--semi-bold, 700));
8939
}

‎elements/pfe-accordion/BaseAccordionPanel.scss‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
display: none;
33
overflow: hidden;
44
will-change: height;
5-
6-
color: var(--pf-global--Color--100, #151515);
7-
background-color: var(--pf-c-accordion--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #ffffff));
85
}
96

107
:host([expanded]) {
@@ -17,28 +14,12 @@
1714
transition: height 0.3s ease-in-out;
1815
}
1916

20-
.content {
21-
color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
22-
font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
23-
}
24-
2517
:host([fixed]) {
26-
max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
2718
overflow-y: auto;
2819
}
2920

30-
.content[expanded],
31-
:host([expanded]) .content {
32-
--pf-c-accordion__panel-body--before--BackgroundColor: var(--pf-c-accordion__panel--content-body--before--BackgroundColor, var(--pf-global--primary-color--100, #0066cc));
33-
}
34-
3521
.body {
3622
position: relative;
37-
padding:
38-
var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
39-
var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))
40-
var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
41-
var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
4223
}
4324

4425
.body:after {
@@ -47,6 +28,4 @@
4728
top: 0;
4829
bottom: 0;
4930
left: 0;
50-
width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
51-
background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
52-
}
31+
}

‎elements/pfe-accordion/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
".": "./pfe-accordion.js",
1313
"./pfe-accordion-header.js": "./pfe-accordion-header.js",
1414
"./pfe-accordion-panel.js": "./pfe-accordion-panel.js",
15+
"./BaseAccordion.js": "./BaseAccordion.js",
16+
"./BaseAccordionHeader.js": "./BaseAccordionHeader.js",
17+
"./BaseAccordionPanel.js": "./BaseAccordionPanel.js",
1518
"./*": "./*.js"
1619
},
1720
"publishConfig": {

‎elements/pfe-accordion/pfe-accordion-header.scss‎

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
1+
:host {
2+
--pfe-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
3+
4+
color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
5+
background-color: var(--pf-global--BackgroundColor--100, #ffffff);
6+
}
7+
18
:host([large]) {
29
--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
310
--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
411
--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
512
--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
6-
--pf-c-accordion__toggle--FontFamily: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
13+
--pf-c-accordion__toggle--FontFamily:
14+
var(
15+
--pf-global--FontFamily--redhat-updated--heading--sans-serif,
16+
"RedHatDisplayUpdated",
17+
"Overpass",
18+
overpass,
19+
helvetica,
20+
arial,
21+
sans-serif
22+
);
723
--pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
824
--pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);
925
--pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);
@@ -14,3 +30,99 @@
1430
--pf-c-accordion__toggle--expanded-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
1531
--pfe-icon--size: var(--pf-c-accordion__toggle--IconSize, 12px);
1632
}
33+
34+
#heading {
35+
font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
36+
}
37+
38+
.toggle,
39+
.toggle:before,
40+
.toggle:after {
41+
background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
42+
}
43+
44+
.icon {
45+
transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
46+
}
47+
48+
.toggle {
49+
padding:
50+
var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--md, 0.5rem))
51+
var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem))
52+
var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
53+
var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem));
54+
font-family:
55+
var(
56+
--pf-c-accordion__toggle--FontFamily,
57+
var(
58+
--pf-global--FontFamily--redhat-updated--heading--sans-serif,
59+
"RedHatTextUpdated",
60+
helvetica,
61+
arial,
62+
sans-serif
63+
)
64+
);
65+
font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
66+
font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
67+
color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
68+
}
69+
70+
.toggle[aria-expanded="true"] {
71+
--pf-c-accordion__toggle--after--BackgroundColor:
72+
var(
73+
--pf-c-accordion__toggle--expanded--before--BackgroundColor,
74+
var(
75+
--pf-global--primary-color--100,
76+
#0066cc
77+
)
78+
);
79+
}
80+
81+
.toggle:after {
82+
top: var(--pf-c-accordion__toggle--before--Top, -1px);
83+
width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
84+
background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
85+
}
86+
87+
span {
88+
max-width:
89+
var(
90+
--pf-c-accordion__toggle-text--MaxWidth,
91+
calc(100% - var(--pf-global--spacer--lg, 1.5rem))
92+
);
93+
}
94+
95+
.toggle[aria-expanded="true"] .icon {
96+
rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
97+
}
98+
99+
.toggle:hover,
100+
.toggle:active,
101+
.toggle:focus {
102+
background-color:
103+
var(
104+
--pf-c-accordion__toggle--active--BackgroundColor,
105+
var(
106+
--pf-global--BackgroundColor--200,
107+
#f0f0f0
108+
)
109+
);
110+
}
111+
112+
.toggle:hover span,
113+
.toggle:focus span,
114+
.toggle:active span {
115+
color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
116+
}
117+
118+
.toggle:focus span,
119+
.toggle:active span {
120+
font-weight:
121+
var(
122+
--pf-c-accordion__toggle--active-text--FontWeight,
123+
var(
124+
--pf-global--FontWeight--semi-bold,
125+
700
126+
)
127+
);
128+
}

‎elements/pfe-accordion/pfe-accordion-panel.scss‎

Lines changed: 75 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,80 @@
1+
:host {
2+
color: var(--pf-global--Color--100, #151515);
3+
background-color:
4+
var(
5+
--pf-c-accordion--BackgroundColor,
6+
var(--pf-global--BackgroundColor--light-100, #ffffff)
7+
);
8+
}
9+
10+
.body {
11+
padding:
12+
var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
13+
var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))
14+
var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
15+
var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
16+
}
17+
18+
.body:after {
19+
width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
20+
background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
21+
}
22+
123
:host([large]) {
2-
--pf-c-accordion__panel-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);
3-
--pf-c-accordion__panel-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);
4-
--pf-c-accordion__panel-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);
5-
--pf-c-accordion__panel-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);
6-
--pf-c-accordion__panel--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);
7-
--pf-c-accordion__panel--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515);
24+
--pf-c-accordion__panel-body--PaddingTop:
25+
var(
26+
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop,
27+
0
28+
);
29+
--pf-c-accordion__panel-body--PaddingRight:
30+
var(
31+
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight,
32+
1rem
33+
);
34+
--pf-c-accordion__panel-body--PaddingBottom:
35+
var(
36+
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom,
37+
1.5rem
38+
);
39+
--pf-c-accordion__panel-body--PaddingLeft:
40+
var(
41+
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft,
42+
1.5rem
43+
);
44+
--pf-c-accordion__panel--FontSize:
45+
var(
46+
--pf-c-accordion--m-display-lg__expanded-content--FontSize,
47+
1rem
48+
);
49+
--pf-c-accordion__panel--Color:
50+
var(
51+
--pf-c-accordion--m-display-lg__expanded-content--Color,
52+
#151515
53+
);
854
}
955

1056
:host([large]) .body:last-child {
11-
--pf-c-accordion__panel-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem);
57+
--pf-c-accordion__panel-body--PaddingBottom:
58+
var(
59+
--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom,
60+
1.5rem
61+
);
62+
}
63+
64+
.content {
65+
color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
66+
font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
67+
}
68+
69+
:host([fixed]) {
70+
max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
71+
}
72+
73+
.content[expanded],
74+
:host([expanded]) .content {
75+
--pf-c-accordion__panel-body--before--BackgroundColor:
76+
var(
77+
--pf-c-accordion__panel--content-body--before--BackgroundColor,
78+
var(--pf-global--primary-color--100, #0066cc)
79+
);
1280
}

‎elements/pfe-accordion/pfe-accordion.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
:host {
22
--accordion__bordered--Color: var(--rh-color-black-300, #d2d2d2);
3+
4+
color: var(--pf-global--Color--100, #151515);
5+
background-color: var(--pf-global--BackgroundColor--100, #ffffff);
36
}
47

58
:host([bordered]) ::slotted(pfe-accordion-header:first-child),

0 commit comments

Comments
 (0)