Skip to content

Commit 77d5f15

Browse files
agligaagliga
authored
fix(accordion): added a delay in animation to trigger only when interacted (#492)
1 parent a3a1a37 commit 77d5f15

File tree

9 files changed

+214
-115
lines changed

9 files changed

+214
-115
lines changed

‎.changeset/warm-taxis-tickle.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@ebay/ui-core-react": patch
3+
"@ebay/ebayui-core": patch
4+
"@evo-web/marko": patch
5+
"@ebay/skin": patch
6+
---
7+
8+
fix(accordion): added a delay in animation to trigger only when component is interacted

‎packages/ebayui-core-react/src/ebay-accordion/accordion.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classnames from "classnames";
2-
import React, { ComponentProps, FC, ReactElement, useRef } from "react";
2+
import React, { ComponentProps, FC, ReactElement, useRef, useState } from "react";
33
import { EbayDetails, EbayDetailsProps } from "../ebay-details";
44
import { filterByType } from "../utils";
55
import { EbayEventHandler } from "../events";
@@ -26,6 +26,7 @@ const EbayAccordion: FC<EbayAccordionProps> = ({
2626
...rest
2727
}: EbayAccordionProps) => {
2828
const listRef = useRef<HTMLUListElement>(null);
29+
const [interacted, setInteracted] = useState(false);
2930

3031
const details = filterByType(children, EbayDetails);
3132
if (!details.length) {
@@ -36,6 +37,7 @@ const EbayAccordion: FC<EbayAccordionProps> = ({
3637
const detailsWithAccordionProps = details.map((detailComponent, detailsIndex) =>
3738
React.cloneElement(detailComponent as ReactElement<EbayDetailsProps>, {
3839
onToggle: (event, { open }) => {
40+
setInteracted(true);
3941
if (autoCollapse && open) {
4042
const detailsElements = listRef.current?.querySelectorAll("details");
4143
detailsElements?.forEach((detailElement, elementIndex) => {
@@ -60,6 +62,7 @@ const EbayAccordion: FC<EbayAccordionProps> = ({
6062
ref={listRef}
6163
className={classnames("accordion", className, {
6264
"accordion--large": size === "large",
65+
"accordion--animated": interacted,
6366
})}
6467
aria-roledescription={ariaRoledescription}
6568
>

‎packages/ebayui-core/src/components/ebay-accordion/component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,23 @@ export interface AccordionInput extends Omit<Marko.Input<"ul">, `on${string}`> {
1414

1515
interface State {
1616
index: number;
17+
interacted: boolean;
1718
}
1819

1920
export interface Input extends WithNormalizedProps<AccordionInput> {}
2021

2122
class Accordion extends Marko.Component<Input, State> {
23+
onCreate() {
24+
this.state = {
25+
index: -1,
26+
interacted: false
27+
}
28+
}
29+
2230
onInput(input: Input) {
2331
this.state = {
2432
index: -1,
33+
interacted: this.state.interacted
2534
};
2635
}
2736

@@ -30,6 +39,7 @@ class Accordion extends Marko.Component<Input, State> {
3039
event: { originalEvent: Event; open: boolean },
3140
) {
3241
const { autoCollapse } = this.input;
42+
this.state.interacted = true;
3343
if (autoCollapse && event.open) {
3444
this.state.index = index;
3545
}

‎packages/ebayui-core/src/components/ebay-accordion/index.marko‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $ const {
1010

1111
<ul
1212
...processHtmlAttributes(htmlInput)
13-
class=["accordion", size === "large" && "accordion--large", inputClass]
13+
class=["accordion", size === "large" && "accordion--large", inputClass, state.interacted && "accordion--animated"]
1414
aria-roledescription=(a11yRoleDescription ?? "accordion")
1515
key="accordion-root"
1616
>

‎packages/ebayui-core/src/components/ebay-accordion/test/__snapshots__/test.browser.js.snap‎

Lines changed: 104 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -115,13 +115,8 @@ exports[`accordion > given the accordion in the default state > then it matches
115115
focusable="false"
116116
style="
117117
animation-duration: 0ms;
118-
animation: chevron-bounce-close var(--motion-duration-medium-1)
119-
var(--motion-easing-standard);
120118
display: inline-block;
121-
fill: var(
122-
--details-secondary-foreground-color,
123-
var(--color-foreground-secondary)
124-
);
119+
fill: var(--color-foreground-secondary);
125120
height: 16px;
126121
pointer-events: none;
127122
stroke-width: 0;
@@ -276,13 +271,8 @@ exports[`accordion > given the accordion in the default state > then it matches
276271
focusable="false"
277272
style="
278273
animation-duration: 0ms;
279-
animation: chevron-bounce-close var(--motion-duration-medium-1)
280-
var(--motion-easing-standard);
281274
display: inline-block;
282-
fill: var(
283-
--details-secondary-foreground-color,
284-
var(--color-foreground-secondary)
285-
);
275+
fill: var(--color-foreground-secondary);
286276
height: 16px;
287277
pointer-events: none;
288278
stroke-width: 0;
@@ -436,13 +426,8 @@ exports[`accordion > given the accordion in the default state > then it matches
436426
focusable="false"
437427
style="
438428
animation-duration: 0ms;
439-
animation: chevron-bounce-close var(--motion-duration-medium-1)
440-
var(--motion-easing-standard);
441429
display: inline-block;
442-
fill: var(
443-
--details-secondary-foreground-color,
444-
var(--color-foreground-secondary)
445-
);
430+
fill: var(--color-foreground-secondary);
446431
height: 16px;
447432
pointer-events: none;
448433
stroke-width: 0;
@@ -548,17 +533,36 @@ exports[`accordion > given the accordion in the default state > when first secti
548533
transition-delay: 0ms;
549534
transition-duration: 0ms
550535
"
551-
@@ -112,8 +116,8 @@
536+
@@ -112,8 +116,10 @@
552537
focusable="false"
553538
style="
554539
animation-duration: 0ms;
555-
- animation: chevron-bounce-close var(--motion-duration-medium-1)
556-
- var(--motion-easing-standard);
557540
+ animation: chevron-bounce-open var(--motion-duration-medium-1)
558541
+ var(--motion-easing-standard) var(--motion-duration-short-1);
559542
display: inline-block;
560-
fill: var(
561-
--details-secondary-foreground-color,
543+
- fill: var(--color-foreground-secondary);
544+
+ fill: currentcolor;
545+
height: 16px;
546+
pointer-events: none;
547+
stroke-width: 0;
548+
@@ -268,6 +274,8 @@
549+
focusable="false"
550+
style="
551+
animation-duration: 0ms;
552+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
553+
+ var(--motion-easing-standard);
554+
display: inline-block;
555+
fill: var(--color-foreground-secondary);
556+
height: 16px;
557+
@@ -423,6 +431,8 @@
558+
focusable="false"
559+
style="
560+
animation-duration: 0ms;
561+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
562+
+ var(--motion-easing-standard);
563+
display: inline-block;
564+
fill: var(--color-foreground-secondary);
565+
height: 16px;
562566
"
563567
`;
564568
@@ -572,6 +576,33 @@ exports[`accordion > given the accordion in the default state > when first secti
572576
bottom: 0px;
573577
content: "";
574578
left: 0px;
579+
@@ -112,6 +112,8 @@
580+
focusable="false"
581+
style="
582+
animation-duration: 0ms;
583+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
584+
+ var(--motion-easing-standard);
585+
display: inline-block;
586+
fill: var(--color-foreground-secondary);
587+
height: 16px;
588+
@@ -268,6 +270,8 @@
589+
focusable="false"
590+
style="
591+
animation-duration: 0ms;
592+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
593+
+ var(--motion-easing-standard);
594+
display: inline-block;
595+
fill: var(--color-foreground-secondary);
596+
height: 16px;
597+
@@ -423,6 +427,8 @@
598+
focusable="false"
599+
style="
600+
animation-duration: 0ms;
601+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
602+
+ var(--motion-easing-standard);
603+
display: inline-block;
604+
fill: var(--color-foreground-secondary);
605+
height: 16px;
575606
"
576607
`;
577608
@@ -622,17 +653,36 @@ exports[`accordion > given the accordion with autocollapse enabled > when first
622653
transition-delay: 0ms;
623654
transition-duration: 0ms
624655
"
625-
@@ -112,8 +116,8 @@
656+
@@ -112,8 +116,10 @@
626657
focusable="false"
627658
style="
628659
animation-duration: 0ms;
629-
- animation: chevron-bounce-close var(--motion-duration-medium-1)
630-
- var(--motion-easing-standard);
631660
+ animation: chevron-bounce-open var(--motion-duration-medium-1)
632661
+ var(--motion-easing-standard) var(--motion-duration-short-1);
633662
display: inline-block;
634-
fill: var(
635-
--details-secondary-foreground-color,
663+
- fill: var(--color-foreground-secondary);
664+
+ fill: currentcolor;
665+
height: 16px;
666+
pointer-events: none;
667+
stroke-width: 0;
668+
@@ -268,6 +274,8 @@
669+
focusable="false"
670+
style="
671+
animation-duration: 0ms;
672+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
673+
+ var(--motion-easing-standard);
674+
display: inline-block;
675+
fill: var(--color-foreground-secondary);
676+
height: 16px;
677+
@@ -423,6 +431,8 @@
678+
focusable="false"
679+
style="
680+
animation-duration: 0ms;
681+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
682+
+ var(--motion-easing-standard);
683+
display: inline-block;
684+
fill: var(--color-foreground-secondary);
685+
height: 16px;
636686
"
637687
`;
638688
@@ -646,7 +696,16 @@ exports[`accordion > given the accordion with autocollapse enabled > when first
646696
bottom: 0px;
647697
content: "";
648698
left: 0px;
649-
@@ -182,17 +182,20 @@
699+
@@ -112,6 +112,8 @@
700+
focusable="false"
701+
style="
702+
animation-duration: 0ms;
703+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
704+
+ var(--motion-easing-standard);
705+
display: inline-block;
706+
fill: var(--color-foreground-secondary);
707+
height: 16px;
708+
@@ -177,17 +179,20 @@
650709
<style>@scope{:scope{
651710
&::marker {font-size: 0px}
652711
}}</style>
@@ -675,24 +734,34 @@ exports[`accordion > given the accordion with autocollapse enabled > when first
675734
overflow-x: clip;
676735
overflow-y: clip;
677736
transition-delay: 0ms;
678-
@@ -262,6 +265,7 @@
737+
@@ -257,6 +262,7 @@
679738
animation-duration: 0ms;
680739
display: inline-flex;
681740
margin-inline-start: 8px;
682741
+ transform: rotate(180deg);
683742
transition-delay: 0ms;
684743
transition-duration: 0ms
685744
"
686-
@@ -273,8 +277,8 @@
745+
@@ -268,8 +274,10 @@
687746
focusable="false"
688747
style="
689748
animation-duration: 0ms;
690-
- animation: chevron-bounce-close var(--motion-duration-medium-1)
691-
- var(--motion-easing-standard);
692749
+ animation: chevron-bounce-open var(--motion-duration-medium-1)
693750
+ var(--motion-easing-standard) var(--motion-duration-short-1);
694751
display: inline-block;
695-
fill: var(
696-
--details-secondary-foreground-color,
752+
- fill: var(--color-foreground-secondary);
753+
+ fill: currentcolor;
754+
height: 16px;
755+
pointer-events: none;
756+
stroke-width: 0;
757+
@@ -423,6 +431,8 @@
758+
focusable="false"
759+
style="
760+
animation-duration: 0ms;
761+
+ animation: chevron-bounce-close var(--motion-duration-medium-1)
762+
+ var(--motion-easing-standard);
763+
display: inline-block;
764+
fill: var(--color-foreground-secondary);
765+
height: 16px;
697766
"
698767
`;

‎packages/evo-marko/src/tags/evo-accordion/index.marko‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export interface Input<Open extends number | number[] | undefined>
44
size?: "regular" | "large";
55
/**
66
* The `aria-roledescription` of the list
7-
*
7+
*
88
* English default to be overridden is `"accordion"`
99
*/
1010
a11yText: string;
@@ -26,11 +26,17 @@ export interface Input<Open extends number | number[] | undefined>
2626
}=input>
2727

2828
<let/open:=input.open>
29+
<let/interacted=false>
2930

3031
<ul
3132
...htmlInput
3233
aria-roledescription=a11yText
33-
class=["accordion", size === "large" && "accordion--large", inputClass]>
34+
class=[
35+
"accordion",
36+
size === "large" && "accordion--large",
37+
inputClass,
38+
interacted && "accordion--animated",
39+
]>
3440
<for|item, index| of=details>
3541
<li>
3642
<evo-details
@@ -39,6 +45,7 @@ export interface Input<Open extends number | number[] | undefined>
3945
Array.isArray(open) ? open.includes(index) : open === index
4046
)
4147
openChange(isOpen) {
48+
interacted = true;
4249
if (Array.isArray(open)) {
4350
const currentOpen = open;
4451
if (isOpen) {
@@ -51,7 +58,7 @@ export interface Input<Open extends number | number[] | undefined>
5158
) as Open;
5259
}
5360
} else {
54-
open = (isOpen ? index : -1) as Open
61+
open = (isOpen ? index : -1) as Open;
5562
}
5663
}/>
5764
</li>

0 commit comments

Comments
 (0)