Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 673dba2

Browse files
kfranqueirokfranqueiro
authored
fix(snackbar): Rename action/dismiss classes and revise docs/tests (#4203)
1 parent 92ecd49 commit 673dba2

18 files changed

+72
-78
lines changed

‎packages/mdc-snackbar/README.md

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ npm install @material/snackbar
4848
Can't send photo. Retry in 5 seconds.
4949
</div>
5050
<div class="mdc-snackbar__actions">
51-
<button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
52-
<button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>
51+
<button type="button" class="mdc-button mdc-snackbar__action">Retry</button>
5352
</div>
5453
</div>
5554
</div>
@@ -135,8 +134,8 @@ CSS Class | Description
135134
`mdc-snackbar` | Mandatory. Container for the snackbar elements.
136135
`mdc-snackbar__label` | Mandatory. Message text.
137136
`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.
138-
`mdc-snackbar__action-button` | Optional. The action button.
139-
`mdc-snackbar__action-icon` | Optional. The dismiss ("X") icon.
137+
`mdc-snackbar__action` | Optional. The action button.
138+
`mdc-snackbar__dismiss` | Optional. The dismiss ("X") icon.
140139
`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.
141140
`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.
142141
`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.
@@ -158,7 +157,7 @@ Mixin | Description
158157
`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.
159158
`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.
160159

161-
> **NOTE**: The `mdc-snackbar__action-button` and `mdc-snackbar__action-icon` elements can be customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.
160+
> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.
162161
163162
## JavaScript API
164163

@@ -228,8 +227,8 @@ When wrapping the Snackbar foundation, the following events must be bound to the
228227
Event | Target | Foundation Handler | Register | Deregister
229228
--- | --- | --- | --- | ---
230229
`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction
231-
`click` | `.mdc-snackbar__action-button` | `handleActionButtonClick` | During initialization | During destruction
232-
`click` | `.mdc-snackbar__action-icon` | `handleActionIconClick` | During initialization | During destruction
230+
`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction
231+
`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction
233232

234233
#### The Util API
235234

@@ -267,16 +266,16 @@ macOS VoiceOver is _not_ supported at this time.
267266

268267
### Dismiss Icon
269268

270-
A dedicated dismiss icon is optional, but **strongly** recommended. If the snackbar gets permanently "stuck" on the screen for any reason (e.g., #1398), the user needs to be able to manually dismiss it.
269+
Snackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.
271270

272271
### Dismiss Key
273272

274-
Pressing the <kbd>ESC</kbd> key while one of the snackbar's subelements has focus (e.g., the action button) will dismiss the snackbar.
273+
Pressing the <kbd>ESC</kbd> key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.
275274

276275
To disable this behavior, set `closeOnEscape` to `false`.
277276

278277
### No JS Ripples
279278

280-
The `mdc-snackbar__action-button` and `mdc-snackbar__action-icon` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.
279+
The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.
281280

282281
When combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.

‎packages/mdc-snackbar/_variables.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@
2525

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

3131
$mdc-snackbar-label-type-scale: body2 !default;
32-
$mdc-snackbar-action-icon-size: 18px !default;
32+
$mdc-snackbar-dismiss-icon-size: 18px !default;
3333
$mdc-snackbar-min-width: 344px !default;
3434
$mdc-snackbar-max-width: 672px !default;
3535
$mdc-snackbar-mobile-breakpoint: 480px !default;

‎packages/mdc-snackbar/constants.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ const cssClasses = {
3030
const strings = {
3131
SURFACE_SELECTOR: '.mdc-snackbar__surface',
3232
LABEL_SELECTOR: '.mdc-snackbar__label',
33-
ACTION_BUTTON_SELECTOR: '.mdc-snackbar__action-button',
34-
ACTION_ICON_SELECTOR: '.mdc-snackbar__action-icon',
33+
ACTION_SELECTOR: '.mdc-snackbar__action',
34+
DISMISS_SELECTOR: '.mdc-snackbar__dismiss',
3535

3636
OPENING_EVENT: 'MDCSnackbar:opening',
3737
OPENED_EVENT: 'MDCSnackbar:opened',

‎packages/mdc-snackbar/index.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import * as util from './util';
2828
import * as ponyfill from '@material/dom/ponyfill';
2929

3030
const {
31-
SURFACE_SELECTOR, LABEL_SELECTOR, ACTION_BUTTON_SELECTOR, ACTION_ICON_SELECTOR,
31+
SURFACE_SELECTOR, LABEL_SELECTOR, ACTION_SELECTOR, DISMISS_SELECTOR,
3232
OPENING_EVENT, OPENED_EVENT, CLOSING_EVENT, CLOSED_EVENT,
3333
} = strings;
3434

@@ -47,7 +47,7 @@ class MDCSnackbar extends MDCComponent {
4747
this.labelEl_;
4848

4949
/** @type {!HTMLElement} */
50-
this.actionButtonEl_;
50+
this.actionEl_;
5151

5252
/** @type {function(!HTMLElement, !HTMLElement=): void} */
5353
this.announce_;
@@ -69,7 +69,7 @@ class MDCSnackbar extends MDCComponent {
6969
initialSyncWithDOM() {
7070
this.surfaceEl_ = /** @type {!HTMLElement} */ (this.root_.querySelector(SURFACE_SELECTOR));
7171
this.labelEl_ = /** @type {!HTMLElement} */ (this.root_.querySelector(LABEL_SELECTOR));
72-
this.actionButtonEl_ = /** @type {!HTMLElement} */ (this.root_.querySelector(ACTION_BUTTON_SELECTOR));
72+
this.actionEl_ = /** @type {!HTMLElement} */ (this.root_.querySelector(ACTION_SELECTOR));
7373

7474
this.handleKeyDown_ = (evt) => this.foundation_.handleKeyDown(evt);
7575
this.handleSurfaceClick_ = (evt) => {
@@ -172,14 +172,14 @@ class MDCSnackbar extends MDCComponent {
172172
* @return {string}
173173
*/
174174
get actionButtonText() {
175-
return this.actionButtonEl_.textContent;
175+
return this.actionEl_.textContent;
176176
}
177177

178178
/**
179179
* @param {string} actionButtonText
180180
*/
181181
set actionButtonText(actionButtonText) {
182-
this.actionButtonEl_.textContent = actionButtonText;
182+
this.actionEl_.textContent = actionButtonText;
183183
}
184184

185185
/**
@@ -220,7 +220,7 @@ class MDCSnackbar extends MDCComponent {
220220
* @private
221221
*/
222222
isActionButton_(target) {
223-
return Boolean(ponyfill.closest(target, ACTION_BUTTON_SELECTOR));
223+
return Boolean(ponyfill.closest(target, ACTION_SELECTOR));
224224
}
225225

226226
/**
@@ -229,7 +229,7 @@ class MDCSnackbar extends MDCComponent {
229229
* @private
230230
*/
231231
isActionIcon_(target) {
232-
return Boolean(ponyfill.closest(target, ACTION_ICON_SELECTOR));
232+
return Boolean(ponyfill.closest(target, DISMISS_SELECTOR));
233233
}
234234
}
235235

‎packages/mdc-snackbar/mdc-snackbar.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -130,22 +130,22 @@
130130
box-sizing: border-box;
131131
}
132132

133-
.mdc-snackbar__action-button {
134-
@include mdc-button-ink-color($mdc-snackbar-action-button-ink-color);
135-
@include mdc-states($mdc-snackbar-action-button-ink-color);
133+
.mdc-snackbar__action {
134+
@include mdc-button-ink-color($mdc-snackbar-action-ink-color);
135+
@include mdc-states($mdc-snackbar-action-ink-color);
136136
}
137137

138-
.mdc-snackbar__action-icon {
139-
@include mdc-icon-button-ink-color($mdc-snackbar-action-icon-ink-color);
138+
.mdc-snackbar__dismiss {
139+
@include mdc-icon-button-ink-color($mdc-snackbar-dismiss-ink-color);
140140
}
141141

142142
// Two selectors are needed to increase specificity above `.material-icons`.
143143
// stylelint-disable-next-line selector-class-pattern
144-
.mdc-snackbar__action-icon.mdc-snackbar__action-icon {
145-
@include mdc-icon-button-size($mdc-snackbar-action-icon-size);
144+
.mdc-snackbar__dismiss.mdc-snackbar__dismiss {
145+
@include mdc-icon-button-size($mdc-snackbar-dismiss-icon-size);
146146
}
147147

148-
.mdc-snackbar__action-button + .mdc-snackbar__action-icon {
148+
.mdc-snackbar__action + .mdc-snackbar__dismiss {
149149
@include mdc-rtl-reflexive-property(margin, $mdc-snackbar-padding, 0);
150150
}
151151

‎test/screenshot/golden.json

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1195,30 +1195,30 @@
11951195
}
11961196
},
11971197
"spec/mdc-snackbar/classes/baseline-without-action.html": {
1198-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/12/05/21_03_57_990/spec/mdc-snackbar/classes/baseline-without-action.html?utm_source=golden_json",
1198+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/baseline-without-action.html?utm_source=golden_json",
11991199
"screenshots": {
1200-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/01_26_33_478/spec/mdc-snackbar/classes/baseline-without-action.html.windows_chrome_69.png",
1201-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/02_34_48_408/spec/mdc-snackbar/classes/baseline-without-action.html.windows_edge_17.png",
1202-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/12/05/21_03_57_990/spec/mdc-snackbar/classes/baseline-without-action.html.windows_firefox_63.png",
1203-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/01_26_33_478/spec/mdc-snackbar/classes/baseline-without-action.html.windows_ie_11.png"
1200+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/baseline-without-action.html.windows_chrome_71.png",
1201+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/baseline-without-action.html.windows_edge_17.png",
1202+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/baseline-without-action.html.windows_firefox_63.png",
1203+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/baseline-without-action.html.windows_ie_11.png"
12041204
}
12051205
},
12061206
"spec/mdc-snackbar/classes/leading.html": {
1207-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/12/05/21_03_57_990/spec/mdc-snackbar/classes/leading.html?utm_source=golden_json",
1207+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/leading.html?utm_source=golden_json",
12081208
"screenshots": {
1209-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/01_26_33_478/spec/mdc-snackbar/classes/leading.html.windows_chrome_69.png",
1210-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/02_34_48_408/spec/mdc-snackbar/classes/leading.html.windows_edge_17.png",
1211-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/12/05/21_03_57_990/spec/mdc-snackbar/classes/leading.html.windows_firefox_63.png",
1212-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/01_26_33_478/spec/mdc-snackbar/classes/leading.html.windows_ie_11.png"
1209+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/leading.html.windows_chrome_71.png",
1210+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/leading.html.windows_edge_17.png",
1211+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/leading.html.windows_firefox_63.png",
1212+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/leading.html.windows_ie_11.png"
12131213
}
12141214
},
12151215
"spec/mdc-snackbar/classes/stacked.html": {
1216-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/12/05/21_03_57_990/spec/mdc-snackbar/classes/stacked.html?utm_source=golden_json",
1216+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/stacked.html?utm_source=golden_json",
12171217
"screenshots": {
1218-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/01_26_33_478/spec/mdc-snackbar/classes/stacked.html.windows_chrome_69.png",
1219-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/02_34_48_408/spec/mdc-snackbar/classes/stacked.html.windows_edge_17.png",
1220-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/12/05/21_03_57_990/spec/mdc-snackbar/classes/stacked.html.windows_firefox_63.png",
1221-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/11/13/01_26_33_478/spec/mdc-snackbar/classes/stacked.html.windows_ie_11.png"
1218+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/stacked.html.windows_chrome_71.png",
1219+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/stacked.html.windows_edge_17.png",
1220+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/stacked.html.windows_firefox_63.png",
1221+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/12/20/16_29_02_542/spec/mdc-snackbar/classes/stacked.html.windows_ie_11.png"
12221222
}
12231223
},
12241224
"spec/mdc-snackbar/mixins/elevation.html": {

‎test/screenshot/spec/mdc-snackbar/classes/baseline-with-action.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
role="status"
5454
aria-live="polite">Can't send photo. Retry in 5 seconds.</div>
5555
<div class="mdc-snackbar__actions">
56-
<button type="button" class="mdc-button mdc-snackbar__action-button">Retry</button>
57-
<button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>
56+
<button type="button" class="mdc-button mdc-snackbar__action">Retry</button>
57+
<button class="mdc-icon-button mdc-snackbar__dismiss material-icons" title="Dismiss">close</button>
5858
</div>
5959
</div>
6060
</div>

‎test/screenshot/spec/mdc-snackbar/classes/baseline-without-action.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,6 @@
5353
<div class="mdc-snackbar__label"
5454
role="status"
5555
aria-live="polite">Message sent.</div>
56-
<div class="mdc-snackbar__actions">
57-
<button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>
58-
</div>
5956
</div>
6057
</div>
6158

‎test/screenshot/spec/mdc-snackbar/classes/leading.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@
5353
role="status"
5454
aria-live="polite">Your photo has been archived.</div>
5555
<div class="mdc-snackbar__actions">
56-
<button type="button" class="mdc-button mdc-snackbar__action-button">Undo</button>
57-
<button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>
56+
<button type="button" class="mdc-button mdc-snackbar__action">Undo</button>
5857
</div>
5958
</div>
6059
</div>

‎test/screenshot/spec/mdc-snackbar/classes/stacked.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@
5353
role="status"
5454
aria-live="polite">This item already has the label "travel". You can add a new label.</div>
5555
<div class="mdc-snackbar__actions">
56-
<button type="button" class="mdc-button mdc-snackbar__action-button">Add a new label</button>
57-
<button class="mdc-icon-button mdc-snackbar__action-icon material-icons" title="Dismiss">close</button>
56+
<button type="button" class="mdc-button mdc-snackbar__action">Add a new label</button>
5857
</div>
5958
</div>
6059
</div>

0 commit comments

Comments
 (0)