Add basic Toast component

[willm0602]

Adds a basic version of a toast component that wraps Notifications and includes them on the bottom

Wanted to also leave a couple of notes before this gets merged

• I wasn't able to find any tests for components specifically in the codebase. Is there anywhere I can add these before we merge these?
• When I was testing this out, I wasn't able to initially since I got an issue, 'TZ' is not recognized as an internal or external command, operable program or batch file. I modified the test script in package.json to be SET TZ=UTC+4 vitest and that let the test suite run, but failed on six-issues, not sure if it's an issue with developing on windows OS

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[changeset-bot]

🦋 Changeset detected

Latest commit: e26bfa3

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

This PR includes changesets to release 1 package

Name	Type
svelte-ux	Patch

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

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
svelte-ux	✅ Ready (View Log)	Visit Preview	e26bfa3

[techniq]

I wasn't able to find any tests for components specifically in the codebase. Is there anywhere I can add these before we merge these?

I currently only have vitest setup for unit tests (mostly utils, example format.test.ts).

I would like to setup playwright for integration/browser tests and integrated into the CI pipeline, similar to shadcn-svelte and melt-ui's setup, but haven't had the time to tackle it yet. If that is an initiative you would like to get started, I would kindly review a PR 😁

When I was testing this out, I wasn't able to initially since I got an issue, 'TZ' is not recognized as an internal or external command, operable program or batch file. I modified the test script in package.json to be SET TZ=UTC+4 vitest and that let the test suite run, but failed on six-issues, not sure if it's an issue with developing on windows OS

Sadly most of the development occurs on Mac and thus a unix environment (and usually zsh or bash terminal). With that said, one of our contributors was using Windows and leveraging the WSL (he actually was the one to add the timezone environment variable, although he also switched to Mac later on).

I don't hear of much Windows open source development happening without using WSL nowadays, but I'm also pretty detached from that ecosystem (switched to Mac 10+ years ago).

If you're not using WSL, I would recommend setting it up and see if you have a better experience.

[techniq]

@willm0602 Thanks for the PR!

I left some notes, some of which might not be worth addressing in this PR, but thought it was helpful to put my thoughts down to see what future improvements, etc.

Other ideas we chatted about in Discord (putting here to more easily track) were:

• When you pointerover a notification, we should stop the timeout and on pointerout we start/resume in case you are interacting with it (or just needed more time to read the message
• Consider integrating Progress / ProgressCircle to show the countdown (probably best when we add the variant support)

[techniq]

If you do not select any packages when prompted for major and minor, it will produce a patch changeset (I think the flow is a little odd to be honest, but that's driven by the changesets project).

The flow is different when using changesets in a multi-package monorepo (like Svelte UX)...

vs a single-package repo (like LayerChart at the moment)...

The single package is much more straight forward.
At some point LayerChart might become multi-package.

[techniq]

With that said you can manually edit this .md file and just change minor to patch (all the CLI does is help you write this file, including generating a filename)

[techniq]

Not to feature creep this too much, but also consider a little bit more future state, I'm thinking the the type could be:

export type Toast = {
  title: string;
  description?: string;
  actions?: Record<string, Function>; // this will need more thought to support primary styling, etc
  icon?: IconInput;
  variant?: string;
  timeAdded: Date;
};

variant would need to wait til #86 is tackled, but it's not a big lift (mostly just taking the styles from the doc examples. See ToggleGroup for a semi-related example (there are other components with variant as well).

[techniq]

We would want to change text: string into an object to support the various additional inputs (description, icon, actions, etc)

[techniq]

I could see us adding a placement prop to control which of the 8 corners/edges to place the notifications (at least top-left, top, top-right, bottom-left, bottom, bottom-right).

you can see some examples of this in Drawer and Badge

[techniq]

It would also be good if Toast supported class overrides, either directly (<Toast classes={...}>) or via settings.

To support this, you would need to add a classes prop and also getting the classes defined in settings(...) using...

<script>
  ...

  export let classes: {
    root?: string;
    actions?: string;
    // ...any other internal element/component you might want to pass a class to
  } = {};
  const settingsClasses = getComponentClasses('Toast');
</script>

and change...

<div class="fixed bottom-0 left-1/2 translate-x-[-50%] z-50 gap-y-4">

to

<div
    class={cls(
      'Toast',
      'fixed bottom-0 left-1/2 translate-x-[-50%] z-50 gap-y-4',
      settingsClasses.root,
      classes.root,
      $$props.class
    )}
>

[techniq]

Few other ideas I forgot to mention. It might make sense to put an instance of the toastStore in settings() like we do for themes, locales, nav drawer, etc. We could also consider adding an instance of <Toast> within <AppLayout> wired up to this instance.

[willm0602]

@techniq started working on the changes and got an issue where I can't get the toasters to appear over the elements of the app layout that used fixed position (so the side and topnav) even after adjusting the z-indexes

Was wondering if you had any ideas for fixing this?

[techniq]

@techniq started working on the changes and got an issue where I can't get the toasters to appear over the elements of the app layout that used fixed position (so the side and topnav) even after adjusting the z-indexes

Was wondering if you had any ideas for fixing this?

Modal elements like Drawer and Dialog "portal" their content to the bottom of <body> via the portal action and doing similar within Notification should solve the issue.

[techniq]

@willm0602 I started work on improving/simplifying the Notification component by support props (not requiring but still supporting slots) such as <Notification title="..." description="..." actions={...}> and also supporting color/variant/etc props. Take a look at the PR preview.

I also have a PR to use @layerstack/* packages for most all svelte stores/actions/etc. I'll plan to merge these hopefully in the next few days (the later is a much bigger change).

This will impact your PR some, but not sure where toastStore should live just yet (it's rather tied to Svelte UX Toast/Notification and not sure it makes much sense to be within @layerstack/*. In some ways I think of it similar to AppBar/AppLayout/NavItem and their use of showDrawer within settings.