feat(snackbar): iss 783 viv 402 snackbar #808
Conversation
|
🚀 Latest successful build of the PR deployed here. 🚀 |
gullerya
added
the
Work in Progress
|
stories are evil |
| actualElement.show(); | ||
| await waitNextTask(); | ||
|
|
||
| await expect(actualElement).shadowDom.accessible(); |
There was a problem hiding this comment.
What does accessible do?
There was a problem hiding this comment.
a11y plugin installs this check and the method that is running within, to the best of my knowledge, performs set of accessibility checks (aria labels, contrast color etc).
There was a problem hiding this comment.
So it is magic? I like...
There was a problem hiding this comment.
Not really magic, but something quite similar to equalSnapshot.
| export enum Position { | ||
| Top = 'TOP', | ||
| Bottom = 'BOTTOM', | ||
| Start = 'START', | ||
| Center = 'CENTER', | ||
| End = 'END' | ||
| } |
There was a problem hiding this comment.
start / center / end - this is horizontal.
| private renderFlavor(legacy: boolean): TemplateResult { | ||
| const partValue = legacy ? undefined : 'vvd-scheme-alternate'; | ||
| return html`<div class="vivid-snackbar" part="${ifDefined(partValue)}"> | ||
| <vwc-note | ||
| icon="${ifDefined(this.icon)}" | ||
| connotation="${ifDefined(this.connotation)}" | ||
| header="${ifDefined(this.header)}" | ||
| > | ||
| <div class="snackbar-content"> | ||
| <div> | ||
| ${this.message} | ||
| <div class="action-container"> | ||
| <slot name="action" @click="${this.handleActionClick}"></slot> | ||
| </div> | ||
| </div> | ||
| <div class="dismiss-container"> | ||
| ${this.renderDismissAction()} | ||
| </div> | ||
| </div> | ||
| </vwc-note> | ||
| </div>`; | ||
| } |
There was a problem hiding this comment.
why such a large indentation? by eslint approval?
There was a problem hiding this comment.
it is just github presentation - in the IDE it looks okay :)
| @@ -2831,6 +2831,17 @@ | |||
| lit-html "^1.1.2" | |||
There was a problem hiding this comment.
OMG - seeing yarn.lock changing scares me now... ;)
| const [snackbar] = addElement( | ||
| textToDomToParent(`<${COMPONENT_NAME} message="Message"></${COMPONENT_NAME}>`) | ||
| ); | ||
| await openSnackbar(snackbar); |
| const [snackbar] = addElement( | ||
| textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`) | ||
| ); | ||
| await snackbar.updateComplete; | ||
| await openSnackbar(snackbar); |
|
Kudos, SonarCloud Quality Gate passed!
|
closes #783