feat(pie-toast-provider): DSW-2222 toast provider basic functionality

[raoufswe]

Describe your changes (can list changeset entries if preferable)

• Adds the ability to create a toast via the provider
• Adds the ability to clear toasts via the provider
• The provider should handle the order priority when tests are added
• Docs (Draft)

Author Checklist (complete before requesting a review, do not delete any)

• I have performed a self-review of my code.
• I have added thorough tests where applicable (unit / component / visual).
• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have reviewed visual test updates properly before approving.
• If changes will affect consumers of the package, I have created a changeset entry.
• If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

---

Testing

How do I test my changes?

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

Reviewer 2

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7b0a454

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[raoufswe]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@raoufswe Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install

[raoufswe]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@raoufswe Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install

[pie-design-system-bot]

	Fails
🚫	You have unchecked checklist items outside the "Not-applicable Checklist items" section. Please ensure all unchecked checkboxes are moved to the appropriate section.
🚫	You have unchecked checklist items in Reviewer 1's section. Please ensure all items are addressed before approval.
🚫	You have unchecked checklist items in Reviewer 2's section. Please ensure all items are addressed before approval.

Generated by 🚫 dangerJS against 7b0a454

[fernandofranca]

Would it be ok to move the indentation of these buttons click handlers content?

Suggested change

	<pie-button
	@click=${() => {
	toaster.create({
	message: 'Low Priority Info',
	variant: 'info',
	});
	<pie-button
	@click=${() => {
	toaster.create({
	message: 'Low Priority Info',
	variant: 'info',
	});

[raoufswe]

it's auto-formatted on save for me 🙄 are you getting the same thing locally?

Screen.Recording.2024-12-02.at.13.06.43.mov

[fernandofranca]

What happens when a consumer mistakenly adds a second Toast Provider to an app?

[raoufswe]

We currently assume only one toast provider, rendered at the root level of the consumer app, and toasts are displayed in the body as specified in design specs here

However, this might change as designers plan to support rendering toasts within modals (sub-containers) and this will be addressed once we receive the complete design requirements and will probably require the usage of multiple providers either identified by ids or querying the closest provider in the DOM tree when toaster.create is called.

[fernandofranca]

I understand that is expected to have a single provider at the moment, that's why I ask what happens if the user does a mistake. Everything still works perfectly when more than one provider is in the DOM? Should we help the user to avoid this mistake?