feat(snackbar): Update to match latest design guidelines #4166

acdvorak · 2018-12-11T23:51:52Z

Issues fixed

Fixes Snackbars should appear above FABs #4005 (via new mdc-snackbar-viewport-margin() mixin)
Fixes Snackbar action handler text not appearing #3981
Fixes MDCSnackbarFoundation has a hide event, but no onDismissed callback #2916 (via new MDCSnackbar:closing and MDCSnackbar:closed events)
Fixes Snackbar show method should not require message parameter #2628
Fixes Request: Method for closing the snackbar #1466 (via new close() method)
Fixes Snackbar not closing #1398
Fixes Possible to see snackbars in hidden state on any platform with rubber-band scrolling at edges #1258
Fixes Make snackbar more resilient to text overflow #11 (the label now expands indefinitely to fit the text)
Refs Remove [de]registerEventHandler methods from adapters #2813

Screenshots

BREAKING CHANGE: Snackbar's DOM and APIs have changed to match the latest design guidelines. See the Snackbar documentation for more information.

Fixes #4061 This PR also deletes snackbar's JS files and unit tests to avoid spurious test failures. They will be added back in the next PR (for issue #4062).

Fixes #4062

…4090) Fixes #4063

Fixes #4064

Fixes #4156

codecov-io · 2018-12-11T23:51:58Z

Codecov Report

❗ No coverage uploaded for pull request base (master@08e25f9). Click here to learn what that means.
The diff coverage is 100%.

@@           Coverage Diff            @@
##             master   #4166   +/-   ##
========================================
  Coverage          ?   98.5%           
========================================
  Files             ?     127           
  Lines             ?    5623           
  Branches          ?     745           
========================================
  Hits              ?    5539           
  Misses            ?      84           
  Partials          ?       0

Impacted Files	Coverage Δ
packages/mdc-snackbar/foundation.js	`100% <100%> (ø)`
packages/mdc-snackbar/constants.js	`100% <100%> (ø)`
packages/mdc-snackbar/index.js	`100% <100%> (ø)`
packages/mdc-snackbar/util.js	`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 08e25f9...ee6a96d. Read the comment docs.

This reverts commit fbbc9f0.

mdc-web-bot · 2018-12-12T22:18:38Z

🤖 Beep boop!

Screenshot test report 🚦

44 screenshots changed from master on commit 130bce6:

https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/12/22_15_53_796/report/report.html?utm_source=github&utm_medium=pr_comment

Details

44 Added:

packages/mdc-snackbar/_mixins.scss

packages/mdc-snackbar/_variables.scss

kfranqueiro · 2018-12-12T22:08:22Z

packages/mdc-snackbar/_variables.scss

+$mdc-snackbar-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 80%) !default;
+$mdc-snackbar-label-ink-color: rgba(mdc-theme-prop-value(surface), mdc-theme-text-emphasis(high)) !default;
+$mdc-snackbar-action-icon-ink-color: rgba(mdc-theme-prop-value(surface), mdc-theme-text-emphasis(high)) !default;
+$mdc-snackbar-action-button-ink-color: #bb86fc !default;


Does this color correspond to anything theme-related? Like a lighter version of primary? If so, encoding it as such should make it more flexible in relation to other Sass variables.

Ideally yes, but our theme system doesn't support that, so Design told me to hard-code it 🤷‍♂️

It might at least be more instructive to users looking to tweak variables (and less brittle at least as far as light-on-dark snackbars go) if this were expressed in terms of lighten($mdc-theme-primary)... except I can't actually get this color code as a result of it. It's close to 31% but not quite. Did design really give this exact value and if so where did they even get it from??

#bb86fc comes from the kickoff deck. I don't remember how Design came up with it.

I'm wary of using lighten() and darken() because they won't work for all colors. We would need a function like mdc-theme-light-variant() to ensure proper contrast ratios for accessibility purposes:

material-components-web/packages/mdc-theme/_functions.scss

Lines 72 to 97 in 13b5605

// Generate light and dark variants of the given color, offset by approximately

// the specified number of indexes within the color's tonal palette.

@function mdc-theme-tonal-variants_($color, $num-indexes: 2) {

$luminance: mdc-theme-luminance($color) * 100%;

$amount-1x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes);

$amount-2x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes * 2);

$lower-bound: $amount-1x;

$upper-bound: 100% - $lower-bound;

@if $luminance <= $lower-bound {

@return (

dark: lighten($color, $amount-1x),

light: lighten($color, $amount-2x)

);

} @else if $luminance >= $upper-bound {

@return (

dark: darken($color, $amount-2x),

light: darken($color, $amount-1x)

);

} @else {

@return (

dark: darken($color, $amount-1x),

light: lighten($color, $amount-1x)

);

}

}

However, the mdc-theme-light-variant() function was removed in #2473 because it didn't match the guidelines or the other platforms. I don't want to waste our time on something that will just get ripped out.

From my experience, hard-coding the color value is the least controversial option.
Implementing any kind of color logic is just going to open a huge can of worms all over again, which I have no interest in doing—especially when we're trying to get this thing merged before everyone goes on vacation.

If it's really that important to you, let's discuss it offline and create a separate follow up PR so this one doesn't get stuck in limbo forever.

packages/mdc-snackbar/constants.js

packages/mdc-snackbar/_mixins.scss

… keep values in sync between Sass and JS

This reverts commit 6724c45.

kfranqueiro

Don't forget a BREAKING CHANGE: note in the commit description (something to the effect that the DOM and APIs have changed and to see the Snackbar documentation for more information)

This reverts commit 24be055.

This reverts commit 7f7cdf2.

This reverts commit 52bd450.

This reverts commit c104d17.

This reverts commit 4473fdf.

mdc-web-bot · 2018-12-13T22:08:50Z

🤖 Beep boop!

Screenshot test report 🚦

44 screenshots changed from master on commit ee6a96d:

https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/13/22_05_59_932/report/report.html?utm_source=github&utm_medium=pr_comment

Details

44 Added:

acdvorak and others added 15 commits October 29, 2018 12:16

WIP: Add feat/snackbar to .travis.yml

e7ec8f3

Merge remote-tracking branch 'origin/master' into feat/snackbar

bdc597d

Merge remote-tracking branch 'origin/master' into feat/snackbar

172aa6c

Merge remote-tracking branch 'origin/master' into feat/snackbar

be887cb

feat(snackbar): Update styles to match guidelines (#4070)

fa2bc17

Fixes #4061 This PR also deletes snackbar's JS files and unit tests to avoid spurious test failures. They will be added back in the next PR (for issue #4062).

Merge remote-tracking branch 'origin/master' into feat/snackbar

83007dd

Merge remote-tracking branch 'origin/master' into feat/snackbar

678e915

feat(snackbar): Update JavaScript API to match guidelines (#4081)

95c6482

Fixes #4062

feat(snackbar): Accessibility: Announce label text to screen readers (#…

ed2b65a

…4090) Fixes #4063

Merge remote-tracking branch 'origin/master' into feat/snackbar

6980195

Merge remote-tracking branch 'origin/master' into feat/snackbar

fb3d68a

docs(snackbar): Update README with latest APIs (#4091)

a9848fd

Fixes #4064

feat(snackbar): Implement feedback from Design (#4161)

e790117

Fixes #4156

Merge remote-tracking branch 'origin/master' into feat/snackbar

3842502

WIP: Remove feat/snackbar from branches in .travis.yml

6dac359

acdvorak added this to the v0.43.0 milestone Dec 11, 2018

acdvorak assigned kfranqueiro Dec 11, 2018

acdvorak requested a review from kfranqueiro December 11, 2018 23:51

googlebot added the cla: yes label Dec 11, 2018

This comment has been minimized.

Sign in to view

acdvorak added 2 commits December 11, 2018 16:34

WIP: Dummy commit

fbbc9f0

Revert "WIP: Dummy commit"

3a3177c

This reverts commit fbbc9f0.

This comment has been minimized.

Sign in to view

Merge branch 'master' into feat/snackbar

130bce6

kfranqueiro suggested changes Dec 12, 2018

View reviewed changes

kfranqueiro reviewed Dec 12, 2018

View reviewed changes

packages/mdc-snackbar/_mixins.scss Outdated Show resolved Hide resolved

acdvorak added 2 commits December 12, 2018 17:04

WIP: Remove Sass variables from README (they're not "official" APIs)

1773a39

WIP: Remove unused imports

b252cc6

acdvorak added 2 commits December 12, 2018 17:05

WIP: Fix typo

3acf945

WIP: Fix SNACKBAR_ANIMATION_CLOSE_TIME_MS value and add comments to…

732a468

… keep values in sync between Sass and JS

trimox mentioned this pull request Dec 13, 2018

Update snackbar to match latest design guidelines trimox/angular-mdc-web#1599

Closed

acdvorak and others added 3 commits December 12, 2018 17:20

Merge branch 'master' into feat/snackbar

2e97c1c

WIP: Dummy commit

6724c45

Revert "WIP: Dummy commit"

4b3fd9a

This reverts commit 6724c45.

kfranqueiro approved these changes Dec 13, 2018

View reviewed changes

acdvorak added 10 commits December 13, 2018 08:43

WIP: Dummy commit

24be055

Revert "WIP: Dummy commit"

98e1e77

This reverts commit 24be055.

WIP: Dummy commit

7f7cdf2

Revert "WIP: Dummy commit"

414ae21

This reverts commit 7f7cdf2.

WIP: Dummy commit

52bd450

Revert "WIP: Dummy commit"

4e9e747

This reverts commit 52bd450.

WIP: Dummy commit

c104d17

Revert "WIP: Dummy commit"

00329c4

This reverts commit c104d17.

WIP: Dummy commit

4473fdf

Revert "WIP: Dummy commit"

83e596a

This reverts commit 4473fdf.

acdvorak mentioned this pull request Dec 13, 2018

Text Field textarea screenshot test page is flaky in Edge #4176

Closed

Merge remote-tracking branch 'origin/master' into feat/snackbar

ee6a96d

acdvorak merged commit 33d30e6 into master Dec 13, 2018

acdvorak deleted the feat/snackbar branch December 13, 2018 23:37

acdvorak mentioned this pull request Dec 14, 2018

Snackbar shows under virtual keyboard and can leave black rectangle on complex layouts on iOS 10 and greater #928

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(snackbar): Update to match latest design guidelines #4166

feat(snackbar): Update to match latest design guidelines #4166

acdvorak commented Dec 11, 2018 •

edited

Loading

codecov-io commented Dec 11, 2018 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

mdc-web-bot commented Dec 12, 2018

44 Added:

kfranqueiro Dec 12, 2018

acdvorak Dec 13, 2018

kfranqueiro Dec 13, 2018

acdvorak Dec 13, 2018

kfranqueiro left a comment

mdc-web-bot commented Dec 13, 2018

44 Added:

	// Generate light and dark variants of the given color, offset by approximately
	// the specified number of indexes within the color's tonal palette.
	@function mdc-theme-tonal-variants_($color, $num-indexes: 2) {
	$luminance: mdc-theme-luminance($color) * 100%;
	$amount-1x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes);
	$amount-2x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes * 2);
	$lower-bound: $amount-1x;
	$upper-bound: 100% - $lower-bound;

	@if $luminance <= $lower-bound {
	@return (
	dark: lighten($color, $amount-1x),
	light: lighten($color, $amount-2x)
	);
	} @else if $luminance >= $upper-bound {
	@return (
	dark: darken($color, $amount-2x),
	light: darken($color, $amount-1x)
	);
	} @else {
	@return (
	dark: darken($color, $amount-1x),
	light: lighten($color, $amount-1x)
	);
	}
	}

feat(snackbar): Update to match latest design guidelines #4166

feat(snackbar): Update to match latest design guidelines #4166

Conversation

acdvorak commented Dec 11, 2018 • edited Loading

Issues fixed

Screenshots

codecov-io commented Dec 11, 2018 • edited Loading

Codecov Report

This comment has been minimized.

This comment has been minimized.

mdc-web-bot commented Dec 12, 2018

Screenshot test report 🚦

44 Added:

kfranqueiro Dec 12, 2018

Choose a reason for hiding this comment

acdvorak Dec 13, 2018

Choose a reason for hiding this comment

kfranqueiro Dec 13, 2018

Choose a reason for hiding this comment

acdvorak Dec 13, 2018

Choose a reason for hiding this comment

kfranqueiro left a comment

Choose a reason for hiding this comment

mdc-web-bot commented Dec 13, 2018

Screenshot test report 🚦

44 Added:

acdvorak commented Dec 11, 2018 •

edited

Loading

codecov-io commented Dec 11, 2018 •

edited

Loading