Skip to content

[EuiCallOut] Use resize observer instead of container queries #9727

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

Open
mgadewoll wants to merge 3 commits into
base: feat/callout-toast-ui-enhancements
Choose a base branch
from
Open

[EuiCallOut] Use resize observer instead of container queries #9727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ce95b6
refactor: replace native CSS container-queries with resize observer
mgadewoll Jun 18, 2026
ac7e9c5
test: update snapshots
mgadewoll Jun 18, 2026
662e9e3
docs(Storybook): add wrapper kitchensink story
mgadewoll Jun 18, 2026
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
16 changes: 8 additions & 8 deletions packages/eui/src/components/call_out/__snapshots__/call_out.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`EuiCallOut is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down Expand Up @@ -45,7 +45,7 @@ exports[`EuiCallOut props heading h1 is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down Expand Up @@ -75,7 +75,7 @@ exports[`EuiCallOut props heading h2 is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down Expand Up @@ -105,7 +105,7 @@ exports[`EuiCallOut props heading h3 is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down Expand Up @@ -135,7 +135,7 @@ exports[`EuiCallOut props heading h4 is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down Expand Up @@ -165,7 +165,7 @@ exports[`EuiCallOut props heading h5 is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down Expand Up @@ -195,7 +195,7 @@ exports[`EuiCallOut props heading h6 is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down Expand Up @@ -225,7 +225,7 @@ exports[`EuiCallOut props heading p is rendered 1`] = `
style="--euiCallOutTypeColor: #0B64DD;"
>
<div
class="css-4ee039-wrapper"
class="css-1slkmya-wrapper"
>
<div
class="css-wlziyu-body"
Expand Down
126 changes: 115 additions & 11 deletions packages/eui/src/components/call_out/call_out.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,27 @@ import {
import { LOKI_SELECTORS } from '../../../.storybook/loki';
import { EuiButton } from '../button';
import { EuiCallOut, EuiCallOutProps } from './call_out';
import { EuiFlexGroup } from '../flex';
import { EuiFlexGroup, EuiFlexItem } from '../flex';
import { EuiSpacer } from '../spacer';
import { EuiText } from '../text';
import { EuiPanel } from '../panel';
import { EuiPopover } from '../popover';
import { EuiTitle } from '../title';

const title = 'Callout title';
const text = 'A short callout text';
const textLong =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
const defaultActionProps = {
primary: {
children: 'Primary action',
onClick: action('primary onClick'),
},
secondary: {
children: 'Secondary action',
onClick: action('secondary onClick'),
},
};

const meta: Meta<EuiCallOutProps> = {
title: 'Display/EuiCallOut',
Expand Down Expand Up @@ -88,16 +101,7 @@ export const WithActions: Story = {
args: {
title,
text,
actionProps: {
primary: {
children: 'Primary action',
onClick: action('primary onClick'),
},
secondary: {
children: 'Secondary action',
onClick: action('secondary onClick'),
},
},
actionProps: defaultActionProps,
},
};

Expand Down Expand Up @@ -365,3 +369,103 @@ export const KitchenSinkCustomChildren: Story = {
);
},
};

export const WrapperKitchenSink: Story = {
tags: ['vrt-only'],
render: function Render() {
return (
<div>
<EuiTitle size="s">
<p>within EuiPanel</p>
</EuiTitle>

<EuiPanel>
<EuiCallOut
title={title}
text={textLong}
actionProps={defaultActionProps}
/>
</EuiPanel>

<EuiSpacer size="xxl" />

<EuiTitle size="s">
<p>within EuiPopover</p>
</EuiTitle>

<EuiPopover
button={<EuiButton>Show popover</EuiButton>}
isOpen
anchorPosition="downCenter"
closePopover={() => {}}
aria-label="Popover containing a CallOut"
>
<EuiCallOut
title={title}
text={textLong}
actionProps={defaultActionProps}
/>
<p>{textLong}</p>
</EuiPopover>

<div style={{ height: 250 }} />

<EuiPopover
button={<EuiButton>Show popover</EuiButton>}
isOpen
anchorPosition="downCenter"
closePopover={() => {}}
aria-label="Popover containing a CallOut"
>
<EuiCallOut
title={title}
text={textLong}
actionProps={defaultActionProps}
/>
</EuiPopover>

<div style={{ height: 250 }} />

<EuiTitle size="s">
<p>within EuiFlexGroup</p>
</EuiTitle>

<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiCallOut
title={title}
text={textLong}
actionProps={defaultActionProps}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiCallOut
title={title}
text={textLong}
actionProps={defaultActionProps}
/>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="xxl" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiCallOut
title={title}
text={textLong}
actionProps={defaultActionProps}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCallOut
title={title}
text={textLong}
actionProps={defaultActionProps}
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
},
};
74 changes: 12 additions & 62 deletions packages/eui/src/components/call_out/call_out.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,46 +14,9 @@ import {
preventForcedColors,
} from '../../global_styling';
import { UseEuiTheme } from '../../services';
import { EuiCallOutSize } from './types';

/** Maximum reading width for `text` and `children` slots. */
const TEXT_MAX_WIDTH = 1200;
const CONTAINER_NAME = 'euiCallOut';
const CQC_LAYOUTS = ['superNarrow', 'wide'] as const;
type EuiCallOutLayouts = (typeof CQC_LAYOUTS)[number];
const CQC_BREAKPOINTS: Record<
EuiCallOutSize,
Record<EuiCallOutLayouts, string>
> = {
s: {
superNarrow: '(max-width: 400px)',
wide: '(min-width: 800px)',
},
m: {
superNarrow: '(max-width: 600px)',
wide: '(min-width: 1000px)',
},
};

const withContainerQuery = ({
layout,
styles,
}: {
layout: EuiCallOutLayouts;
styles: string;
}) => {
return Object.keys(CQC_BREAKPOINTS)
.map(
(sizeKey) => `
@container ${CONTAINER_NAME}--${sizeKey} ${
CQC_BREAKPOINTS[sizeKey as EuiCallOutSize][layout]
} {
${styles}
}
`
)
.join('\n');
};

export const euiCallOutStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
Expand All @@ -76,11 +39,9 @@ export const euiCallOutStyles = (euiThemeContext: UseEuiTheme) => {

return {
euiCallOut: css`
container-type: inline-size;
container-name: ${CONTAINER_NAME};
position: relative;
display: flex;
inline-size: 100%;
max-inline-size: 100%;
align-items: center;
border: ${euiTheme.border.width.thin} solid;
border-radius: ${borderRadius};
Expand All @@ -104,14 +65,10 @@ export const euiCallOutStyles = (euiThemeContext: UseEuiTheme) => {
}

&:where([data-size='s']) {
container-name: ${CONTAINER_NAME} ${CONTAINER_NAME}--s;

${logicalShorthandCSS('padding', `${paddingSizes.s} ${paddingSizes.m}`)}
}

&:where([data-size='m']) {
container-name: ${CONTAINER_NAME} ${CONTAINER_NAME}--m;

padding: ${paddingSizes.m};
}
`,
Expand All @@ -129,13 +86,10 @@ export const euiCallOutStyles = (euiThemeContext: UseEuiTheme) => {
gap: ${euiTheme.size.m};
}

${withContainerQuery({
layout: 'wide',
styles: `
flex-direction: row;
gap: ${euiTheme.size.xxl};
`,
})}
&:where([data-layout='wide'] &) {
flex-direction: row;
gap: ${euiTheme.size.xxl};
}
`,
// handles icon + text layout
body: css`
Expand Down Expand Up @@ -232,8 +186,7 @@ export const euiCallOutStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('margin-left', euiTheme.size.xl)}
}

/* uses container query directly as it should apply generically independent of size */
@container ${CONTAINER_NAME} ${CQC_BREAKPOINTS.s.superNarrow} {
&:where([data-layout='superNarrow'] &) {
flex-wrap: wrap;

/* use full width actions */
Expand All @@ -243,15 +196,12 @@ export const euiCallOutStyles = (euiThemeContext: UseEuiTheme) => {
}
}

${withContainerQuery({
layout: 'wide',
styles: `
${logicalCSS('margin-left', '0')}
align-self: center;
flex-shrink: 0;
flex-direction: row-reverse;
`,
})}
&:where([data-layout='wide'] &) {
${logicalCSS('margin-left', '0')}
align-self: center;
flex-shrink: 0;
flex-direction: row-reverse;
}
`,
};
};
Expand Down
8 changes: 7 additions & 1 deletion packages/eui/src/components/call_out/call_out.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
type EuiNotificationIconType,
} from '../notification_icon/notification_icon';

import { useLayoutObserver } from './use_layout_observer';
import {
EuiCallOutAction,
EuiCallOutActionPrimaryProps,
Expand Down Expand Up @@ -133,6 +134,11 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
const { euiTheme } = useEuiTheme();
const color = getCallOutColor(_color);

/* Uses resize observer to determine the container width/layout instead of native container queries,
because callouts can be placed in containers without defined size (absolute positioned, no-grow flex layout etc.)
where container queries would collapse by design instead of adjusting to the content dimensions. */
const panelRef = useLayoutObserver(size, ref);

const borderColors = useEuiBorderColorCSS();
const styles = useEuiMemoizedStyles(euiCallOutStyles);
const cssStyles = [
Expand Down Expand Up @@ -307,7 +313,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
// uses custom padding
paddingSize="none"
className={classes}
panelRef={ref}
panelRef={panelRef}
grow={false}
style={{ ...cssVariables, ...style }}
data-size={size}
Expand Down
Loading
Loading