Convert the `Snackbar` component to TypeScript #45472

kienstra · 2022-11-01T22:10:24Z

What?

Convert the Snackbar component to TypeScript

Why?

As part of an effort to convert @wordpress/components to TypeScript

How?

Mainly by adding types to the Snackbar and SnackbarList components

Testing Instructions

npm run storybook:dev
Expected: The Storybook still works

Screenshots or screencast

Follow-up

SnackbarList is not very well-documented (it doesn't even have a README) and prior to this PR, didn't have Storybook examples either. We should re-organize the folder structure, improve the docs and come up with a better Storybook strategy (e.g. use subcomponents and merge Snackbar and SnackbarList in the same file)
We should refactor the Notice component to TypeScript and re-use its types in Snackbar
I came across a framer-motion bug when clicking rapidly on two Snackbars in a list — the second Snackbar goes transparent but doesn't get fully removed
The timeout logic for Snackbar to be dismissed works in a bit of an unexpected way (snackbar items don't get dismissed in order
Take isDismissible prop from notice data is not taken into account by Snackbar (although this could be on purpose)
The Snackbar icon (passed through its icon prop) is not vertically centered, doesn't seem to work well with WordPress icons

codesandbox · 2022-11-01T22:10:27Z

Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

packages/components/src/snackbar/list.tsx

packages/components/src/snackbar/types.ts

packages/components/src/snackbar/README.md

kienstra · 2022-11-02T05:28:31Z

Hi @ciampo,
Would you have time to review this? Thanks so much for helping me with the ColorPalette one.

Thanks, Marco!

ciampo

THank you @kienstra for your work here!

I've left a few comments, I'll take another look at the code (including Storybook) once they've been addressed

Let's leave the work on the README last, so that we can sync it with whatever updates have been made to the component.

packages/components/src/snackbar/README.md

packages/components/src/snackbar/types.ts

packages/components/src/snackbar/list.tsx

packages/components/src/snackbar/types.ts

packages/components/src/snackbar/index.tsx

packages/components/src/snackbar/types.ts

packages/components/src/snackbar/list.tsx

packages/components/src/snackbar/types.ts

kienstra · 2022-11-02T16:05:45Z

Thanks a lot for reviewing this, Marco! I'll apply your suggestions today.

…dex.tsx Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

…pes.ts Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Thanks to Marco's suggestion, as spokenMessage comes from getNotices(), not React.

Move Snackbar to the bottom of CHANGELOG > Internal

kienstra · 2022-11-03T21:12:05Z

Hi @ciampo,
Thanks for your ideas and code. Just finished with your suggestions.

kienstra · 2022-11-04T21:30:09Z

Also, I'll be out until Tuesday, November 8th.

kienstra · 2022-11-14T17:36:39Z

Hi @ciampo,
Would you have time for another round of review?

Thanks for your huge amount of patience on my PRs 😄

ciampo · 2022-11-15T09:15:07Z

Hey @kienstra , I've been partially AFK last week and will be a bit slow to respond this week too — but I'll definitely get back to you!

ciampo

Just a few tweaks, and then we're good to merge! Thank you 🙏

packages/components/src/snackbar/README.md

packages/components/src/snackbar/index.tsx

…ADME.md Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

kienstra · 2022-11-15T18:55:23Z

Thanks, @ciampo! Just applied your suggestions.

No hurry responding, thanks for responding when you're AFK.

ciampo

LGTM 🚀

Thank you for your work on this one!

kienstra · 2022-11-16T16:17:39Z

Thanks so much, Marco! You're so patient.

kienstra added 2 commits November 1, 2022 16:05

Refactor Snackbar component to TypeScript

3b3d02c

Merge branch 'trunk' into update/snackbar-to-ts

013457f

kienstra mentioned this pull request Nov 1, 2022

Convert the Snackbar component to TypeScript #42648

Closed

Add a CHANGELOG entry for this PR

9e03b01

kienstra commented Nov 1, 2022

View reviewed changes

packages/components/src/snackbar/list.tsx Outdated Show resolved Hide resolved

kienstra commented Nov 1, 2022

View reviewed changes

packages/components/src/snackbar/types.ts Show resolved Hide resolved

Reference SnackbarProps for message and politeness

29d4913

kienstra commented Nov 1, 2022

View reviewed changes

packages/components/src/snackbar/README.md Show resolved Hide resolved

kienstra marked this pull request as ready for review November 1, 2022 22:47

kienstra requested a review from ajitbohra as a code owner November 1, 2022 22:47

Wrap the politness type with NonNullable

aa275b5

ciampo assigned kienstra Nov 2, 2022

ciampo requested review from mirka, ciampo and chad1008 November 2, 2022 07:59

ciampo added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Nov 2, 2022

ciampo mentioned this pull request Nov 2, 2022

Refactor @wordpress/components package to TypeScript #35744

Closed

ciampo reviewed Nov 2, 2022

View reviewed changes

mirka added this to In progress (owned) ⏳ in WordPress Components via automation Nov 2, 2022

kienstra and others added 7 commits November 2, 2022 10:30

Commit Marco's suggestion: Update packages/components/src/snackbar/in…

0e591cd

…dex.tsx Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Commit Marco's suggestion: Update packages/components/src/snackbar/ty…

61f5caa

…pes.ts Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Paste Marco's TODO about moving WPNotice to the Notice component

5636934

Change spokenMessage and children to string

7b0c570

Thanks to Marco's suggestion, as spokenMessage comes from getNotices(), not React.

Change the type of icon to ReactNode

ecb2387

Apply Marco's suggestion for listRef's type

cef1524

Commit Marco's removal of noop

2027878

kienstra added 9 commits November 3, 2022 13:42

Alphabetize props

84071c6

Remove markdown syntax, shorten JSDoc lines

70bfe59

Commit Marco's suggestion for README.md

4f823d3

Merge in trunk, resolve conflict

9da6473

Move Snackbar to the bottom of CHANGELOG > Internal

Delete syntax from merge I forgot to delete

8bab6ac

Restore CHANGELOG entries I deleted

db6898f

Commit Marco's suggestion for the politeness prop

3939a0c

Remove and empty line between 2 lines

b42cfab

Remove reference to default, as there is one already

7adcc0d

Merge in trunk, resolve conflict in components/CHANGELOG.md

650d0bd

ciampo reviewed Nov 15, 2022

View reviewed changes

packages/components/src/snackbar/README.md Outdated Show resolved Hide resolved

packages/components/src/snackbar/README.md Outdated Show resolved Hide resolved

packages/components/src/snackbar/index.tsx Outdated Show resolved Hide resolved

kienstra and others added 4 commits November 15, 2022 12:27

Commit Marco's suggestion: Update packages/components/src/snackbar/RE…

8c33d6d

…ADME.md Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Commit Marco's suggestion: Update packages/components/src/snackbar/RE…

fe394e6

…ADME.md Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Restore the JSDoc, using Marco's suggestion

b145a58

Merge in trunk, resolve conflict

fc45167

ciampo approved these changes Nov 16, 2022

View reviewed changes

ciampo merged commit 1a2f1ab into WordPress:trunk Nov 16, 2022

WordPress Components automation moved this from In progress (owned) ⏳ to Done 🎉 Nov 16, 2022

github-actions bot added this to the Gutenberg 14.7 milestone Nov 16, 2022

kienstra deleted the update/snackbar-to-ts branch November 16, 2022 16:17

ciampo mentioned this pull request Nov 16, 2022

Snackbar: misc improvements #45824

Open

6 tasks

ciampo mentioned this pull request Jan 9, 2023

Notice: Remove knobs in stories #46956

Merged

chad1008 mentioned this pull request Jan 17, 2023

Notice: refactor to TypeScript #47118

Merged

t-hamano mentioned this pull request Dec 8, 2023

Fixed snackbar console error #38365

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert the `Snackbar` component to TypeScript #45472

Convert the `Snackbar` component to TypeScript #45472

kienstra commented Nov 1, 2022 •

edited by ciampo

codesandbox bot commented Nov 1, 2022

kienstra commented Nov 2, 2022 •

edited

ciampo left a comment

kienstra commented Nov 2, 2022

kienstra commented Nov 3, 2022 •

edited

kienstra commented Nov 4, 2022

kienstra commented Nov 14, 2022

ciampo commented Nov 15, 2022

ciampo left a comment

kienstra commented Nov 15, 2022

ciampo left a comment

kienstra commented Nov 16, 2022

Convert the Snackbar component to TypeScript #45472

Convert the Snackbar component to TypeScript #45472

Conversation

kienstra commented Nov 1, 2022 • edited by ciampo

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Follow-up

codesandbox bot commented Nov 1, 2022

kienstra commented Nov 2, 2022 • edited

ciampo left a comment

Choose a reason for hiding this comment

kienstra commented Nov 2, 2022

kienstra commented Nov 3, 2022 • edited

kienstra commented Nov 4, 2022

kienstra commented Nov 14, 2022

ciampo commented Nov 15, 2022

ciampo left a comment

Choose a reason for hiding this comment

kienstra commented Nov 15, 2022

ciampo left a comment

Choose a reason for hiding this comment

kienstra commented Nov 16, 2022

Convert the `Snackbar` component to TypeScript #45472

Convert the `Snackbar` component to TypeScript #45472

kienstra commented Nov 1, 2022 •

edited by ciampo

kienstra commented Nov 2, 2022 •

edited

kienstra commented Nov 3, 2022 •

edited