Skip to content

Commit 67e3e3f

Browse files
crisbetocrisbeto
authored
refactor(material/slider): switch to new theming API (#25725)
Switches the MDC-based slider to use the new theming API based on CSS variables.
1 parent 2686bfe commit 67e3e3f

File tree

6 files changed

+703
-699
lines changed

6 files changed

+703
-699
lines changed

‎package.json

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -95,53 +95,53 @@
9595
"@bazel/terser": "5.5.3",
9696
"@bazel/worker": "5.5.3",
9797
"@firebase/app-types": "^0.7.0",
98-
"@material/animation": "15.0.0-canary.c363f267b.0",
99-
"@material/auto-init": "15.0.0-canary.c363f267b.0",
100-
"@material/banner": "15.0.0-canary.c363f267b.0",
101-
"@material/base": "15.0.0-canary.c363f267b.0",
102-
"@material/button": "15.0.0-canary.c363f267b.0",
103-
"@material/card": "15.0.0-canary.c363f267b.0",
104-
"@material/checkbox": "15.0.0-canary.c363f267b.0",
105-
"@material/chips": "15.0.0-canary.c363f267b.0",
106-
"@material/circular-progress": "15.0.0-canary.c363f267b.0",
107-
"@material/data-table": "15.0.0-canary.c363f267b.0",
108-
"@material/density": "15.0.0-canary.c363f267b.0",
109-
"@material/dialog": "15.0.0-canary.c363f267b.0",
110-
"@material/dom": "15.0.0-canary.c363f267b.0",
111-
"@material/drawer": "15.0.0-canary.c363f267b.0",
112-
"@material/elevation": "15.0.0-canary.c363f267b.0",
113-
"@material/fab": "15.0.0-canary.c363f267b.0",
114-
"@material/feature-targeting": "15.0.0-canary.c363f267b.0",
115-
"@material/floating-label": "15.0.0-canary.c363f267b.0",
116-
"@material/form-field": "15.0.0-canary.c363f267b.0",
117-
"@material/icon-button": "15.0.0-canary.c363f267b.0",
118-
"@material/image-list": "15.0.0-canary.c363f267b.0",
119-
"@material/layout-grid": "15.0.0-canary.c363f267b.0",
120-
"@material/line-ripple": "15.0.0-canary.c363f267b.0",
121-
"@material/linear-progress": "15.0.0-canary.c363f267b.0",
122-
"@material/list": "15.0.0-canary.c363f267b.0",
123-
"@material/menu": "15.0.0-canary.c363f267b.0",
124-
"@material/menu-surface": "15.0.0-canary.c363f267b.0",
125-
"@material/notched-outline": "15.0.0-canary.c363f267b.0",
126-
"@material/radio": "15.0.0-canary.c363f267b.0",
127-
"@material/ripple": "15.0.0-canary.c363f267b.0",
128-
"@material/rtl": "15.0.0-canary.c363f267b.0",
129-
"@material/segmented-button": "15.0.0-canary.c363f267b.0",
130-
"@material/select": "15.0.0-canary.c363f267b.0",
131-
"@material/shape": "15.0.0-canary.c363f267b.0",
132-
"@material/slider": "15.0.0-canary.c363f267b.0",
133-
"@material/snackbar": "15.0.0-canary.c363f267b.0",
134-
"@material/switch": "15.0.0-canary.c363f267b.0",
135-
"@material/tab": "15.0.0-canary.c363f267b.0",
136-
"@material/tab-bar": "15.0.0-canary.c363f267b.0",
137-
"@material/tab-indicator": "15.0.0-canary.c363f267b.0",
138-
"@material/tab-scroller": "15.0.0-canary.c363f267b.0",
139-
"@material/textfield": "15.0.0-canary.c363f267b.0",
140-
"@material/theme": "15.0.0-canary.c363f267b.0",
141-
"@material/tooltip": "15.0.0-canary.c363f267b.0",
142-
"@material/top-app-bar": "15.0.0-canary.c363f267b.0",
143-
"@material/touch-target": "15.0.0-canary.c363f267b.0",
144-
"@material/typography": "15.0.0-canary.c363f267b.0",
98+
"@material/animation": "15.0.0-canary.a515a2d18.0",
99+
"@material/auto-init": "15.0.0-canary.a515a2d18.0",
100+
"@material/banner": "15.0.0-canary.a515a2d18.0",
101+
"@material/base": "15.0.0-canary.a515a2d18.0",
102+
"@material/button": "15.0.0-canary.a515a2d18.0",
103+
"@material/card": "15.0.0-canary.a515a2d18.0",
104+
"@material/checkbox": "15.0.0-canary.a515a2d18.0",
105+
"@material/chips": "15.0.0-canary.a515a2d18.0",
106+
"@material/circular-progress": "15.0.0-canary.a515a2d18.0",
107+
"@material/data-table": "15.0.0-canary.a515a2d18.0",
108+
"@material/density": "15.0.0-canary.a515a2d18.0",
109+
"@material/dialog": "15.0.0-canary.a515a2d18.0",
110+
"@material/dom": "15.0.0-canary.a515a2d18.0",
111+
"@material/drawer": "15.0.0-canary.a515a2d18.0",
112+
"@material/elevation": "15.0.0-canary.a515a2d18.0",
113+
"@material/fab": "15.0.0-canary.a515a2d18.0",
114+
"@material/feature-targeting": "15.0.0-canary.a515a2d18.0",
115+
"@material/floating-label": "15.0.0-canary.a515a2d18.0",
116+
"@material/form-field": "15.0.0-canary.a515a2d18.0",
117+
"@material/icon-button": "15.0.0-canary.a515a2d18.0",
118+
"@material/image-list": "15.0.0-canary.a515a2d18.0",
119+
"@material/layout-grid": "15.0.0-canary.a515a2d18.0",
120+
"@material/line-ripple": "15.0.0-canary.a515a2d18.0",
121+
"@material/linear-progress": "15.0.0-canary.a515a2d18.0",
122+
"@material/list": "15.0.0-canary.a515a2d18.0",
123+
"@material/menu": "15.0.0-canary.a515a2d18.0",
124+
"@material/menu-surface": "15.0.0-canary.a515a2d18.0",
125+
"@material/notched-outline": "15.0.0-canary.a515a2d18.0",
126+
"@material/radio": "15.0.0-canary.a515a2d18.0",
127+
"@material/ripple": "15.0.0-canary.a515a2d18.0",
128+
"@material/rtl": "15.0.0-canary.a515a2d18.0",
129+
"@material/segmented-button": "15.0.0-canary.a515a2d18.0",
130+
"@material/select": "15.0.0-canary.a515a2d18.0",
131+
"@material/shape": "15.0.0-canary.a515a2d18.0",
132+
"@material/slider": "15.0.0-canary.a515a2d18.0",
133+
"@material/snackbar": "15.0.0-canary.a515a2d18.0",
134+
"@material/switch": "15.0.0-canary.a515a2d18.0",
135+
"@material/tab": "15.0.0-canary.a515a2d18.0",
136+
"@material/tab-bar": "15.0.0-canary.a515a2d18.0",
137+
"@material/tab-indicator": "15.0.0-canary.a515a2d18.0",
138+
"@material/tab-scroller": "15.0.0-canary.a515a2d18.0",
139+
"@material/textfield": "15.0.0-canary.a515a2d18.0",
140+
"@material/theme": "15.0.0-canary.a515a2d18.0",
141+
"@material/tooltip": "15.0.0-canary.a515a2d18.0",
142+
"@material/top-app-bar": "15.0.0-canary.a515a2d18.0",
143+
"@material/touch-target": "15.0.0-canary.a515a2d18.0",
144+
"@material/typography": "15.0.0-canary.a515a2d18.0",
145145
"@octokit/rest": "18.3.5",
146146
"@rollup/plugin-commonjs": "^21.0.0",
147147
"@rollup/plugin-node-resolve": "^13.1.3",

‎packages.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^15.0.0-0 || ^16.0.0"
5-
MDC_PACKAGE_VERSION = "15.0.0-canary.c363f267b.0"
5+
MDC_PACKAGE_VERSION = "15.0.0-canary.a515a2d18.0"
66
TSLIB_PACKAGE_VERSION = "^2.3.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
88

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ export class DevAppLayout {
103103
{name: 'Typography', route: '/typography'},
104104
{name: 'Virtual Scrolling', route: '/virtual-scroll'},
105105
{name: 'YouTube Player', route: '/youtube-player'},
106-
{name: 'MDC Slider', route: '/mdc-slider'},
107106
{name: 'Legacy Autocomplete', route: '/legacy-autocomplete'},
108107
{name: 'Legacy Button', route: '/legacy-button'},
109108
{name: 'Legacy Card', route: '/legacy-card'},

‎src/material/slider/_slider-theme.scss

Lines changed: 50 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,46 @@
11
@use 'sass:map';
22

3-
@use '@material/slider/slider' as mdc-slider;
4-
@use '@material/slider/slider-theme';
5-
@use '@material/theme/variables' as theme-variables;
3+
@use '@material/slider/slider-theme' as mdc-slider-theme;
4+
@use '@material/theme/theme-color' as mdc-theme-color;
5+
@use '@material/typography/typography' as mdc-typography;
6+
@use '@material/theme/variables' as mdc-theme-variables;
67
@use '../core/mdc-helpers/mdc-helpers';
78
@use '../core/theming/theming';
89
@use '../core/typography/typography';
9-
@use '../core/ripple/ripple-theme';
1010

1111

1212
@mixin color($config-or-theme) {
1313
$config: theming.get-color-config($config-or-theme);
14-
@include mdc-helpers.using-mdc-theme($config) {
15-
@include mdc-slider.without-ripple($query: mdc-helpers.$mdc-theme-styles-query);
1614

15+
@include mdc-helpers.using-mdc-theme($config) {
1716
.mat-mdc-slider {
18-
&.mat-primary, &.mat-accent, &.mat-warn {
19-
$is-dark: map.get($config, is-dark);
20-
$indicator-color: if($is-dark, white, black);
21-
$indicator-text-color: if($is-dark, black, white);
22-
$indicator-opacity: if($is-dark, 0.9, 0.6);
23-
24-
@include slider-theme.value-indicator-color(
25-
$color: $indicator-color,
26-
$opacity: $indicator-opacity,
27-
$query: mdc-helpers.$mdc-theme-styles-query
28-
);
29-
@include slider-theme.value-indicator-text-color(
30-
$color: $indicator-text-color,
31-
$query: mdc-helpers.$mdc-theme-styles-query
32-
);
33-
}
17+
$is-dark: map.get($config, is-dark);
18+
$on-surface: mdc-theme-color.prop-value(on-surface);
19+
20+
@include mdc-slider-theme.theme((
21+
label-container-color: if($is-dark, white, black),
22+
label-label-text-color: if($is-dark, black, white),
23+
disabled-handle-color: $on-surface,
24+
disabled-active-track-color: $on-surface,
25+
disabled-inactive-track-color: $on-surface,
26+
with-tick-marks-disabled-container-color: $on-surface,
27+
));
28+
29+
// Note that technically we can control this using an `rgba` color in `label-container-color`.
30+
// We don't do it, because the shapes MDC uses to construct the indicator overlap which causes
31+
// their color opacities to stack with an `rgba` color.
32+
--mat-mdc-slider-value-indicator-opacity: #{if($is-dark, 0.9, 0.6)};
3433

3534
&.mat-primary {
36-
@include _custom-slider-color(primary, on-primary);
35+
@include _slider-color(primary, on-primary);
3736
}
3837

3938
&.mat-accent {
40-
@include _custom-slider-color(secondary, on-secondary);
39+
@include _slider-color(secondary, on-secondary);
4140
}
4241

4342
&.mat-warn {
44-
@include _custom-slider-color(error, on-error);
43+
@include _slider-color(error, on-error);
4544
}
4645
}
4746
}
@@ -51,7 +50,15 @@
5150
$config: typography.private-typography-to-2018-config(
5251
theming.get-typography-config($config-or-theme));
5352
@include mdc-helpers.using-mdc-typography($config) {
54-
@include mdc-slider.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
53+
.mat-mdc-slider {
54+
@include mdc-slider-theme.theme((
55+
label-label-text-font: mdc-typography.get-font(subtitle2),
56+
label-label-text-font-size: mdc-typography.get-size(subtitle2),
57+
label-label-text-line-height: mdc-typography.get-line-height(subtitle2),
58+
label-label-text-tracking: mdc-typography.get-tracking(subtitle2),
59+
label-label-text-weight: mdc-typography.get-weight(subtitle2),
60+
));
61+
}
5562
}
5663
}
5764

@@ -76,52 +83,22 @@
7683
}
7784
}
7885

79-
@mixin _custom-slider-color($color, $on-color) {
80-
@include slider-theme.thumb-color(
81-
$color-or-map: (
82-
default: $color,
83-
disabled: on-surface,
84-
),
85-
$query: mdc-helpers.$mdc-theme-styles-query
86-
);
87-
@include slider-theme.track-active-color(
88-
$color-or-map: (
89-
default: $color,
90-
disabled: on-surface,
91-
),
92-
$query: mdc-helpers.$mdc-theme-styles-query
93-
);
94-
@include slider-theme.track-inactive-color(
95-
$color-or-map: (
96-
default: $color,
97-
disabled: on-surface,
98-
),
99-
$query: mdc-helpers.$mdc-theme-styles-query
100-
);
101-
@include slider-theme.tick-mark-active-color(
102-
$color-or-map: (
103-
default: $on-color,
104-
disabled: surface,
105-
),
106-
$query: mdc-helpers.$mdc-theme-styles-query
107-
);
108-
@include slider-theme.tick-mark-inactive-color(
109-
$color-or-map: (
110-
default: $color,
111-
disabled: on-surface,
112-
),
113-
$query: mdc-helpers.$mdc-theme-styles-query
114-
);
115-
$ripple-color: map.get(theme-variables.$property-values, $color);
116-
@include ripple-theme.color((
117-
foreground: (
118-
base: $ripple-color
119-
),
86+
@mixin _slider-color($color, $on-color) {
87+
$ripple-color: map.get(mdc-theme-variables.$property-values, $color);
88+
$resolved-color: mdc-theme-color.prop-value($color);
89+
$resolved-on-color: mdc-theme-color.prop-value($on-color);
90+
91+
@include mdc-slider-theme.theme((
92+
handle-color: $resolved-color,
93+
focus-handle-color: $resolved-color,
94+
hover-handle-color: $resolved-color,
95+
active-track-color: $resolved-color,
96+
inactive-track-color: $resolved-color,
97+
with-tick-marks-active-container-color: $resolved-on-color,
98+
with-tick-marks-inactive-container-color: $resolved-color,
12099
));
121-
.mat-mdc-slider-hover-ripple {
122-
background-color: rgba($ripple-color, 0.05);
123-
}
124-
.mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
125-
background-color: rgba($ripple-color, 0.2);
126-
}
100+
101+
--mat-mdc-slider-ripple-color: #{$ripple-color};
102+
--mat-mdc-slider-hover-ripple-color: #{rgba($ripple-color, 0.05)};
103+
--mat-mdc-slider-focus-ripple-color: #{rgba($ripple-color, 0.2)};
127104
}

‎src/material/slider/slider.scss

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@use '@material/slider/slider' as mdc-slider;
2+
@use '@material/slider/slider-theme' as mdc-slider-theme;
23
@use '../core/mdc-helpers/mdc-helpers';
34

45
@include mdc-helpers.disable-mdc-fallback-declarations {
5-
@include mdc-slider.without-ripple($query: mdc-helpers.$mdc-base-styles-query);
6+
@include mdc-slider.static-styles($query: mdc-helpers.$mdc-base-styles-query);
67
}
78

89
$mat-slider-min-size: 128px !default;
@@ -13,6 +14,10 @@ $mat-slider-horizontal-margin: 8px !default;
1314
// element, aligning it in the vertical middle of a line, specifying a default minimum
1415
// width and adding horizontal margin.
1516
.mat-mdc-slider {
17+
@include mdc-helpers.disable-mdc-fallback-declarations {
18+
@include mdc-slider-theme.theme-styles(mdc-slider-theme.$light-theme);
19+
}
20+
1621
display: inline-block;
1722
box-sizing: border-box;
1823
outline: none;
@@ -27,6 +32,28 @@ $mat-slider-horizontal-margin: 8px !default;
2732
width: auto;
2833
min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
2934

35+
.mdc-slider__value-indicator {
36+
// There's no token to control this opacity so we have to do it ourselves.
37+
opacity: var(--mat-mdc-slider-value-indicator-opacity, 1);
38+
}
39+
40+
// The `.mat-ripple` wrapper here is redundant, but we need it to
41+
// increase the specificity due to how some styles are setup in g3.
42+
.mat-ripple {
43+
// These ripple colors are custom so we have to introduce our own tokens.
44+
.mat-ripple-element {
45+
background-color: var(--mat-mdc-slider-ripple-color, transparent);
46+
}
47+
48+
.mat-mdc-slider-hover-ripple {
49+
background-color: var(--mat-mdc-slider-hover-ripple-color, transparent);
50+
}
51+
52+
.mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
53+
background-color: var(--mat-mdc-slider-focus-ripple-color, transparent);
54+
}
55+
}
56+
3057
&._mat-animation-noopable {
3158
&.mdc-slider--discrete .mdc-slider__thumb,
3259
&.mdc-slider--discrete .mdc-slider__track--active_fill,

0 commit comments

Comments
 (0)