Skip to content

Commit aa35e7f

Browse files
crisbetocrisbeto
committed
refactor(material/snack-bar): clean up structural styles (#29166)
Cleans up the snack bar's structural styles to make them smaller and easier to maintain. (cherry picked from commit 3dc01c1)
1 parent 51488a2 commit aa35e7f

File tree

4 files changed

+121
-87
lines changed

4 files changed

+121
-87
lines changed

‎src/material/snack-bar/_snack-bar-theme.scss‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use 'sass:map';
2-
@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
32
@use '../core/theming/theming';
43
@use '../core/theming/inspection';
54
@use '../core/theming/validation';
@@ -16,7 +15,10 @@
1615
@else {
1716
// Add default values for tokens not related to color, typography, or density.
1817
@include sass-utils.current-selector-or-root() {
19-
@include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-unthemable-tokens());
18+
@include token-utils.create-token-values(
19+
tokens-mdc-snack-bar.$prefix,
20+
tokens-mdc-snack-bar.get-unthemable-tokens()
21+
);
2022
}
2123
}
2224
}
@@ -27,10 +29,13 @@
2729
}
2830
@else {
2931
@include sass-utils.current-selector-or-root() {
30-
@include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($theme));
3132
@include token-utils.create-token-values(
32-
tokens-mat-snack-bar.$prefix,
33-
tokens-mat-snack-bar.get-color-tokens($theme)
33+
tokens-mdc-snack-bar.$prefix,
34+
tokens-mdc-snack-bar.get-color-tokens($theme)
35+
);
36+
@include token-utils.create-token-values(
37+
tokens-mat-snack-bar.$prefix,
38+
tokens-mat-snack-bar.get-color-tokens($theme)
3439
);
3540
}
3641
}
@@ -42,7 +47,10 @@
4247
}
4348
@else {
4449
@include sass-utils.current-selector-or-root() {
45-
@include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($theme));
50+
@include token-utils.create-token-values(
51+
tokens-mdc-snack-bar.$prefix,
52+
tokens-mdc-snack-bar.get-typography-tokens($theme)
53+
);
4654
}
4755
}
4856
}
@@ -83,7 +91,8 @@
8391
@include validation.selector-defined(
8492
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
8593
@if ($tokens != ()) {
86-
@include mdc-snackbar-theme.theme(map.get($tokens, tokens-mdc-snack-bar.$prefix));
94+
@include token-utils.create-token-values(
95+
tokens-mdc-snack-bar.$prefix, map.get($tokens, tokens-mdc-snack-bar.$prefix));
8796
@include token-utils.create-token-values(
8897
tokens-mat-snack-bar.$prefix, map.get($tokens, tokens-mat-snack-bar.$prefix));
8998
}

‎src/material/snack-bar/snack-bar-container.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="mdc-snackbar__surface">
1+
<div class="mdc-snackbar__surface mat-mdc-snackbar-surface">
22
<!--
33
This outer label wrapper will have the class `mdc-snackbar__label` applied if
44
the attached template/component does not contain it.

‎src/material/snack-bar/snack-bar-container.scss‎

Lines changed: 103 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,98 @@
1-
@use '@material/snackbar/snackbar' as mdc-snackbar;
2-
@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
3-
@use '@material/theme/custom-properties' as mdc-custom-properties;
1+
@use '@angular/cdk';
42
@use '../core/tokens/m2/mdc/snack-bar' as tokens-mdc-snack-bar;
53
@use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar;
64
@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
75
@use '../core/tokens/token-utils';
8-
@use '../core/mdc-helpers/mdc-helpers';
9-
10-
@mixin _container-min-width {
11-
$min-width: mdc-snackbar-theme.$min-width;
12-
$mobile-breakpoint: mdc-snackbar-theme.$mobile-breakpoint;
13-
14-
// The styles weren't included in `static-styles` so we need to add them ourselves.
15-
@include mdc-snackbar-theme.min-width(
16-
$min-width: $min-width,
17-
$mobile-breakpoint: $mobile-breakpoint,
18-
$query: mdc-helpers.$mdc-base-styles-query
19-
);
20-
21-
// The MDC `min-width` mixin has a similar breakpoint that sets `min-width: 100%` on the surface
22-
// element to make it span the entire viewport, however it ends up collapsing because the
23-
// container is `width: auto`. This query ensures that the surface will span the whole viewport.
24-
@media (max-width: $mobile-breakpoint), (max-width: $min-width) {
6+
@use '../core/style/elevation';
7+
8+
$_side-padding: 8px;
9+
10+
.mat-mdc-snack-bar-container {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
box-sizing: border-box;
15+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
16+
margin: 8px;
17+
18+
.mat-mdc-snack-bar-handset & {
2519
width: 100vw;
2620
}
2721
}
2822

29-
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
30-
// Include the styles without the animations since we
31-
// reuse the same animation as the non-MDC version.
32-
@include mdc-snackbar.static-styles($query: mdc-helpers.$mdc-base-styles-without-animation-query);
33-
34-
.mat-mdc-snack-bar-container {
35-
@include _container-min-width;
36-
@include mdc-snackbar-theme.max-width(
37-
mdc-snackbar-theme.$max-width,
38-
$query: mdc-helpers.$mdc-base-styles-query
39-
);
40-
@include mdc-snackbar-theme.viewport-margin(
41-
mdc-snackbar-theme.$viewport-margin-narrow,
42-
$query: mdc-helpers.$mdc-base-styles-query
43-
);
44-
45-
// MDC has the `container-elevation` which sounds like it should work, but it ends up applying
46-
// the shadow on the outer container instead of the `.mdc-snackbar__surface` which causes
47-
// a white background behind the rounded corners, because the `border-radius` is on the
48-
// surface element.
49-
@include mdc-snackbar-theme.elevation(mdc-snackbar-theme.$elevation);
50-
@include mdc-snackbar-theme.theme-styles(tokens-mdc-snack-bar.get-token-slots());
51-
52-
// MDC sets the position as fixed and sets the container on the bottom center of the page (or
53-
// otherwise can be set to be "leading"). Our overlay handles a more advanced configuration
54-
// of positions, so we'll defer logic there.
55-
position: static;
56-
57-
// The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
58-
// the specificity over the button styles that may bleed in from the rest of the app.
59-
.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
60-
// MDC's `action-label-text-color` should be able to do this, but the button theme has a
61-
// higher specificity so it ends up overriding it. Define our own variable that we can
62-
// use to control the color instead.
63-
@include token-utils.use-tokens(
64-
tokens-mat-snack-bar.$prefix,
65-
tokens-mat-snack-bar.get-token-slots()
66-
) {
67-
@include token-utils.create-token-slot(color, button-color);
68-
}
69-
70-
// Darken the ripples in the button so they're visible against the dark background.
71-
@include token-utils.create-token-values(tokens-mat-text-button.$prefix, (
72-
state-layer-color: currentColor,
73-
ripple-color: currentColor,
74-
));
75-
76-
.mat-ripple-element {
77-
opacity: 0.1;
78-
}
23+
.mat-mdc-snackbar-surface {
24+
@include elevation.elevation(6);
25+
display: flex;
26+
align-items: center;
27+
justify-content: flex-start;
28+
box-sizing: border-box;
29+
padding-left: 0;
30+
padding-right: $_side-padding;
31+
32+
[dir='rtl'] & {
33+
padding-right: 0;
34+
padding-left: $_side-padding;
35+
}
36+
37+
.mat-mdc-snack-bar-container & {
38+
min-width: 344px;
39+
max-width: 672px;
40+
}
41+
42+
// Ensures that the snack bar stretches to full width in handset mode.
43+
.mat-mdc-snack-bar-handset & {
44+
width: 100%;
45+
min-width: 0;
46+
}
47+
48+
@include cdk.high-contrast(active, off) {
49+
outline: solid 1px;
50+
}
51+
52+
@include token-utils.use-tokens(
53+
tokens-mdc-snack-bar.$prefix,
54+
tokens-mdc-snack-bar.get-token-slots()
55+
) {
56+
.mat-mdc-snack-bar-container & {
57+
@include token-utils.create-token-slot(color, supporting-text-color);
58+
@include token-utils.create-token-slot(border-radius, container-shape);
59+
@include token-utils.create-token-slot(background-color, container-color);
7960
}
61+
}
62+
}
63+
64+
.mdc-snackbar__label {
65+
width: 100%;
66+
flex-grow: 1;
67+
box-sizing: border-box;
68+
margin: 0;
69+
padding: 14px $_side-padding 14px 16px;
8070

81-
// MDC uses this pseudo element to work around an issue with their live announcer, but it
82-
// can cause additional space for long snack bar messages (see #26685). Since we don't use
83-
// MDC's announcer, we can hide the element.
84-
.mdc-snackbar__label::before {
85-
display: none;
71+
[dir='rtl'] & {
72+
padding-left: $_side-padding;
73+
padding-right: 16px;
74+
}
75+
76+
@include token-utils.use-tokens(
77+
tokens-mdc-snack-bar.$prefix,
78+
tokens-mdc-snack-bar.get-token-slots()
79+
) {
80+
.mat-mdc-snack-bar-container & {
81+
@include token-utils.create-token-slot(font-family, supporting-text-font);
82+
@include token-utils.create-token-slot(font-size, supporting-text-size);
83+
@include token-utils.create-token-slot(font-weight, supporting-text-weight);
84+
@include token-utils.create-token-slot(line-height, supporting-text-line-height);
8685
}
8786
}
8887
}
8988

89+
.mat-mdc-snack-bar-actions {
90+
display: flex;
91+
flex-shrink: 0;
92+
align-items: center;
93+
box-sizing: border-box;
94+
}
95+
9096
// These elements need to have full width using flex layout.
9197
.mat-mdc-snack-bar-handset,
9298
.mat-mdc-snack-bar-container,
@@ -96,7 +102,26 @@
96102
flex: 1 1 auto;
97103
}
98104

99-
// Ensures that the snack bar stretches to full width in handset mode.
100-
.mat-mdc-snack-bar-handset .mdc-snackbar__surface {
101-
width: 100%;
105+
// The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
106+
// the specificity over the button styles that may bleed in from the rest of the app.
107+
.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
108+
// MDC's `action-label-text-color` should be able to do this, but the button theme has a
109+
// higher specificity so it ends up overriding it. Define our own variable that we can
110+
// use to control the color instead.
111+
@include token-utils.use-tokens(
112+
tokens-mat-snack-bar.$prefix,
113+
tokens-mat-snack-bar.get-token-slots()
114+
) {
115+
@include token-utils.create-token-slot(color, button-color);
116+
}
117+
118+
// Darken the ripples in the button so they're visible against the dark background.
119+
@include token-utils.create-token-values(tokens-mat-text-button.$prefix, (
120+
state-layer-color: currentColor,
121+
ripple-color: currentColor,
122+
));
123+
124+
.mat-ripple-element {
125+
opacity: 0.1;
126+
}
102127
}

‎src/material/snack-bar/snack-bar-container.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ let uniqueId = 0;
5454
standalone: true,
5555
imports: [CdkPortalOutlet],
5656
host: {
57-
'class': 'mdc-snackbar mat-mdc-snack-bar-container mdc-snackbar--open',
57+
'class': 'mdc-snackbar mat-mdc-snack-bar-container',
5858
'[@state]': '_animationState',
5959
'(@state.done)': 'onAnimationEnd($event)',
6060
},

0 commit comments

Comments
 (0)