Re: [w3ctag/design-reviews] A toast UI element (#385)

I think the main issues developers will have with the proposal of a `<toast>` component:

1. It's very opinionated in terms of how it's presented, styles, etc and some will feel this should really live in userland / libraries.

2. Compared to other tools in the browser like `IntersectionObserver` which are low level tools, this on the face of it seems pretty high level and more of a vanity project to scratch a certain itch.

Rather than having a whole new component, would it be better to instead have a low-level tool where you can position toast-like elements, or tooltips, and leave any opinionated styling or implementation details to developers? It seems the easiest part of building toast-like elements is the UI, but the difficult bit comes with:

1. Accessibility
2. Stacking multiple elements
3. Positioning of elements easily based on text-based descritior e.g. "bottom-right" "top-left" or around other elements so they remain visible on screen.

Each of these could be solved by low-level tools which would would serve multiple purposes not only for toasts but other UI and components, such as tooltips etc. I'm thinking something like:

```js
const position = new PositionedElement(document.querySelector('#tooltip'), {
    // Calculate best possible position so element is visible on screen
    // First try top-center, then bottom-center, etc.
    position: ['top-center', 'bottom-center'],

    // Calculate relative to the root element, if not supplied will default to document root.
    root: document.querySelector('#tooltip-container')
});
position.translate(); // translates / moves the actual element to the best calculated position (one time)
position.track(); // Automatically translate / track whenever browser is resized / scrolled.
position.getRect(); // Returns the `Rect` object for the current best calculated position.
```

Maybe this is already kind of possible with tools that `Rect` provides - but I think having a well defined api for this would help with not only toasts but also tooltips / other UI patterns found on the web.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/385#issuecomment-503615705