Skip to content

CollapsibleCard: add animations #76378

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

Merged
ciampo merged 7 commits into from
Mar 17, 2026
Merged

CollapsibleCard: add animations #76378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8489821
Animate chevron rotation on CollapsibleCard toggle
ciampo Mar 10, 2026
50a6ea4
Add fade + translate animation to CollapsibleCard content
ciampo Mar 10, 2026
3758b07
Refine content animation: open-only with delay, no exit animation
ciampo Mar 10, 2026
848a1ea
Animate whole card height
ciampo Mar 13, 2026
726c50b
CHANGELOG
ciampo Mar 13, 2026
80164c7
use correct CSS layer
ciampo Mar 13, 2026
0de2140
Add stacked storybook example
ciampo Mar 16, 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
1 change: 1 addition & 0 deletions packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
- `Notice`: Use `Text` component for `Title` and `Description` typography ([#75870](https://github.com/WordPress/gutenberg/pull/75870)).
- `Card`, `CollapsibleCard`: update padding to match legacy `Card` component ([#76368](https://github.com/WordPress/gutenberg/pull/76368)).
- `CollapsibleCard`: move trigger to the header ([#76265](https://github.com/WordPress/gutenberg/pull/76265)).
- `CollapsibleCard`: add animations ([#76378](https://github.com/WordPress/gutenberg/pull/76378)).

## 0.8.0 (2026-03-04)

Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/card/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
.root {
--wp-ui-card-padding: var(--wpds-dimension-padding-2xl);
--wp-ui-card-header-content-gap: var(--wpds-dimension-gap-xl);
--wp-ui-card-header-content-margin: calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));

display: flex;
flex-direction: column;
Expand All @@ -28,7 +29,7 @@
/* Custom vertical gap between header and content */
.header + .content {
padding-block-start: 0;
margin-block-start: calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));
margin-block-start: var(--wp-ui-card-header-content-margin);
}

.fullbleed {
Expand Down
18 changes: 15 additions & 3 deletions packages/ui/src/collapsible-card/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,32 @@
import { forwardRef } from '@wordpress/element';
import clsx from 'clsx';
import * as Card from '../card';
import * as Collapsible from '../collapsible';
import styles from './style.module.css';
import type { ContentProps } from './types';

/**
* The collapsible content area of the card. Hidden when collapsed,
* visible when expanded.
*/
export const Content = forwardRef< HTMLDivElement, ContentProps >(
function CollapsibleCardContent( { render, ...restProps }, ref ) {
function CollapsibleCardContent(
{ className, render, children, ...restProps },
ref
) {
return (
<Collapsible.Panel
ref={ ref }
render={ <Card.Content render={ render } /> }
className={ clsx( styles.content, className ) }
{ ...restProps }
/>
>
<Card.Content
className={ styles[ 'content-inner' ] }
render={ render }
>
{ children }
</Card.Content>
</Collapsible.Panel>
);
}
);
51 changes: 51 additions & 0 deletions packages/ui/src/collapsible-card/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,57 @@ export const Disabled: Story = {
},
};

/**
* Multiple collapsible cards stacked vertically, simulating a typical
* settings-panel or FAQ-style layout.
*/
export const Stacked: Story = {
parameters: { controls: { disable: true } },
render: () => (
<div
style={ {
display: 'flex',
flexDirection: 'column',
gap: 'var(--wpds-dimension-gap-lg)',
} }
>
{ [
'General',
'Advanced',
'Accessibility',
'Performance',
'Privacy',
'Notifications',
].map( ( title ) => (
<CollapsibleCard.Root key={ title }>
<CollapsibleCard.Header>
<Card.Title>{ title }</Card.Title>
</CollapsibleCard.Header>
<CollapsibleCard.Content>
<Text>
Configure all { title.toLowerCase() } settings for
your site. Changes here affect how your site behaves
across all pages and posts.
</Text>
<Text>
Review each option carefully before saving. Some
changes may require a page reload to take effect.
Hover over individual options for more details about
what they control.
</Text>
<Text>
If you&apos;re unsure about a setting, you can
always reset to defaults using the button at the
bottom of this section. Your previous configuration
will be saved as a backup.
</Text>
</CollapsibleCard.Content>
</CollapsibleCard.Root>
) ) }
</div>
),
};

/**
* Visual comparison: a `CollapsibleCard` (open) next to a regular `Card`
* to verify identical spacing and layout.
Expand Down
28 changes: 28 additions & 0 deletions packages/ui/src/collapsible-card/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@

/* For an outline that looks like `IconButton`'s */
border-radius: var(--wpds-border-radius-sm);

@media not (prefers-reduced-motion) {
transition: rotate 0.15s ease-out;
}
}

.header[data-panel-open] .header-trigger {
Expand All @@ -33,9 +37,33 @@
.header[data-disabled] .header-trigger {
color: var(--wpds-color-fg-interactive-neutral-disabled);
}

.content {
height: var(--collapsible-panel-height);
overflow: hidden;
margin-block-start: var(--wp-ui-card-header-content-margin);

&[hidden]:not([hidden="until-found"]) {
display: none;
}
Comment on lines +46 to +48

@ciampo ciampo Mar 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes to DOM structure and styles actually now make adding hiddenUntilFound trivial (cc @mirka who suggested it in #76280 (review) )

@ciampo ciampo Mar 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#76498


&[data-starting-style],
&[data-ending-style] {
height: 0;
}

@media not (prefers-reduced-motion) {
transition: all 150ms ease-out;
}
}

}

@layer wp-ui-compositions {
.content-inner {
padding-block-start: 0;
}

.header {
display: flex;
flex-direction: row;
Expand Down
Loading