Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 53d8d48

Browse files
saiponnadasaiponnada
authored
feat(accordion): update expansion icon (#2590)
1 parent 0bbe7cb commit 53d8d48

File tree

7 files changed

+276
-252
lines changed

7 files changed

+276
-252
lines changed

‎.changeset/curvy-mangos-send.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": minor
3+
---
4+
5+
feat(accordion): update expansion icon

‎dist/accordion/accordion.css‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@ ul.accordion summary.details__summary {
2020
padding: 12px 16px;
2121
}
2222

23+
ul.accordion summary.details__summary span.details__icon svg {
24+
fill: var(
25+
--details-secondary-foreground-color,
26+
var(--color-foreground-secondary)
27+
);
28+
}
29+
2330
ul.accordion details .details__content {
2431
margin: 0 16px 6px;
2532
opacity: 0;
@@ -34,12 +41,6 @@ ul.accordion details[open] .details__content {
3441
opacity: 1;
3542
transform: scaleY(1);
3643
}
37-
38-
ul.accordion--large summary.details__summary {
39-
font-size: var(--font-size-large-1);
40-
min-height: 52px;
41-
}
42-
4344
ul.accordion details svg.details__expand,
4445
ul.accordion details[open] svg.details__collapse {
4546
display: inline-block;
@@ -50,6 +51,11 @@ ul.accordion details[open] svg.details__expand {
5051
display: none;
5152
}
5253

54+
ul.accordion--large summary.details__summary {
55+
font-size: var(--font-size-large-1);
56+
min-height: 52px;
57+
}
58+
5359
@media (prefers-reduced-motion) {
5460
ul.accordion details .details__content,
5561
ul.accordion details[open] .details__content {

‎src/routes/_index/component/accordion/+page.marko‎

Lines changed: 49 additions & 121 deletions
Large diffs are not rendered by default.

‎src/sass/accordion/accordion.scss‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ ul.accordion summary.details__summary {
2727
padding: 12px 16px;
2828
}
2929

30+
ul.accordion summary.details__summary span.details__icon svg {
31+
@include fill-token(
32+
details-secondary-foreground-color,
33+
color-foreground-secondary
34+
);
35+
}
36+
3037
ul.accordion details .details__content {
3138
margin: 0 16px 6px;
3239
opacity: 0;
@@ -42,11 +49,7 @@ ul.accordion details[open] .details__content {
4249
transform: scaleY(1);
4350
}
4451

45-
ul.accordion--large summary.details__summary {
46-
font-size: var(--font-size-large-1);
47-
min-height: 52px;
48-
}
49-
52+
/* DEPRECATED: Remove next major */
5053
ul.accordion details svg.details__expand,
5154
ul.accordion details[open] svg.details__collapse {
5255
display: inline-block;
@@ -57,6 +60,11 @@ ul.accordion details svg.details__collapse {
5760
display: none;
5861
}
5962

63+
ul.accordion--large summary.details__summary {
64+
font-size: var(--font-size-large-1);
65+
min-height: 52px;
66+
}
67+
6068
@media (prefers-reduced-motion) {
6169
/* Remove animations */
6270
ul.accordion details .details__content,

‎src/sass/accordion/stories/accordion.stories.js‎

Lines changed: 30 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,8 @@ export const closed = () => `
1212
Shipping and returns
1313
</span>
1414
<span class="details__icon" hidden>
15-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
16-
<use href="#icon-add-16"/>
17-
</svg>
18-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
19-
<use href="#icon-remove-16"/>
15+
<svg class="icon icon--16" aria-hidden="true">
16+
<use href="#icon-chevron-down-16"/>
2017
</svg>
2118
</span>
2219
</summary>
@@ -34,11 +31,8 @@ export const closed = () => `
3431
Text wraps on small screen with this long text
3532
</span>
3633
<span class="details__icon" hidden>
37-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
38-
<use href="#icon-add-16"/>
39-
</svg>
40-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
41-
<use href="#icon-remove-16"/>
34+
<svg class="icon icon--16" aria-hidden="true">
35+
<use href="#icon-chevron-down-16"/>
4236
</svg>
4337
</span>
4438
</summary>
@@ -56,11 +50,8 @@ export const closed = () => `
5650
Specifications
5751
</span>
5852
<span class="details__icon" hidden>
59-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
60-
<use href="#icon-add-16"/>
61-
</svg>
62-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
63-
<use href="#icon-remove-16"/>
53+
<svg class="icon icon--16" aria-hidden="true">
54+
<use href="#icon-chevron-down-16"/>
6455
</svg>
6556
</span>
6657
</summary>
@@ -86,11 +77,8 @@ export const open = () => `
8677
Shipping and returns
8778
</span>
8879
<span class="details__icon" hidden>
89-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
90-
<use href="#icon-add-16"/>
91-
</svg>
92-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
93-
<use href="#icon-remove-16"/>
80+
<svg class="icon icon--16" aria-hidden="true">
81+
<use href="#icon-chevron-down-16"/>
9482
</svg>
9583
</span>
9684
</summary>
@@ -108,11 +96,8 @@ export const open = () => `
10896
Text wraps on small screen with this long text
10997
</span>
11098
<span class="details__icon" hidden>
111-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
112-
<use href="#icon-add-16"/>
113-
</svg>
114-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
115-
<use href="#icon-remove-16"/>
99+
<svg class="icon icon--16" aria-hidden="true">
100+
<use href="#icon-chevron-down-16"/>
116101
</svg>
117102
</span>
118103
</summary>
@@ -130,11 +115,8 @@ export const open = () => `
130115
Specifications
131116
</span>
132117
<span class="details__icon" hidden>
133-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
134-
<use href="#icon-add-16"/>
135-
</svg>
136-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
137-
<use href="#icon-remove-16"/>
118+
<svg class="icon icon--16" aria-hidden="true">
119+
<use href="#icon-chevron-down-16"/>
138120
</svg>
139121
</span>
140122
</summary>
@@ -160,11 +142,8 @@ export const textSpacing = () => `
160142
Shipping and returns
161143
</span>
162144
<span class="details__icon" hidden>
163-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
164-
<use href="#icon-add-16"/>
165-
</svg>
166-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
167-
<use href="#icon-remove-16"/>
145+
<svg class="icon icon--16" aria-hidden="true">
146+
<use href="#icon-chevron-down-16"/>
168147
</svg>
169148
</span>
170149
</summary>
@@ -182,11 +161,8 @@ export const textSpacing = () => `
182161
Text wraps on small screen with this long text
183162
</span>
184163
<span class="details__icon" hidden>
185-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
186-
<use href="#icon-add-16"/>
187-
</svg>
188-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
189-
<use href="#icon-remove-16"/>
164+
<svg class="icon icon--16" aria-hidden="true">
165+
<use href="#icon-chevron-down-16"/>
190166
</svg>
191167
</span>
192168
</summary>
@@ -204,11 +180,8 @@ export const textSpacing = () => `
204180
Specifications
205181
</span>
206182
<span class="details__icon" hidden>
207-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
208-
<use href="#icon-add-16"/>
209-
</svg>
210-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
211-
<use href="#icon-remove-16"/>
183+
<svg class="icon icon--16" aria-hidden="true">
184+
<use href="#icon-chevron-down-16"/>
212185
</svg>
213186
</span>
214187
</summary>
@@ -234,11 +207,8 @@ export const large = () => `
234207
Shipping and returns
235208
</span>
236209
<span class="details__icon" hidden>
237-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
238-
<use href="#icon-add-16"/>
239-
</svg>
240-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
241-
<use href="#icon-remove-16"/>
210+
<svg class="icon icon--16" aria-hidden="true">
211+
<use href="#icon-chevron-down-16"/>
242212
</svg>
243213
</span>
244214
</summary>
@@ -256,11 +226,8 @@ export const large = () => `
256226
Description
257227
</span>
258228
<span class="details__icon" hidden>
259-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
260-
<use href="#icon-add-16"/>
261-
</svg>
262-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
263-
<use href="#icon-remove-16"/>
229+
<svg class="icon icon--16" aria-hidden="true">
230+
<use href="#icon-chevron-down-16"/>
264231
</svg>
265232
</span>
266233
</summary>
@@ -278,11 +245,8 @@ export const large = () => `
278245
Specifications
279246
</span>
280247
<span class="details__icon" hidden>
281-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
282-
<use href="#icon-add-16"/>
283-
</svg>
284-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
285-
<use href="#icon-remove-16"/>
248+
<svg class="icon icon--16" aria-hidden="true">
249+
<use href="#icon-chevron-down-16"/>
286250
</svg>
287251
</span>
288252
</summary>
@@ -308,11 +272,8 @@ export const autoCollapse = () => `
308272
Shipping and returns
309273
</span>
310274
<span class="details__icon" hidden>
311-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
312-
<use href="#icon-add-16"/>
313-
</svg>
314-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
315-
<use href="#icon-remove-16"/>
275+
<svg class="icon icon--16" aria-hidden="true">
276+
<use href="#icon-chevron-down-16"/>
316277
</svg>
317278
</span>
318279
</summary>
@@ -330,11 +291,8 @@ export const autoCollapse = () => `
330291
Text wraps on small screen with this long text
331292
</span>
332293
<span class="details__icon" hidden>
333-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
334-
<use href="#icon-add-16"/>
335-
</svg>
336-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
337-
<use href="#icon-remove-16"/>
294+
<svg class="icon icon--16" aria-hidden="true">
295+
<use href="#icon-chevron-down-16"/>
338296
</svg>
339297
</span>
340298
</summary>
@@ -352,11 +310,8 @@ export const autoCollapse = () => `
352310
Specifications
353311
</span>
354312
<span class="details__icon" hidden>
355-
<svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true">
356-
<use href="#icon-add-16"/>
357-
</svg>
358-
<svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true">
359-
<use href="#icon-remove-16"/>
313+
<svg class="icon icon--16" aria-hidden="true">
314+
<use href="#icon-chevron-down-16"/>
360315
</svg>
361316
</span>
362317
</summary>

0 commit comments

Comments
 (0)