How do you show a toast message? #963

velara3 · 2020-10-17T15:30:51Z

How do you show a toast message? Is there an alert.show() or alert.hide() API?

I'm looking at the documentation here.

https://opensource.adobe.com/spectrum-web-components/components/toast

I can see how to create the UI of one using the code:

<sp-toast>This is important information that you should read, soon.</sp-toast>

The text was updated successfully, but these errors were encountered:

velara3 · 2020-10-17T15:59:43Z

I found the API tab :P and I'm able to show it by adding the toast to the page:

<sp-toast id="toast1" variant="positive">This is a toast message.</sp-toast>

And I have a button that toggles the view:

<sp-button onclick="toast1.open = !toast1.open">Click me</sp-button>

A few things,

1). the padding and margins seem to be off:

I looked in the CSS and web tools shows that CSS variables are not set:

I'm guessing this is probably related to how I'm using it from a CDN.

2). how do I make the toast slide or fade in from the bottom of the screen like I've seen in some apps?

3). How do I have it hidden initially. I've set display to none but then toast.open does not work.

4). Is there an Alert class that I can use that will show a generic toast from the bottom of the screen with a user message? Something like:

Alert.show("This a toast message!", Alert.INFO);

Westbrook · 2020-10-19T12:36:08Z

Once you have a reference to an alert element, the intended API is to leverage alert.open = true/false; to open and close the alert.

Could you share a code snippet of the toast where you're seeing spacing errors? I'm not seeing that with something like: https://webcomponents.dev/edit/pMuI5yjgGBKZYfVd9a0N but would be happy to help track down the cause and help clarify whether a fix needs to go into the library or not.
An sp-toast element is "visible" when it has the [open] attribute, so you can you pretty much any form of animation CSS, JS, etc that can be bound to that attribute (or property if you manage it directly from the outside) to trigger animations. SWC doesn't currently vend tools to manage this specifically, however we'd be happy to start collecting use cases in order to determine if/what/how we should vend code to support this.
Right now the intended use of sp-toast is that it doesn't get added to the page until it is ready to be seen. You can see this in the "Handling Events" example on this page: https://opensource.adobe.com/spectrum-web-components/components/checkbox However, in An sp-toast element can't be re-opened #935 we're discussing if that's the correct course to support long term or not. Seeing as no other element in our library direct manages its own open attribute, I have a feeling that we'll remove the auto open functionality, but we've not officially come to a decision there yet. Look for closure on that issue in the next week or so.
Similar to the animation question, we don't currently vend something in this shape, but could certainly be convinced of its value. We've had one or two internal users bring it up, but not yet enough weight behind it to start structuring something for production reuse. At current, you can leverage something like:
```
const alert = Object.assign(
    document.createElement('sp-toast'),
    {
        variant: 'positive',
        innerHTML: 'This is a toast.'
    }
);
```
As it's pretty standard DOM centric JS.

velara3 · 2020-10-29T15:16:08Z

I've been working on more examples and there are a few issues I run into.

The CSS variables are not set and that some elements (usually pop ups) aren't positioned correctly. They are locked to the upper left of the screen.

Here is the test page I'm using.

Pop up placement:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Action Menu – 1</title>
<script id="applicationScript" type="text/javascript" src="Action_Menu___1.js"></script>
<script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module"></script>
<style id="applicationStylesheet" type="text/css">
	.mediaViewInfo {
		--web-view-name: Action Menu – 1;
		--web-view-id: Action_Menu__1;
		--web-enable-deep-linking: true;
		--web-page-font: Arial;
	}
	:root {
		--web-view-ids: Action_Menu__1;
	}
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: none;
	}
	#Action_Menu__1 {
		position: absolute;
		width: 628px;
		height: 472px;
		font-family: Arial;
		background-color: rgba(255,255,255,1);
		overflow: hidden;
		--web-view-name: Action Menu – 1;
		--web-view-id: Action_Menu__1;
		--web-enable-deep-linking: true;
		--web-page-font: Arial;
	}
	#Component_13__1 {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		position: absolute;
		width: 120px;
		height: 31px;
		left: 233px;
		top: 89px;
		overflow: visible;
	}
	#More_Actions {
		left: 32px;
		top: 7px;
		position: absolute;
		overflow: visible;
		width: 77px;
		white-space: nowrap;
		text-align: left;
		font-family: Adobe Clean, Arial;
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		color: rgba(112,112,112,1);
	}
</style>
</head>
<body>
<sp-theme id="Action_Menu__1" scale="medium" color="light">
<sp-action-menu id="Component_13__1" label="More Actions">
     <span slot="label">
		More Actions
     </span>
    <sp-menu>
        <sp-menu-item>
            Deselect
        </sp-menu-item>
        <sp-menu-item>
            Select inverse
        </sp-menu-item>
        <sp-menu-item>
            Feather...
        </sp-menu-item>
        <sp-menu-item>
            Select and mask...
        </sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>
            Save selection
        </sp-menu-item>
        <sp-menu-item disabled>
            Make work path
        </sp-menu-item>
    </sp-menu>
</sp-action-menu>
</sp-theme>
</body>
</html>

Toast element with no padding (CSS variables not applied):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Action Menu – 1</title>
<script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module"></script>
<style id="applicationStylesheet" type="text/css">
	.mediaViewInfo {
		--web-view-name: Action Menu – 1;
		--web-view-id: Action_Menu__1;
		--web-enable-deep-linking: true;
		--web-page-font: Arial;
	}
	:root {
		--web-view-ids: Action_Menu__1;
	}
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: none;
	}
	#Action_Menu__1 {
		position: absolute;
		width: 628px;
		height: 472px;
		font-family: Arial;
		background-color: rgba(255,255,255,1);
		overflow: hidden;
		--web-view-name: Action Menu – 1;
		--web-view-id: Action_Menu__1;
		--web-enable-deep-linking: true;
		--web-page-font: Arial;
	}
	#toast1 {
		position: absolute;
		left: 91px;
		top: 99.5px;
		overflow: visible;
	}
	#This_is_a_toast_message {
		overflow: visible;
		white-space: nowrap;
		text-align: left;
		font-family: Adobe Clean, Arial;
		font-style: normal;
		font-weight: bold;
		font-size: 14px;
		color: rgba(255,255,255,1);
	}
</style>
</head>
<body>
<sp-theme id="Action_Menu__1" scale="medium" color="light">
	<sp-toast id="toast1">
		This is a toast message
	</sp-toast>
</sp-theme>
</body>
</html>

Westbrook · 2020-10-29T21:30:15Z

For the overlay positioning, it looks like JSPM is not removing Node.JS code in their processing of packages, so you can either use this in your page:

window.process = window.process || {};
window.process.env = window.process.env || {};
window.process.env.NODE_ENV = window.process.env.NODE_ENV || 'production';

Or you can actually use a local build, which you'll need anyways for an actual production deployment. This is something that we've brought up a number of times with the 3rd party library we use that publishes it's code requiring these values, but we've not had a lot of luck getting them to change. @popperjs/core is that library, and I'll ping them again about removing it from their distribution build, but you may want to submit/join an issue on this subject as well.

For sp-toast, your use of:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

Overrides the default styling of the element. Take that out and you're good to go.

velara3 · 2020-10-29T22:04:35Z

Yay! The pop up menus are working for my page and the toast element too. :)

Is there a way to restore padding specifically for sp-toast?

It looks like I can set the default padding using:

sp-toast {
    padding: 12px;
}

But it looks like there are other elements like popover that will require style declarations too?

If the padding comes from the default browser styles then should there be defaults defined with higher specificity? Or is my global style declaration overriding Spectrum defaults? Global is the most generic low priority correct?

I can submit a new issue. Are they here on site here?

Westbrook · 2020-10-29T22:13:21Z

The padding is set as required in compliance with Spectrum design on all of the sp-* elements on the inside, so a "CSS reset" like this unsets that, like it would on any built-in component. If you ommit the CSS reset you won't need to worry about applying styles to them. Or, you could use a more focused reset like https://necolas.github.io/normalize.css/ which points all of its alterations at specific tags.

A new issue on that project would be great. I'll also revisit their recent releases to see if there are other options for us to consume their code by.

velara3 · 2020-11-02T01:45:05Z

I posted but they said it was not their issue. Is there something else I can mention?

Here is the link

/popperjs/popper-core/issues/1184#issuecomment-719231703

Westbrook · 2020-11-03T01:43:23Z

I'm taking another path on the possibility of having more optimized build delivered from Popper here: floating-ui/floating-ui#1188

I'm going to close this issue as not having follow up actions. Please feel free to open more specific issues as you continue your use of the library.

Westbrook · 2020-11-13T19:17:09Z

Between #996 and floating-ui/floating-ui#1191 hopefully the overlay situation will also be cleared up here!

Westbrook closed this as completed Nov 3, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do you show a toast message? #963

How do you show a toast message? #963

velara3 commented Oct 17, 2020 •

edited

velara3 commented Oct 17, 2020 •

edited

Westbrook commented Oct 19, 2020

velara3 commented Oct 29, 2020 •

edited

Westbrook commented Oct 29, 2020

velara3 commented Oct 29, 2020 •

edited

Westbrook commented Oct 29, 2020

velara3 commented Nov 2, 2020 •

edited

Westbrook commented Nov 3, 2020

Westbrook commented Nov 13, 2020

How do you show a toast message? #963

How do you show a toast message? #963

Comments

velara3 commented Oct 17, 2020 • edited

velara3 commented Oct 17, 2020 • edited

Westbrook commented Oct 19, 2020

velara3 commented Oct 29, 2020 • edited

Westbrook commented Oct 29, 2020

velara3 commented Oct 29, 2020 • edited

Westbrook commented Oct 29, 2020

velara3 commented Nov 2, 2020 • edited

Westbrook commented Nov 3, 2020

Westbrook commented Nov 13, 2020

velara3 commented Oct 17, 2020 •

edited

velara3 commented Oct 17, 2020 •

edited

velara3 commented Oct 29, 2020 •

edited

velara3 commented Oct 29, 2020 •

edited

velara3 commented Nov 2, 2020 •

edited