Add WithCloseHandlers story #69688

Rishit30G · 2025-03-25T05:35:10Z

What?

Closes #69675

Why?

This PR is necessary to add functionality for onClose and onFocusOutside

How?

This PR adds a new story WithCloseHandlers which will showcase the functionality of onClose and onFocusOutside

Testing Instructions

Run npm run storybook:dev
Search for Popover story
Visit the WithCloseHandlers story to check the onClose and onFocusOutside functionality

Screencast

Screen.Recording.2025-03-26.at.1.37.46.PM.mov

packages/components/src/popover/stories/index.story.tsx

github-actions · 2025-03-26T08:15:44Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Rishit30G · 2025-03-26T08:16:40Z

@ciampo please review this PR whenever you have time. Thanks!

packages/components/src/popover/stories/index.story.tsx

ciampo · 2025-03-28T16:43:14Z

packages/components/src/popover/stories/index.story.tsx

@@ -255,3 +258,94 @@ export const WithSlotOutsideIframe: StoryObj< typeof Popover > = {
 		...Default.args,
 	},
 };
+
+export const WithCloseHandlers: StoryObj< typeof Popover > = {
+	decorators: [


Generally speaking, I'd like to understand if we can abstract the decorator to avoid reperition with the default story — although it's definitely not a priority at the moment, let's first get the new example to look & work as expected.

Rishit30G · 2025-03-28T17:24:48Z

Thanks for the extensive review @ciampo! I'll work on them 🙇‍♂️

Rishit30G · 2025-04-04T05:50:33Z

Updated the PR 👍🏻

packages/components/src/popover/stories/index.story.tsx

ciampo

Thank you for your patience iterating over this!

Code changes LGTM, we just need a CHANGELOG entry and then we'll be able to merge 🙏

packages/components/src/popover/stories/index.story.tsx

Rishit30G · 2025-04-08T14:03:59Z

Will update the changelog in the packages/components/CHANGELOG.md

Rishit30G · 2025-04-08T14:16:59Z

Updated the CHANGELOG.md

changelog.txt

ciampo · 2025-04-10T09:48:00Z

Thank you, @Rishit30G !

As a follow-up, it would be great to try to refactor Popover stories to remove some duplication between the newly added story and existing ones — in case you have capaticy to work on it

Rishit30G · 2025-04-10T11:16:13Z

Thanks @ciampo for your proactive reviews and feedbacks! 💯

As a follow-up, it would be great to try to refactor Popover stories to remove some duplication between the newly added story and existing ones — in case you have capaticy to work on it

Well noted 📝
Please find the issue and PR linked here: #69878

Rishit30G · 2025-04-10T11:18:47Z

Thank you for your patience iterating over this!

Likewise 👏🏻 👏🏻

* Add WithCloseHandlers story * Add focusOnMount * Update popover size and layout * Fix: replace decorator with render function * Modify event handlers and render functions * Refactor close and focus outside handlers in Popover story * Refactor event handler types and text in Popover story * Update focusOnMount argument * Add changelog and update focusOnMount props * Update changelog --- Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>

Rishit30G added 2 commits March 25, 2025 11:04

Add WithCloseHandlers story

7a32be2

Add focusOnMount

137c1a4

Rishit30G commented Mar 26, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

Rishit30G marked this pull request as ready for review March 26, 2025 08:15

Rishit30G requested a review from ajitbohra as a code owner March 26, 2025 08:15

t-hamano added [Type] Developer Documentation Documentation for developers [Package] Components /packages/components Storybook Storybook and its stories for components labels Mar 27, 2025

ciampo requested a review from a team March 28, 2025 16:08

ciampo reviewed Mar 28, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Show resolved Hide resolved

ciampo reviewed Mar 28, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

ciampo reviewed Mar 28, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

ciampo reviewed Mar 28, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

ciampo reviewed Mar 28, 2025

View reviewed changes

Rishit30G added 2 commits March 29, 2025 12:30

Update popover size and layout

9d9ba95

Fix: replace decorator with render function

f03f3f3

Rishit30G requested a review from ciampo April 4, 2025 05:50

ciampo reviewed Apr 4, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

ciampo reviewed Apr 4, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

ciampo reviewed Apr 4, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

Rishit30G added 2 commits April 5, 2025 10:59

Modify event handlers and render functions

a7dd50c

Refactor close and focus outside handlers in Popover story

c3f1fb8

Rishit30G requested a review from ciampo April 7, 2025 06:01

ciampo reviewed Apr 7, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

ciampo reviewed Apr 7, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

ciampo reviewed Apr 7, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

Refactor event handler types and text in Popover story

bbe48a2

Rishit30G requested a review from ciampo April 8, 2025 03:34

ciampo reviewed Apr 8, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

Update focusOnMount argument

feab5a7

Rishit30G requested a review from ciampo April 8, 2025 13:46

ciampo approved these changes Apr 8, 2025

View reviewed changes

packages/components/src/popover/stories/index.story.tsx Outdated Show resolved Hide resolved

Add changelog and update focusOnMount props

749f4f2

Update changelog

ce766aa

Rishit30G requested a review from ciampo April 8, 2025 14:18

ciampo reviewed Apr 8, 2025

View reviewed changes

changelog.txt Outdated Show resolved Hide resolved

Merge branch 'trunk' into feat/add-with-close-handlers-story

a263b9f

Rishit30G requested a review from ciampo April 8, 2025 17:01

ciampo merged commit 37dd713 into WordPress:trunk Apr 10, 2025
61 checks passed

github-actions bot added this to the Gutenberg 20.7 milestone Apr 10, 2025

Rishit30G mentioned this pull request Apr 10, 2025

Storybook: Refactor Popover Stories #69878

Open

Add WithCloseHandlers story #69688

Add WithCloseHandlers story #69688

Conversation

Rishit30G commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screencast

Uh oh!

Uh oh!

github-actions bot commented Mar 26, 2025

Uh oh!

Rishit30G commented Mar 26, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ciampo Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

Rishit30G commented Mar 28, 2025

Uh oh!

Rishit30G commented Apr 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ciampo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Rishit30G commented Apr 8, 2025

Uh oh!

Rishit30G commented Apr 8, 2025

Uh oh!

Uh oh!

Uh oh!

ciampo commented Apr 10, 2025

Uh oh!

Rishit30G commented Apr 10, 2025

Uh oh!

Rishit30G commented Apr 10, 2025

Uh oh!

Uh oh!

Rishit30G commented Mar 25, 2025 •

edited

Loading