Skip to content

feat(material-experimental/mdc-slider): implement the mdc slider #22596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 35 commits into from
May 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
1b9b506
feat(material-experimental/mdc-slider): delete old code
wagnermaciel Jan 15, 2021
e55ee1d
build: add mdc-slider to the mdc exports configs skipped packages
wagnermaciel Jan 15, 2021
3a6d0b3
feat(material-experimental/mdc-slider): add skeleton code for MatSlid…
wagnermaciel Jan 20, 2021
fcb6d93
feat(material-experimental/mdc-slider): add skeleton code for MatSlid…
wagnermaciel Jan 21, 2021
41c12aa
feat(material-experimental/mdc-slider): implement MatSlider (#21680)
wagnermaciel Feb 8, 2021
800e11a
feat(material-experimental/mdc-slider): implement the SliderAdapter (…
wagnermaciel Feb 17, 2021
b5adcdf
fix(material-experimental/mdc-slider): init step on thumb inputs (#21…
wagnermaciel Feb 22, 2021
51c0ff3
feat(material-experimental/mdc-slider): add slider styles (#21934)
wagnermaciel Feb 22, 2021
4074c63
feat(material-experimental/mdc-slider): implement slider thumb ripple…
wagnermaciel Feb 25, 2021
5fdea86
feat(material-experimental/mdc-slider): implement control value acces…
wagnermaciel Mar 1, 2021
20a4c7d
feat(material-experimental/mdc-slider): implement some basic unit tes…
wagnermaciel Mar 9, 2021
005a76c
feat(material-experimental/mdc-slider): add unit tests for disabled s…
wagnermaciel Mar 9, 2021
9706ec4
test(material-experimental/mdc-slider): add unit tests for sliders wi…
wagnermaciel Mar 10, 2021
51c4218
fix(material-experimental/mdc-slider): fix VE bug
wagnermaciel Mar 10, 2021
6dd2e7e
test(material-experimental/mdc-slider): add unit tests for sliders wi…
wagnermaciel Mar 11, 2021
9a38cb2
fix(material-experimental/mdc-slider): dedup mdc-slider styles (#22195)
wagnermaciel Mar 11, 2021
7b1b4ba
feat(material-experimental/mdc-slider): add support for rtl/ltr toggl…
wagnermaciel Mar 11, 2021
635a8ae
feat(material-experimental/mdc-slider): add support for disabling rip…
wagnermaciel Mar 11, 2021
f361928
fix(material-experimental/mdc-slider): add slider to mdc_scss_deps_li…
wagnermaciel Mar 15, 2021
9335879
test(material-experimental/mdc-slider): add tests for sliders with se…
wagnermaciel Mar 15, 2021
7fbc1ab
test(material-experimental/mdc-slider): add tests for slider with set…
wagnermaciel Mar 15, 2021
32b2c0e
test(material-experimental/mdc-slider): add tests for slider with one…
wagnermaciel Mar 16, 2021
ce802d3
fix(material-experimental/mdc-slider): fix change events on slider in…
wagnermaciel Mar 23, 2021
e18dd79
fix(material-experimental/mdc-slider): fix change and input events on…
wagnermaciel Apr 8, 2021
d36f8fd
feat(material-experimental/mdc-slider): rebuild the mdc-slider demo (…
wagnermaciel Apr 9, 2021
eb29373
test(material-experimental/mdc-slider): create e2e tests (#22463)
wagnermaciel Apr 12, 2021
38f03bc
test(material-experimental/mdc-slider): add two-way binding unit test…
wagnermaciel Apr 13, 2021
c721c2d
test(material-experimental/mdc-slider): add ngModel unit tests (#22474)
wagnermaciel Apr 14, 2021
42a7717
test(material-experimental/mdc-slider): add change handler tests (#22…
wagnermaciel Apr 14, 2021
44ad910
test(material-experimental/mdc-slider): add input handler tests (#22481)
wagnermaciel Apr 15, 2021
96ce2a9
test(material-experimental/mdc-slider): add custom form control tests…
wagnermaciel Apr 24, 2021
d6923c1
fix(material-experimental/mdc-slider): avoid using whenStable (#22571)
wagnermaciel Apr 26, 2021
05d4e1d
test(material-experimental/mdc-slider): add directionality tests (#22…
wagnermaciel Apr 26, 2021
24c143a
fix(material-experimental/mdc-slider): keep slider ui in sync with fo…
wagnermaciel Apr 29, 2021
585ddd9
fix(material-experimental/mdc-slider): fix unit tests after rebasing
wagnermaciel Apr 29, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scripts/check-mdc-exports-config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const config = {
// The MDC sidenav hasn't been implemented yet.
skippedPackages: ['mdc-sidenav'],
skippedPackages: ['mdc-sidenav', 'mdc-slider'],
skippedExports: {
'mdc-chips': [
// These components haven't been implemented for MDC due to a different accessibility pattern.
Expand Down
5 changes: 3 additions & 2 deletions src/cdk/testing/testbed/fake-events/dispatch-events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export function dispatchPointerEvent(node: Node, type: string, clientX = 0, clie
* Shorthand to dispatch a touch event on the specified coordinates.
* @docs-private
*/
export function dispatchTouchEvent(node: Node, type: string, x = 0, y = 0) {
return dispatchEvent(node, createTouchEvent(type, x, y));
export function dispatchTouchEvent(node: Node, type: string, pageX = 0, pageY = 0, clientX = 0,
clientY = 0) {
return dispatchEvent(node, createTouchEvent(type, pageX, pageY, clientX, clientY));
}
4 changes: 2 additions & 2 deletions src/cdk/testing/testbed/fake-events/event-objects.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ export function createPointerEvent(type: string, clientX = 0, clientY = 0,
* Creates a browser TouchEvent with the specified pointer coordinates.
* @docs-private
*/
export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
export function createTouchEvent(type: string, pageX = 0, pageY = 0, clientX = 0, clientY = 0) {
// In favor of creating events that work for most of the browsers, the event is created
// as a basic UI Event. The necessary details for the event will be set manually.
const event = document.createEvent('UIEvent');
const touchDetails = {pageX, pageY};
const touchDetails = {pageX, pageY, clientX, clientY};

// TS3.6 removes the initUIEvent method and suggests porting to "new UIEvent()".
(event as any).initUIEvent(type, true, true, window, 0);
Expand Down
65 changes: 50 additions & 15 deletions src/dev-app/mdc-slider/mdc-slider-demo.html
Original file line number Diff line number Diff line change
@@ -1,53 +1,88 @@
<h1>Default Slider</h1>
Label <mat-slider #slidey aria-label="Basic slider"></mat-slider>
<span>Label</span>
<mat-slider>
<input #slidey matSliderThumb>
</mat-slider>
{{slidey.value}}

<h1>Colors</h1>
<mat-slider color="primary" value="50" thumbLabel aria-label="Primary color slider"></mat-slider>
<mat-slider color="accent" value="50" thumbLabel aria-label="Accent color slider"></mat-slider>
<mat-slider color="warn" value="50" thumbLabel aria-label="Warn color slider"></mat-slider>
<mat-slider color="primary" discrete>
<input value="50" matSliderThumb>
</mat-slider>
<mat-slider color="accent" discrete>
<input value="50" matSliderThumb>
</mat-slider>
<mat-slider color="warn">
<input value="50" matSliderThumb>
</mat-slider>

<h1>Slider with Min and Max</h1>
<input [(ngModel)]="min" type="number">
<mat-slider [min]="min" [max]="max" tickInterval="5" #slider2 aria-label="Min & max slider">
<mat-slider [min]="min" [max]="max" step="5" discrete showTickMarks>
<input #slider2 matSliderThumb>
</mat-slider>
{{slider2.value}}
<input [(ngModel)]="max" type="number">

<h1>Disabled Slider</h1>
<mat-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1" aria-label="Disabled slider">
<mat-slider disabled [step]="1">
<input [(ngModel)]="disabledValue" matSliderThumb>
</mat-slider>
<input [(ngModel)]="disabledValue" type="number">

<h1>Slider with set value</h1>
<mat-slider value="43" aria-label="Initial value slider"></mat-slider>
<mat-slider>
<input value="43" matSliderThumb>
</mat-slider>

<h1>Slider with step defined</h1>
<mat-slider min="1" max="100" step="20" #slider5 aria-label="Slider with step"></mat-slider>
<mat-slider min="1" max="100" step="20">
<input #slider5 matSliderThumb>
</mat-slider>
{{slider5.value}}

<h1>Slider with set tick interval</h1>
<mat-slider tickInterval="auto" aria-label="Slider with auto ticks"></mat-slider>
<mat-slider tickInterval="9" aria-label="Slider with ticks"></mat-slider>
<mat-slider discrete showTickMarks>
<input matSliderThumb>
</mat-slider>
<mat-slider step="9" discrete showTickMarks>
<input matSliderThumb>
</mat-slider>

<h1>Slider with Thumb Label</h1>
<mat-slider thumbLabel aria-label="Slider with thumb label"></mat-slider>
<mat-slider discrete>
<input matSliderThumb>
</mat-slider>

<h1>Slider with one-way binding</h1>
<mat-slider [value]="val" step="40" aria-label="Slider with value binding"></mat-slider>
<mat-slider step="10">
<input [value]="val" matSliderThumb>
</mat-slider>
<input [(ngModel)]="val" type="number">

<h1>Slider with two-way binding</h1>
<mat-slider [(ngModel)]="demo" step="40" aria-label="Slider with ngModel"></mat-slider>
<mat-slider step="40">
<input [(ngModel)]="demo" matSliderThumb>
</mat-slider>
<input [(ngModel)]="demo" type="number">

<h1>Set/lost focus to show thumblabel programmatically</h1>
<mat-slider #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
<mat-slider discrete>
<input #demoSlider="matSliderThumb" matSliderThumb>
</mat-slider>
<button (click)="demoSlider.focus()">Focus Slider</button>
<button (click)="demoSlider.blur()">Blur Slider</button>

<mat-tab-group>
<mat-tab label="One">
<mat-slider min="1" max="5" value="3" aria-label="Slider in a tab"></mat-slider>
<mat-slider min="1" max="5">
<input value="3" matSliderThumb>
</mat-slider>
</mat-tab>
</mat-tab-group>

<h1>Range slider</h1>
<mat-slider min="200" max="500" step="100" discrete showTickMarks>
<input value="300" matSliderStartThumb>
<input value="400" matSliderEndThumb>
</mat-slider>
1 change: 1 addition & 0 deletions src/dev-app/mdc-slider/mdc-slider-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {Component} from '@angular/core';
@Component({
selector: 'mdc-slider-demo',
templateUrl: 'mdc-slider-demo.html',
styles: ['.mat-mdc-slider { width: 300px; }'],
})
export class MdcSliderDemo {
demo: number;
Expand Down
2 changes: 0 additions & 2 deletions src/dev-app/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ $candy-app-theme: mat.define-light-theme((
@include experimental.all-mdc-component-themes($candy-app-theme);
@include experimental.column-resize-theme($candy-app-theme);
@include experimental.popover-edit-theme($candy-app-theme);
// We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
@include mdc-slider-theme.theme($candy-app-theme);

.demo-strong-focus {
// Include base styles for strong focus indicators.
Expand Down
15 changes: 14 additions & 1 deletion src/e2e-app/mdc-slider/mdc-slider-e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,20 @@ import {Component} from '@angular/core';

@Component({
selector: 'mdc-slider-e2e',
template: `<mat-slider></mat-slider>`,
template: `
<mat-slider id="standard-slider">
<input aria-label="Standard slider" matSliderThumb>
</mat-slider>

<mat-slider id="disabled-slider" disabled>
<input aria-label="Disabled slider" matSliderThumb>
</mat-slider>

<mat-slider id="range-slider">
<input aria-label="Range slider start thumb" matSliderStartThumb>
<input aria-label="Range slider end thumb" matSliderEndThumb>
</mat-slider>
`,
})
export class MdcSliderE2e {
}
1 change: 1 addition & 0 deletions src/material-experimental/mdc-helpers/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ npm_sass_library(
"@npm//@material/list",
"@npm//@material/menu-surface",
"@npm//@material/radio",
"@npm//@material/slider",
"@npm//@material/snackbar",
"@npm//@material/switch",
"@npm//@material/tab",
Expand Down
16 changes: 15 additions & 1 deletion src/material-experimental/mdc-slider/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ ng_module(
["**/*.ts"],
exclude = ["**/*.spec.ts"],
),
assets = [":slider_scss"] + glob(["**/*.html"]),
assets = [
":slider_scss",
":slider_thumb_scss",
] + glob(["**/*.html"]),
module_name = "@angular/material-experimental/mdc-slider",
deps = [
"//src/cdk/bidi",
Expand All @@ -35,6 +38,7 @@ sass_library(
deps = [
"//src/cdk/a11y:a11y_scss_lib",
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
],
)

Expand All @@ -50,6 +54,11 @@ sass_binary(
],
)

sass_binary(
name = "slider_thumb_scss",
src = "slider-thumb.scss",
)

###########
# Testing
###########
Expand All @@ -66,8 +75,11 @@ ng_test_library(
"//src/cdk/keycodes",
"//src/cdk/platform",
"//src/cdk/testing/private",
"//src/material/core",
"@npm//@angular/forms",
"@npm//@angular/platform-browser",
"@npm//@material/slider",
"@npm//rxjs",
],
)

Expand All @@ -84,7 +96,9 @@ ng_e2e_test_library(
name = "e2e_test_sources",
srcs = glob(["**/*.e2e.spec.ts"]),
deps = [
":mdc-slider",
"//src/cdk/testing/private/e2e",
"@npm//@material/slider",
],
)

Expand Down
90 changes: 80 additions & 10 deletions src/material-experimental/mdc-slider/_slider-theme.scss
Original file line number Diff line number Diff line change
@@ -1,24 +1,46 @@
// TODO: disabled until we implement the new MDC slider.
// @use '@material/slider' as mdc-slider;
@use 'sass:map';

@use '@material/slider/slider' as mdc-slider;
@use '@material/slider/slider-theme';
@use '@material/theme/variables' as theme-variables;
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/typography/typography';
@use '../../material/core/ripple/ripple-theme';
@use '../../material/core/theming/theming';

@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
@include mdc-helpers.mat-using-mdc-theme($config) {
// TODO: disabled until we implement the new MDC slider.
// @include mdc-slider-core-styles($query: $mat-theme-styles-query);
@include mdc-slider.without-ripple($query: mdc-helpers.$mat-theme-styles-query);

.mat-mdc-slider {
&.mat-primary, &.mat-accent, &.mat-warn {
$is-dark: map-get($config, is-dark);
$indicator-color: if($is-dark, white, black);
$indicator-text-color: if($is-dark, black, white);
$indicator-opacity: if($is-dark, 0.9, 0.6);

@include slider-theme.value-indicator-color(
$color: $indicator-color,
$opacity: $indicator-opacity,
$query: mdc-helpers.$mat-theme-styles-query
);
@include slider-theme.value-indicator-text-color(
$color: $indicator-text-color,
$query: mdc-helpers.$mat-theme-styles-query
);
}

&.mat-primary {
// TODO: disabled until we implement the new MDC slider.
// @include mdc-slider-color-accessible(primary, $mat-theme-styles-query);
@include _custom-slider-color(primary, on-primary);
}

&.mat-accent {
@include _custom-slider-color(secondary, on-secondary);
}

&.mat-warn {
// TODO: disabled until we implement the new MDC slider.
// @include mdc-slider-color-accessible(error, $mat-theme-styles-query);
@include _custom-slider-color(error, on-error);
}
}
}
Expand All @@ -28,8 +50,7 @@
$config: typography.private-typography-to-2018-config(
theming.get-typography-config($config-or-theme));
@include mdc-helpers.mat-using-mdc-typography($config) {
// TODO: disabled until we implement the new MDC slider.
// @include mdc-slider-core-styles($query: $mat-typography-styles-query);
@include mdc-slider.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
}
}

Expand All @@ -54,3 +75,52 @@
}
}

@mixin _custom-slider-color($color, $on-color) {
@include slider-theme.thumb-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mat-theme-styles-query
);
@include slider-theme.track-active-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mat-theme-styles-query
);
@include slider-theme.track-inactive-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mat-theme-styles-query
);
@include slider-theme.tick-mark-active-color(
$color-or-map: (
default: $on-color,
disabled: surface,
),
$query: mdc-helpers.$mat-theme-styles-query
);
@include slider-theme.tick-mark-inactive-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mat-theme-styles-query
);
$ripple-color: map.get(theme-variables.$property-values, $color);
@include ripple-theme.color((
foreground: (
base: $ripple-color
),
));
.mat-mdc-slider-hover-ripple {
background-color: rgba($ripple-color, 0.05);
}
.mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
background-color: rgba($ripple-color, 0.2);
}
}
Loading