feat(react): add toast component #2279

takurinton · 2023-04-07T01:35:21Z

supports

Pauses closing on hover, focus and window blur
Supports hotkey to jump to toast viewport
Pressing esc when focused on toast closes it
Fully customizable toast components, positions, delay times, and animations
Global values can be specified from the Provider and reflected in individual toasts.
Globally defined values can be updated by individual toasts
- If global and toast values do not exist, default values will be applied
Fully follow the ARIA design pattern

not supported

Supports closing via swipe gesture
Toast with close button
Default toast (nothing is rendered when render function is empty)

Since this library is called "Floating UI", we can and should do more than just support elements that use anchor positioning — for example, a non-anchored floating Dialog or Drawer component are already possible to build using the existing interaction primitives, but a component like a Toast or anything draggable isn't despite them also being "floating" elements.

I agree with you. I was wanting a toast component that uses floating-ui.
I created the prototype as an experiment.

usage

Brief description of how it is used (how it is intended to be used)

(edited)

export const Main = () => (
  <ToastProvider placement="top-center">
    <Component />
  </ToastProvider>
);

const Component = () => {
  const {toast} = useToast();

  return (
    <div>
      <button
        onClick={() =>
          toast({
            placement: 'top',
            render: () => <div>Hello</div>,
          })
        }
      >
        Add Toast
      </button>
  </div>
  );
};

worries

I currently have this implementation in the visual test directory, is that correct?
Should I create hooks and incorporate swipe gestures into floating-ui?
I need assistance as my knowledge of accessibility is a little lacking.
The API to manipulate the toast is not yet fully prepared here

netlify · 2023-04-07T01:35:28Z

✅ Deploy Preview for vibrant-gates-22c214 canceled.

Name	Link
🔨 Latest commit	`cfb60e0`
🔍 Latest deploy log	https://app.netlify.com/sites/vibrant-gates-22c214/deploys/6439239cb33b7600088e55fe

rollingversions · 2023-04-07T01:35:29Z

There is no change log for this pull request yet.

Create a changelog

atomiks · 2023-04-07T10:29:38Z

What do you think of Chakra UI's custom component API, Radix's, or Sonner?

@mihkeleidast, @FezVrasta any thoughts?

One thing we should do is make sure we only provide functional styles and no other (decorative) styling. i.e. just the position/stacking, to be in line with the rest of how the library works.

const toast = useToast();
return (
  <button 
    onClick={() => {
      toast({
        placement: 'top',
        render: () => <div>Hello</div>
      });
    }} 
  />
);

I currently have this implementation in the visual test directory, is that correct?

Yep!

Should I create hooks and incorporate swipe gestures into floating-ui?

Don't worry about this for now

I need assistance as my knowledge of accessibility is a little lacking.

I'll try to review these parts in a sec

packages/react/test/visual/components/Toast.tsx

takurinton · 2023-04-07T10:55:08Z

Thanks @atomiks

What do you think of Chakra UI's custom component API, Radix's, or Sonner?

I have used react-toast-notification's as a reference here.
However, development of this library has stopped, and we certainly feel it makes sense to refer to a library that is still active today.

One thing we should do is make sure we only provide functional styles and no other (decorative) styling

I think this is correct, and a chakra-ui interface might be nice.

atomiks · 2023-04-07T11:04:42Z

I just realized an absolute flexbox column won't work with transitions to adjust toast positions (no layout animation, without framer-motion at least)... so translateY(...) to adjust the position of toasts in a stack as toasts are removed from the stack is required. I imagine the logic would be:

Enter: check the height of all toasts in the stack to add it to the end
Leave: calculate the leaving toast's height, then propagate the change to all other entered toasts as necessary

FezVrasta · 2023-04-07T11:16:48Z

Depends, if you make the toast disappear by first making it invisible and then reducing its height until it reaches 0 you can use flexbox

takurinton · 2023-04-08T09:24:28Z

@FezVrasta

Thanks comment.
One question I have is that the current toast has the following structure, with useFloating in the <ul> section.

<ul role="region" aria-live="polite">
  <li role="status" aria-atomic="true">
     Toast content
  </li>
</ul>

So I can't manipulate open, is this structure wrong? Should I manage <li> with useFloating?
Also, is it possible to operate open or close on a listRef like the current one that holds <li> refs?

takurinton · 2023-04-09T00:13:56Z

packages/react/test/visual/components/Toast.tsx

+  if (placements[0] === 'top' || placements[0] === 'bottom') {
+    return {
+      margin: '0 auto',
+      top: placements[0] === 'top' ? '20px' : undefined,
+      bottom: placements[0] === 'bottom' ? '20px' : undefined,
+      left:
+        placements[1] === undefined
+          ? 0
+          : placements[1] === 'start'
+          ? '20px'
+          : 'auto',
+      right:
+        placements[1] === undefined
+          ? 0
+          : placements[1] === 'end'
+          ? '20px'
+          : 'auto',
+    };
+  }


@atomiks
I implemented to get the position of toast.
This doesn't look very smart, is it best?
I would be happy to use the floating-ui feature to specify the position relative to the viewport, but I can't think of anything. Any suggestions?

takurinton · 2023-04-10T10:13:08Z

Currently, this is how it behaves locally for me.
The toast add and remove appears to be implemented correctly.

I feel that the style is a bit forced and a11y is not guaranteed in some areas, but I feel that it is generally good.

Screen.Recording.2023-04-10.at.18.59.44.mov

@atomiks
There are several points that I would like to confirm.

Should I be able to specify the position from a global context as in Configuring toast globally?
Is it sufficient to specify the same placement as that of the placement in floting-ui using the toast function?
Do I need to attach useFloating to each individual toast? (I think this is necessary if you use useDismiss to close the toast)

atomiks · 2023-04-10T12:46:16Z

Should we be able to specify the position from a global context as in Configuring toast globally?

I imagine this would be useful yes

Is it sufficient to specify the same placement as that of the placement in floting-ui using the toast function?

The placement strings should be all bottom and all top sides (e.g. top, top-end, bottom-start, etc). right and left sides don't apply since the toasts are always vertically stacked.

Do we need to attach useFloating to each individual toast? (I think this is necessary if you use useDismiss to close the toast)

For transition styles to work properly yes, however I'm not sure if pressing esc should dismiss all of them simultaneously or the most recent (or old) one only.

Some notes on the API design:

There shouldn't be any Tailwind styling outside the render function (like for the li and ul nodes), only inline styles, since they're functional. The consumer should specify all decorative styles themselves externally
Transitions should be external as well with full customizability - the max-height should start transitioning out as the same time as opacity but it seems there's a delay atm?
The user should be able to customize delay time
We somehow need to incorporate FloatingFocusManager for cases where the toast is interactive (e.g. has an Undo button inside it for instance)

takurinton · 2023-04-10T19:28:48Z

Thank you @atomiks !!!
I'll make some revisions regarding that.

I have some more questions:

Should we also apply useFloating to the entire element (the ul node)?
- I feel like it's unnecessary as long as we apply it to the li nodes, but what do you think?
- I believe this depends on which toast you want to close as you say
Should toast really be navigable with tabs and closed with esc? For example, react-toastify only allows focusing on the close button, while chakra-ui doesn't seem to allow focusing at all. What do you think??

…lay time

takurinton · 2023-04-12T06:25:44Z

current location

You can use placement to specify the position. You can specify top,top-start,top-end,bottom,bottom-start,bottom-end.
Example

<button 
  onClick={() => {
    toast({
      placement: 'top',
      render: () => <div>Hello</div>
    });
  }} 
/>

Added deley to the toast function argument to allow individual adjustment of the time until the toast closes.
Example

<button 
  onClick={() => {
    toast({
      deley: 1000
      render: () => <div>Hello</div>
    });
  }} 
/>

Next, I made the transition fully customizable. This allows you to pass the same properties that you can pass to UseTransitionStylesProps. This is due to the useTransitionStyle when specifying open and close animations in the toast component.
If you write a partial, only that will be applied, and the default values will be applied for the other parts.
Example

<button 
  onClick={() => {
    toast({
      transition: {
        duration: { open: 500, close: 1000 }
      },
      render: () => <div>Hello</div>
    });
  }} 
/>

The render function can specify an onClose callback, which can be used to close the toast at the implementer's timing.
Example

<button 
  onClick={() => {
    toast({
      render: (onClose) => (
        <div style={{ display: 'flex' }}>
          <div>hello</div>
          <button onClick={onClose}>close</button>
        </div>
      )
    });
  }} 
/>

It would be useful to be able to specify these functions globally via Provider. I will work on that.
Also, clearAll, close, id, . . etc., it would be useful if APIs such as clearAll, close, id, ... etc. are provided, so I will consider their implementation as well.

takurinton · 2023-04-12T20:11:30Z

properties can now be passed from the provider.
If it is defined in a toast function, it will take precedence, otherwise the global value will be referenced.
If undefined for both provider and toast functions, the default value is applied.
Example

export const Main = () => (
  // This provider will specify the `top-center` placement for all toasts.
  <ToastProvider placement="top-center">
    <Component />
  </ToastProvider>
);

const Component = () => {
  const {toast} = useToast();

  return (
    <div>
      <button
        onClick={() =>
          toast({
            // This will be placed at `top` because the `placement` specified by the toast function has priority.
            placement: 'top',
            render: () => <div>Hello</div>,
          })
        }
      >
        Add Toast to top
      </button>
      <button
        onClick={() =>
          // This will specify the `top-center` specified by the provider, 
          // since `placement` is not specified in the toast function.
          toast({
            render: () => <div>Hello</div>,
          })
        }
      >
        Add Toast to top-center
      </button>
    </div>
  );
};

takurinton · 2023-04-13T12:11:14Z

Enabled dismiss, which only works when focusing on toast.

I set up hooks for dismiss, but still did not define a prop like isCloseable or the associated close button.
This is because we have defined a callback called onClose in the render function, which we believe allows for flexibility on the part of the user.

takurinton · 2023-04-13T12:15:23Z

packages/react/test/visual/components/Toast.tsx

+    });
+    const ref = useMergeRefs([propRef, refs.setFloating]);
+    const dismiss = useDismiss(context, {
+      enabled: focus,


Enable this only during focus.
Failure to do so will cause an unintended toast to close when you press esc.

takurinton · 2023-04-13T12:15:27Z

packages/react/test/visual/components/Toast.tsx

+        order={['floating']}
+        initialFocus={-1}


When new toast is displayed, the focus is on it by default. Then, when you press esc, the newest toast will close automatically, and then the focus is removed so that no toast will close when you press esc.
Therefore, the toast closes only when the focus is intentionally set to floating element.

takurinton · 2023-04-13T20:49:58Z

The closeAll function has been created. This allows you to close all toasts.
Example

const Component = () => {
  const {closeAll} = useToast();

  return <Button onClick={closeAll}>Close All</Button>;
};

Next, the render callback in the toast function can now accept an id.
This is useful when you want to do something with an id. The following can do the same thing.
Example

const Component = () => {
  const {close} = useToast();

  return (
    <Button
      onClick={() =>
        toast({
          render: (id, onClose) => (
            <div className="w-[300px] bg-white p-4 mb-4 rounded-lg shadow-lg">
              Hello 
              {/* same behavior */}
              <button onClick={onClose}>close using onClose</button>
              <button onClick={() => close(id)}>close using close function</button>
            </div>
          ),
        })
      }
    >
    Add Toast
  </Button>
};

takurinton · 2023-04-14T10:00:57Z

Added autoClose prop.
If this is set to false, the toast will not close automatically. default true.
Example

<button 
  onClick={() => {
    toast({
      autoClose: false,
      render: () => <div>Hello</div>
    });
  }} 
/>

atomiks · 2023-04-19T13:01:26Z

@takurinton sorry for the delay looking into this and thank you so much for working on it. I will take a proper look and review soon

atomiks · 2023-04-23T20:07:08Z

I've had the chance to dive deeper into this, and I really appreciate the effort you've put into it. However, there are quite a few aspects that need to be adjusted to align better with the library's goals (and I'm personally not even sure how this will work — it needs some more exploration), but I believe your contribution has potential.

I won't be able to merge it at the moment, but feel free to continue developing this as an external package for others to use in the meantime. Integrating it seamlessly with the other hooks and components in the library is challenging in terms of how it will be designed, and could take some time to figure out the best API, but I will work on it eventually.

Thank you :))

takurinton · 2023-04-24T21:20:11Z

@atomiks
Thanks for looking this!! And sorry for the many things I have not done.
I look forward to a future implementation of floating-ui with absolute positioning relative to the viewport!
Thanks again!

atomiks · 2023-10-14T19:56:33Z

Currently closing old unmerged PRs :)

feat(react): wip add toast component

331f602

atomiks reviewed Apr 7, 2023

View reviewed changes

packages/react/test/visual/components/Toast.tsx Outdated Show resolved Hide resolved

atomiks reviewed Apr 7, 2023

View reviewed changes

packages/react/test/visual/components/Toast.tsx Outdated Show resolved Hide resolved

atomiks reviewed Apr 7, 2023

View reviewed changes

packages/react/test/visual/components/Toast.tsx Outdated Show resolved Hide resolved

takurinton added 3 commits April 8, 2023 10:29

fix: toast interface

db9a55d

add: useTimeout hook

eec0dc7

fix: type

1355392

add: toast position from the toast placement

b093fe8

takurinton commented Apr 9, 2023

View reviewed changes

takurinton added 2 commits April 9, 2023 21:39

add: close animation

21e06df

fix: style using tailwind

93c10fd

takurinton added 3 commits April 12, 2023 07:08

fix: li node using useFloating

9536897

refactor type and comment

d9a4dd2

add: interface to allow external control of toast's transition and de…

55836f9

…lay time

feat: all properties can be passed from provider

40e53c5

add: dismiss event with FloatingFocusManager

f8b1fb4

takurinton commented Apr 13, 2023

View reviewed changes

takurinton added 2 commits April 14, 2023 05:32

add: closeAll function with requestClose prop

97ce902

add: id to render callback

6efd139

feat: autoClose property

cfb60e0

takurinton requested a review from atomiks April 14, 2023 10:11

atomiks closed this Oct 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): add toast component #2279

feat(react): add toast component #2279

takurinton commented Apr 7, 2023 •

edited

netlify bot commented Apr 7, 2023 •

edited

rollingversions bot commented Apr 7, 2023

atomiks commented Apr 7, 2023 •

edited

takurinton commented Apr 7, 2023

atomiks commented Apr 7, 2023

FezVrasta commented Apr 7, 2023

takurinton commented Apr 8, 2023

takurinton Apr 9, 2023

takurinton commented Apr 10, 2023 •

edited

atomiks commented Apr 10, 2023 •

edited

takurinton commented Apr 10, 2023

takurinton commented Apr 12, 2023

takurinton commented Apr 12, 2023 •

edited

takurinton commented Apr 13, 2023 •

edited

takurinton Apr 13, 2023

takurinton Apr 13, 2023 •

edited

takurinton commented Apr 13, 2023

takurinton commented Apr 14, 2023

atomiks commented Apr 19, 2023

atomiks commented Apr 23, 2023

takurinton commented Apr 24, 2023

atomiks commented Oct 14, 2023

feat(react): add toast component #2279

feat(react): add toast component #2279

Conversation

takurinton commented Apr 7, 2023 • edited

usage

worries

netlify bot commented Apr 7, 2023 • edited

✅ Deploy Preview for vibrant-gates-22c214 canceled.

rollingversions bot commented Apr 7, 2023

atomiks commented Apr 7, 2023 • edited

takurinton commented Apr 7, 2023

atomiks commented Apr 7, 2023

FezVrasta commented Apr 7, 2023

takurinton commented Apr 8, 2023

takurinton Apr 9, 2023

Choose a reason for hiding this comment

takurinton commented Apr 10, 2023 • edited

atomiks commented Apr 10, 2023 • edited

takurinton commented Apr 10, 2023

takurinton commented Apr 12, 2023

takurinton commented Apr 12, 2023 • edited

takurinton commented Apr 13, 2023 • edited

takurinton Apr 13, 2023

Choose a reason for hiding this comment

takurinton Apr 13, 2023 • edited

Choose a reason for hiding this comment

takurinton commented Apr 13, 2023

takurinton commented Apr 14, 2023

atomiks commented Apr 19, 2023

atomiks commented Apr 23, 2023

takurinton commented Apr 24, 2023

atomiks commented Oct 14, 2023

takurinton commented Apr 7, 2023 •

edited

netlify bot commented Apr 7, 2023 •

edited

atomiks commented Apr 7, 2023 •

edited

takurinton commented Apr 10, 2023 •

edited

atomiks commented Apr 10, 2023 •

edited

takurinton commented Apr 12, 2023 •

edited

takurinton commented Apr 13, 2023 •

edited

takurinton Apr 13, 2023 •

edited