Add Snackbar #721

nicknisi · 2019-05-03T18:06:27Z

Type: feature

The following has been addressed in the PR:

There is a related issue
All code matches the style guide
Unit or Functional tests are included in the PR

Description:

Add a Snackbar widget

Properties:

type?: 'success' | 'error' - whether the Snackbar should display with its success or error state
open?: boolean; - Whether the Snackbar is open
message: string; - The title/text to display within the Snackbar
actionsRenderer?: () => DNode | DNode[]- Buttons to render in the actions portion of the Snackbar

Example use:

protected render() {
  return (
    <div id="example-autoclose">
        <h3>Auto close Snackbar</h3>
        <Button
            onClick={() => {
                this.open = true;
                setTimeout(() => {
                    this.open = false;
                }, 5000);
            }}
        >
            Show Snackbar
        </Button>
        <Snackbar
            type="success"
            open={this.open}
            actionsRenderer={() => <Button onClick={() => this._dismiss()}>Dismiss</Button>}
            message="Test Snackbar Error"
        />
    </div>
  );
}

Screenshot

Resolves #713

codecov · 2019-05-03T19:26:15Z

Codecov Report

Merging #721 into master will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #721      +/-   ##
==========================================
+ Coverage   98.41%   98.42%   +0.01%     
==========================================
  Files          44       46       +2     
  Lines        3273     3294      +21     
  Branches      970      973       +3     
==========================================
+ Hits         3221     3242      +21     
  Misses         52       52

Impacted Files	Coverage Δ
src/snackbar/index.tsx	`100% <100%> (ø)`
src/snackbar/nls/Snackbar.ts	`100% <100%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0ef5afa...4a90fc0. Read the comment docs.

codecov · 2019-05-03T19:26:15Z

Codecov Report

Merging #721 into master will increase coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #721      +/-   ##
==========================================
+ Coverage    98.4%   98.42%   +0.02%     
==========================================
  Files          44       47       +3     
  Lines        3257     3300      +43     
  Branches      968      976       +8     
==========================================
+ Hits         3205     3248      +43     
  Misses         52       52

Impacted Files	Coverage Δ
src/snackbar/index.tsx	`100% <100%> (ø)`
src/card/index.tsx	`100% <0%> (ø)`
src/outlined-button/index.tsx	`100% <0%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 658e4b3...4c8181e. Read the comment docs.

src/snackbar/index.tsx

tomdye · 2019-05-07T08:34:31Z

src/theme/snackbar.m.css

@@ -0,0 +1,54 @@
+@import '../common/styles/variables.css';
+
+.root {


not sure if this should all be here or in the dojo theme?

@tomdye Good question. I added the minimum structure and positioning to this CSS, just so that it uses flex box and displays at the bottom of the window. Should this not be here?

KaneFreeman · 2019-05-13T21:14:48Z

src/snackbar/index.tsx

+export class Snackbar extends WidgetBase<SnackbarProperties> {
+	protected render(): DNode {
+		const { type, open, message, actionsRenderer } = this.properties;
+		const classes = [css.root];


Need to make Widget themable

* make `open` property not optional * remove unnecessary manual typing * simplify adding classes, remove nested ternary

- Allow actions to be passed, which are buttons that will be rendered on the Snackbar - Replace `success` with `type?: 'success' | 'error'`

- type return value of render method - remove nls for Snackbar and use of I18nMixin

tomdye · 2019-05-24T15:45:00Z

src/snackbar/index.tsx

+export class Snackbar extends ThemedMixin(WidgetBase)<SnackbarProperties> {
+	protected render(): DNode {
+		const { type, open, leading, stacked, message, actionsRenderer } = this.properties;
+		const classes = [css.root];


Is there a reason you didn't use ternary for adding conditional classes to the root here like we do elsewhere.

I changed this to be consistent with what we've done elsewhere. I originally did it this way because I'm not a fan of testing the placement of null.

const successTemplate = template.setProperty('@root', 'classes', [ css.root, css.open, null, null, css.stacked ]);

tomdye · 2019-05-30T08:55:18Z

src/snackbar/index.tsx

+					<div key="label" classes={css.label} role="status" aria-live="polite">
+						{message}
+					</div>
+					<div key="actions" classes={css.actions}>


I'm not sure the actions section should be rendered at all if there is no actionsRenderer property passed

tomdye · 2019-05-30T08:55:37Z

src/snackbar/index.tsx

+		const { type, open, leading, stacked, message, actionsRenderer } = this.properties;
+		const classes = [css.root];
+
+		if (open) {


Please see previous comment re. ternary for these classes as we have done elsewhere.

nicknisi marked this pull request as ready for review May 3, 2019 18:57

nicknisi requested a review from tomdye May 3, 2019 18:57

matt-gadd reviewed May 5, 2019

View reviewed changes

nicknisi requested a review from matt-gadd May 6, 2019 18:36

tomdye requested changes May 7, 2019

View reviewed changes

KaneFreeman reviewed May 13, 2019

View reviewed changes

nicknisi added 14 commits May 18, 2019 09:19

add snackbar widget

3d58b3a

add snackbar tests

d508af5

css updates

5e0b4e6

rename Snackbar.tsx to index.tsx

77ea52a

remove css comments, add success/error colors

96003fa

add autoclose example, fix examples

d5d7143

fix typo

b39c535

add a README for Snackbar

eaa97d1

fix button import in snackbar tests

e7bb732

address PR feedback

3b06230

* make `open` property not optional * remove unnecessary manual typing * simplify adding classes, remove nested ternary

refactor actions, type properties

00ade6f

- Allow actions to be passed, which are buttons that will be rendered on the Snackbar - Replace `success` with `type?: 'success' | 'error'`

remove nls, I18nMixin usage, types

a6daf19

- type return value of render method - remove nls for Snackbar and use of I18nMixin

update README

5920392

refactor actions property to actionsRenderer

5ebf48e

nicknisi force-pushed the snackbar branch from 47a3518 to 5ebf48e Compare May 18, 2019 14:20

make widget themable, clean up imports

632697f

nicknisi mentioned this pull request May 19, 2019

Add snackbar theme dojo/themes#56

Closed

nicknisi added 5 commits May 18, 2019 21:41

simplify default css in snackbar theme

5727105

add custome element decorator

14b1a06

remove styles

1d874cb

snackbar fixes

181b639

css updates

fb1b96e

update the README

171b18f

tomdye reviewed May 24, 2019

View reviewed changes

tomdye requested changes May 30, 2019

View reviewed changes

replace if statements, remove actions wrapper renderering

4c8181e

tomdye approved these changes Jun 3, 2019

View reviewed changes

nicknisi merged commit 937ff2b into dojo:master Jun 3, 2019

nicknisi deleted the snackbar branch June 3, 2019 16:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add Snackbar #721

Add Snackbar #721

Uh oh!

nicknisi commented May 3, 2019 •

edited

Loading

Uh oh!

codecov bot commented May 3, 2019

Uh oh!

codecov bot commented May 3, 2019 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomdye May 7, 2019

Uh oh!

nicknisi May 7, 2019

Uh oh!

KaneFreeman May 13, 2019

Uh oh!

tomdye May 24, 2019

Uh oh!

nicknisi Jun 3, 2019

Uh oh!

tomdye May 30, 2019

Uh oh!

tomdye May 30, 2019

Uh oh!

Uh oh!

		@@ -0,0 +1,54 @@
		@import '../common/styles/variables.css';

		.root {

Add Snackbar #721

Add Snackbar #721

Uh oh!

Conversation

nicknisi commented May 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented May 3, 2019

Codecov Report

Uh oh!

codecov bot commented May 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomdye May 7, 2019

Choose a reason for hiding this comment

Uh oh!

nicknisi May 7, 2019

Choose a reason for hiding this comment

Uh oh!

KaneFreeman May 13, 2019

Choose a reason for hiding this comment

Uh oh!

tomdye May 24, 2019

Choose a reason for hiding this comment

Uh oh!

nicknisi Jun 3, 2019

Choose a reason for hiding this comment

Uh oh!

tomdye May 30, 2019

Choose a reason for hiding this comment

Uh oh!

tomdye May 30, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nicknisi commented May 3, 2019 •

edited

Loading

codecov bot commented May 3, 2019 •

edited

Loading