Updated the Toast appearance and positioning #5
Conversation
| @@ -6,6 +6,7 @@ import {unsafeHTML} from 'lit/directives/unsafe-html.js' | |||
| import addOutline from '../assets/icons/add-outline.svg' | |||
| import caretDownOutline from '../assets/icons/caret-down-outline.svg' | |||
| import caretUpOutline from '../assets/icons/caret-up-outline.svg' | |||
| import checkmarkFill from '../assets/icons/checkmark-fill.svg' | |||
| @@ -99,7 +99,7 @@ export class PlayPenHeader extends LitElement { | |||
| appearance="orangered" | |||
| size="small" | |||
| icon="share-new-outline" | |||
| title="Copy Program URL to Clipboard" | |||
| title="Copy URL to Clipboard" | |||
There was a problem hiding this comment.
🔕 This makes sense to me. Just some background: the original intent here was to indicate that the program / pen is fully represented in the URL which users may not realize. Product banned pen terminology and calling everything a playground is ambiguous.
There was a problem hiding this comment.
That makes sense. I mainly just want it as short as possible. But also not sure if we've used the term "program" elsewhere in the UI.
As for the overall naming, my mental model is:
Play = Product name
Playground = Product category
There was a problem hiding this comment.
My thinking is:
- Play: product
- Playground: execution environment or sandbox; there may be multiple of these on a page like the docs and they each have their own independent state.
- Pen: program and the thing you share.
| } | ||
|
|
||
| protected override render() { | ||
| return html`<slot></slot>` | ||
| return html`<play-icon size="24px" icon="checkmark-fill"></play-icon |
There was a problem hiding this comment.
🔕 I think this icon should be outside the toast so we can use it for things besides confirmation but not a big deal.
There was a problem hiding this comment.
Agreed. Making the icon a fixed part of the toast makes the component overall less versatile.
I don't think we'll use toasts for error messages, given it's short display duration, but it's certainly possible for messages of more neutral intent that doesn't warrant the icon.
| transition-duration: 0.1s; | ||
| transition-timing-function: ease-out; | ||
|
|
||
| /* RPL/Body Regular/14-BodyReg */ |
There was a problem hiding this comment.
🔕 Suggest moving all this stuff into a CSS variable or inheriting.
Changes:
Before:
After: