Skip to content

[DRAFT] Rebased copy of #9015 #9035

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 15 commits into from
Closed

[DRAFT] Rebased copy of #9015 #9035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
70656d0
feat(EuiFlyout): move resizable flyout logic to a hook and make all f…
tkajtoch Sep 4, 2025
bcdc324
fix(EuiFlyout): move `minWidth` fallback value to `useEuiFlyoutResiza…
tkajtoch Sep 8, 2025
7ac2ba9
chore(EuiFlyout): cleanup unused styles
tkajtoch Sep 8, 2025
16afe83
WIP
tkajtoch Sep 8, 2025
b6ff7c1
feat: update flyout opening and closing animation keyframes
tkajtoch Sep 9, 2025
ce910f1
chore: update flyout manager stories to use the new `isOpen` prop
tkajtoch Sep 9, 2025
8eaa5df
feat: remove unnecessary managed flyout opening animation
tkajtoch Sep 9, 2025
1ae5ee1
feat(EuiManagedFlyout): support `isOpen` prop
tkajtoch Sep 9, 2025
c3b32e3
feat(EuiManagedFlyout): fix styles when in inactive stage
tkajtoch Sep 9, 2025
65af926
feat(EuiManagedFlyout): fix z-index when opening another main flyout
tkajtoch Sep 9, 2025
e2b1271
chore: add TODO about STAGE_CLOSING
tkajtoch Sep 9, 2025
2fd6086
feat(EuiFlyout): Update opening and closing keyframes to visually slo…
tkajtoch Sep 11, 2025
07e9c85
refactor(EuiManagedFlyout): Refactor `onAnimationEnd` handling of `us…
tkajtoch Sep 11, 2025
d1428e0
test(EuiManagedFlyout): handle `isOpen` prop
tkajtoch Sep 15, 2025
a40a53d
feat(EuiManagedFlyout): Use `isOpen` prop in flyout_manager.stories.tsx
tkajtoch Sep 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/eui/src/components/flyout/flyout.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,23 @@ export const EuiFlyoutComponent = forwardRef(
styles[side],
];

const resizableButtonStyles = [
styles.resizable.button,
isPushed && side === 'left' && styles.resizable.buttonPushLeft,
isPushed && side === 'right' && styles.resizable.buttonPushRight,
!isPushed && side === 'left' && styles.resizable.buttonOverlayLeft,
!isPushed && side === 'right' && styles.resizable.buttonOverlayRight,
!isPushed && ownFocus && styles.resizable.buttonNoOverlay,
!isPushed &&
ownFocus &&
side === 'left' &&
styles.resizable.buttonNoOverlayLeft,
!isPushed &&
ownFocus &&
side === 'right' &&
styles.resizable.buttonNoOverlayRight,
];

const classes = classnames(
'euiFlyout',
openStateToClassNameMap[openState],
Expand Down Expand Up @@ -646,6 +663,9 @@ export const EuiFlyoutComponent = forwardRef(
{flyoutMenuProps && <EuiFlyoutMenu {...flyoutMenuProps} />}
{resizable && (
<EuiFlyoutResizeButton
isHorizontal
indicator="border"
css={resizableButtonStyles}
type={type}
side={side}
ownFocus={ownFocus}
Expand Down
50 changes: 35 additions & 15 deletions packages/eui/src/components/flyout/manager/activity_stage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,24 +96,44 @@ export const useFlyoutActivityStage = ({
}, [isActive, hasChild, layoutMode, level, ctx, flyoutId, stage]);

/**
* OPENING / RETURNING -> ACTIVE
* CLOSING -> INACTIVE
* BACKGROUNDING -> BACKGROUNDED
* Get the stage to transition to for given current stage.
* Returns `null` if stage should remain unchanged.
*
* Stage transitions:
* - OPENING / RETURNING -> ACTIVE
* - CLOSING -> INACTIVE
* - BACKGROUNDING -> BACKGROUNDED
*/
const getNextStage = (
stage: EuiFlyoutActivityStage
): EuiFlyoutActivityStage | null => {
switch (stage) {
case STAGE_OPENING:
case STAGE_RETURNING:
return STAGE_ACTIVE;

case STAGE_CLOSING:
return STAGE_INACTIVE;

case STAGE_BACKGROUNDING:
return STAGE_BACKGROUNDED;
}

return null;
};

/**
* onAnimationEnd event handler that must be passed to EuiFlyout.
* It handles transitions between stages and updates activity stage
* in EuiFlyoutManagerContext.
*/
const onAnimationEnd = useCallback(() => {
const s = stageRef.current;
const next: EuiFlyoutActivityStage | null =
s === STAGE_OPENING || s === STAGE_RETURNING
? STAGE_ACTIVE
: s === STAGE_CLOSING
? STAGE_INACTIVE
: s === STAGE_BACKGROUNDING
? STAGE_BACKGROUNDED
: null;
const currentStage = stageRef.current;
const nextStage = getNextStage(currentStage);

if (next && next !== s) {
ctx?.dispatch?.(setActivityStage(flyoutId, next));
stageRef.current = next;
if (nextStage && nextStage !== currentStage) {
ctx?.dispatch?.(setActivityStage(flyoutId, nextStage));
stageRef.current = nextStage;
}
}, [ctx, flyoutId]);

Expand Down
152 changes: 75 additions & 77 deletions packages/eui/src/components/flyout/manager/flyout_child.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,86 +225,84 @@ const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
<EuiButton onClick={openMain}>Open Main Flyout</EuiButton>
)}

{isMainOpen && (
<EuiFlyout
session={true}
id="flyout-manager-playground-main"
size={mainSize}
type={mainFlyoutType}
pushMinBreakpoint={pushMinBreakpoint}
maxWidth={mainMaxWidth}
ownFocus={false}
resizable={mainFlyoutResizable}
{...args}
aria-label={`Main Flyout Menu (${mainSize})`}
onClose={closeMain}
>
<EuiFlyoutBody>
<EuiText>
<p>This is the main flyout content.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
neque sequi illo, cum rerum quia ab animi velit sit incidunt
inventore temporibus eaque nam veritatis amet maxime maiores
optio quam?
</p>
</EuiText>
<EuiSpacer />
<EuiFlyout
isOpen={isMainOpen}
session={true}
id="flyout-manager-playground-main"
size={mainSize}
type={mainFlyoutType}
pushMinBreakpoint={pushMinBreakpoint}
maxWidth={mainMaxWidth}
ownFocus={false}
resizable={mainFlyoutResizable}
{...args}
onClose={closeMain}
>
<EuiFlyoutMenu title={`Main Flyout Menu (${mainSize})`} />
<EuiFlyoutBody>
<EuiText>
<p>This is the main flyout content.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
neque sequi illo, cum rerum quia ab animi velit sit incidunt
inventore temporibus eaque nam veritatis amet maxime maiores optio
quam?
</p>
</EuiText>
<EuiSpacer />

{!isChildOpen ? (
<EuiButton onClick={openChild}>Open child panel</EuiButton>
) : (
<EuiButton onClick={closeChild}>Close child panel</EuiButton>
)}
{isChildOpen && (
<EuiFlyout
id="flyout-manager-playground-child"
size={childSize}
backgroundStyle={childBackgroundStyle}
maxWidth={childMaxWidth}
ownFocus={false}
resizable={childFlyoutResizable}
{...args}
aria-label={`Child Flyout Panel (${childSize})`}
onClose={closeChild}
>
<EuiFlyoutBody>
<EuiText>
<p>This is the child flyout content.</p>
<p>Size restrictions apply:</p>
<ul>
<li>When main panel is 's', child can be 's', or 'm'</li>
<li>When main panel is 'm', child is limited to 's'</li>
</ul>
<EuiSpacer />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum neque sequi illo, cum rerum quia ab animi velit
sit incidunt inventore temporibus eaque nam veritatis amet
maxime maiores optio quam?
</p>
</EuiText>
</EuiFlyoutBody>
{showFooter && (
<EuiFlyoutFooter>
<EuiText>
<p>Child flyout footer</p>
</EuiText>
</EuiFlyoutFooter>
)}
{/* Footer is optional */}
</EuiFlyout>
)}
</EuiFlyoutBody>
{showFooter && (
<EuiFlyoutFooter>
{!isChildOpen ? (
<EuiButton onClick={openChild}>Open child panel</EuiButton>
) : (
<EuiButton onClick={closeChild}>Close child panel</EuiButton>
)}
<EuiFlyout
isOpen={isChildOpen}
id="flyout-manager-playground-child"
size={childSize}
backgroundStyle={childBackgroundStyle}
maxWidth={childMaxWidth}
ownFocus={false}
resizable={childFlyoutResizable}
{...args}
onClose={closeChild}
>
<EuiFlyoutMenu title={`Child Flyout Menu (${childSize})`} />
<EuiFlyoutBody>
<EuiText>
<p>Main flyout footer</p>
<p>This is the child flyout content.</p>
<p>Size restrictions apply:</p>
<ul>
<li>When main panel is 's', child can be 's', or 'm'</li>
<li>When main panel is 'm', child is limited to 's'</li>
</ul>
<EuiSpacer />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum neque sequi illo, cum rerum quia ab animi velit sit
incidunt inventore temporibus eaque nam veritatis amet maxime
maiores optio quam?
</p>
</EuiText>
</EuiFlyoutFooter>
)}
</EuiFlyout>
)}
</EuiFlyoutBody>
{showFooter && (
<EuiFlyoutFooter>
<EuiText>
<p>Child flyout footer</p>
</EuiText>
</EuiFlyoutFooter>
)}
{/* Footer is optional */}
</EuiFlyout>
</EuiFlyoutBody>
{showFooter && (
<EuiFlyoutFooter>
<EuiText>
<p>Main flyout footer</p>
</EuiText>
</EuiFlyoutFooter>
)}
</EuiFlyout>
</>
);
};
Expand Down
77 changes: 38 additions & 39 deletions packages/eui/src/components/flyout/manager/flyout_fill_mode.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,61 +185,60 @@ const Session: React.FC<FlyoutChildStoryArgs> = (args) => {
<EuiButton onClick={openMain}>Open Main Flyout</EuiButton>
)}

{isMainOpen && (
<EuiFlyout
isOpen={isMainOpen}
session={true}
size={mainSize}
type={mainFlyoutType}
maxWidth={mainMaxWidth}
ownFocus={false}
{...rest}
onClose={closeMain}
>
<EuiFlyoutMenu title={`Main Flyout Menu (${mainSize})`} />
<EuiFlyoutBody>
<EuiText>
<p>This is the main flyout content.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
neque sequi illo, cum rerum quia ab animi velit sit incidunt
inventore temporibus eaque nam veritatis amet maxime maiores optio
quam?
</p>
</EuiText>
<EuiSpacer />

{!isChildOpen ? (
<EuiButton onClick={openChild}>Open child panel</EuiButton>
) : (
<EuiButton onClick={closeChild}>Close child panel</EuiButton>
)}
</EuiFlyoutBody>
<EuiFlyout
session={true}
size={mainSize}
type={mainFlyoutType}
maxWidth={mainMaxWidth}
isOpen={isChildOpen}
size={childSize}
backgroundStyle={childBackgroundStyle}
maxWidth={childMaxWidth}
ownFocus={false}
aria-label={`Main Flyout Menu (${mainSize})`}
{...rest}
onClose={closeMain}
onClose={closeChild}
>
<EuiFlyoutMenu title={`Child Flyout Menu (${childSize})`} />
<EuiFlyoutBody>
<EuiText>
<p>This is the main flyout content.</p>
<p>This is the child flyout content.</p>
<EuiSpacer />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
neque sequi illo, cum rerum quia ab animi velit sit incidunt
inventore temporibus eaque nam veritatis amet maxime maiores
optio quam?
</p>
</EuiText>
<EuiSpacer />

{!isChildOpen ? (
<EuiButton onClick={openChild}>Open child panel</EuiButton>
) : (
<EuiButton onClick={closeChild}>Close child panel</EuiButton>
)}
</EuiFlyoutBody>
{isChildOpen && (
<EuiFlyout
size={childSize}
backgroundStyle={childBackgroundStyle}
maxWidth={childMaxWidth}
ownFocus={false}
aria-label={`Child Flyout Menu (${childSize})`}
{...rest}
onClose={closeChild}
>
<EuiFlyoutBody>
<EuiText>
<p>This is the child flyout content.</p>
<EuiSpacer />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum neque sequi illo, cum rerum quia ab animi velit sit
incidunt inventore temporibus eaque nam veritatis amet
maxime maiores optio quam?
</p>
</EuiText>
</EuiFlyoutBody>
</EuiFlyout>
)}
</EuiFlyout>
)}
</EuiFlyout>
</>
);
};
Expand Down
Loading