From 06be9bf0d44519cc40f5e8df9670342e53e6c714 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 17 Feb 2025 13:46:45 +0700
Subject: [PATCH 1/3] feat: disable transition on mount when initialIsOpen
---
.../src/components/accordion/accordion.tsx | 1 +
.../accordion_children.styles.ts | 9 +++++++++
.../accordion_children/accordion_children.tsx | 19 ++++++++++++++++++-
3 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/packages/eui/src/components/accordion/accordion.tsx b/packages/eui/src/components/accordion/accordion.tsx
index 3ceb0af6bd4..7964ba60ce0 100644
--- a/packages/eui/src/components/accordion/accordion.tsx
+++ b/packages/eui/src/components/accordion/accordion.tsx
@@ -234,6 +234,7 @@ export class EuiAccordionClass extends Component<
isLoading={isLoading}
isLoadingMessage={isLoadingMessage}
isOpen={this.isOpen}
+ initialIsOpen={initialIsOpen}
>
{children}
</EuiAccordionChildren>
diff --git a/packages/eui/src/components/accordion/accordion_children/accordion_children.styles.ts b/packages/eui/src/components/accordion/accordion_children/accordion_children.styles.ts
index aed75c8447b..e575df81d1c 100644
--- a/packages/eui/src/components/accordion/accordion_children/accordion_children.styles.ts
+++ b/packages/eui/src/components/accordion/accordion_children/accordion_children.styles.ts
@@ -59,6 +59,15 @@ export const euiAccordionChildWrapperStyles = (
users on Chrome & FF */
${euiFocusRing(euiThemeContext)}
`,
+ // choosing to override transition instead of applying it conditionally
+ // to keep a more logical style appliance:
+ // default case = has transition as part of default styles (all cases expect initial isOpen=true when initialIsOpen=true)
+ // special case: no transition for initial isOpen=true when initialIsOpen=true
+ noTransition: css`
+ ${euiCanAnimate} {
+ transition: none;
+ }
+ `,
isClosed: css`
${logicalCSS('height', 0)}
opacity: 0;
diff --git a/packages/eui/src/components/accordion/accordion_children/accordion_children.tsx b/packages/eui/src/components/accordion/accordion_children/accordion_children.tsx
index d119d9b725b..86ae5dd2c09 100644
--- a/packages/eui/src/components/accordion/accordion_children/accordion_children.tsx
+++ b/packages/eui/src/components/accordion/accordion_children/accordion_children.tsx
@@ -10,6 +10,7 @@ import React, {
FunctionComponent,
HTMLAttributes,
useCallback,
+ useEffect,
useMemo,
useState,
} from 'react';
@@ -28,7 +29,12 @@ import {
type _EuiAccordionChildrenProps = HTMLAttributes<HTMLDivElement> &
Pick<
EuiAccordionProps,
- 'role' | 'children' | 'paddingSize' | 'isLoading' | 'isLoadingMessage'
+ | 'role'
+ | 'children'
+ | 'paddingSize'
+ | 'initialIsOpen'
+ | 'isLoading'
+ | 'isLoadingMessage'
> & {
isOpen: boolean;
};
@@ -41,6 +47,7 @@ export const EuiAccordionChildren: FunctionComponent<
isLoading,
isLoadingMessage,
isOpen,
+ initialIsOpen,
...rest
}) => {
/**
@@ -61,12 +68,22 @@ export const EuiAccordionChildren: FunctionComponent<
/**
* Wrapper
*/
+ const [hasTransition, setHasTransition] = useState(false);
const wrapperStyles = euiAccordionChildWrapperStyles(euiTheme);
const wrapperCssStyles = [
wrapperStyles.euiAccordion__childWrapper,
isOpen ? wrapperStyles.isOpen : wrapperStyles.isClosed,
+ initialIsOpen && !hasTransition && isOpen && wrapperStyles.noTransition,
];
+ /* Controls enabling opening/closing transitions on first interaction
+ when initialIsOpen=true; this only runs once */
+ useEffect(() => {
+ if (initialIsOpen && !isOpen && !hasTransition) {
+ setHasTransition(true);
+ }
+ }, [isOpen, initialIsOpen, hasTransition]);
+
/**
* Update the accordion wrapper height whenever the accordion opens, and also
* whenever the child content updates (which will change the height)
From b19e5c2ef34f8127969242154740ac55c497f4ca Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 17 Feb 2025 13:50:31 +0700
Subject: [PATCH 2/3] test: update snapshot
---
.../components/accordion/__snapshots__/accordion.test.tsx.snap | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 451b489a4a3..e78a5da860f 100644
--- a/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -830,7 +830,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
</div>
<div
aria-labelledby="generated-id"
- class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isOpen"
+ class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isOpen-noTransition"
id="12"
role="group"
style="block-size: 0;"
From 7558d20ff99f435a4a6fcb035afc2bd4001d1863 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 17 Feb 2025 14:05:23 +0700
Subject: [PATCH 3/3] chore: add changelog
---
packages/eui/changelogs/upcoming/8327.md | 2 ++
1 file changed, 2 insertions(+)
create mode 100644 packages/eui/changelogs/upcoming/8327.md
diff --git a/packages/eui/changelogs/upcoming/8327.md b/packages/eui/changelogs/upcoming/8327.md
new file mode 100644
index 00000000000..72ceb401d2f
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8327.md
@@ -0,0 +1,2 @@
+- Updated `EuiAccordion` to prevent content from being transitioned on initial render when `initialIsOpen=true`
+