feat(material-experimental/mdc-slider): implement MatSlider #21680

wagnermaciel · 2021-01-23T15:52:14Z

No description provided.

* mouseenter and mouseleave events are needed for displaying ripples * _knob and _getHostElement() will be needed for the SliderAdapter implementation * _getThumb() will be needed to implement the ripples

src/material-experimental/mdc-slider/slider-thumb-decorator.ts

crisbeto · 2021-01-24T09:30:17Z

src/material-experimental/mdc-slider/slider-thumb-decorator.ts

+  host: {
+    'class': 'mdc-slider__thumb',
+    '(mouseenter)': '_mouseenter.emit()',
+    '(mouseleave)': '_mouseleave.emit()',


Would these need to account for touch devices?

Yes. Would it be acceptable for me to add a TODO here and implement the support for this in a later PR?

src/material-experimental/mdc-slider/slider-thumb-decorator.ts

wagnermaciel · 2021-01-25T16:21:07Z

@crisbeto Ready for re-review 👍🏽

wagnermaciel · 2021-01-25T18:01:35Z

@mmalerba Ready for re-review 👍🏽

src/material-experimental/mdc-slider/slider-thumb-decorator.html

src/material-experimental/mdc-slider/slider-thumb-decorator.ts

src/material-experimental/mdc-slider/slider-thumb-decorator.html

wagnermaciel · 2021-01-27T17:37:07Z

@jelbourn @mmalerba Ready for re-review 👍🏽

mmalerba · 2021-01-27T18:04:14Z

src/material-experimental/mdc-slider/slider.ts

+  @Input() displayWith: ((value: number) => string) | null;
+
+  /** Event emitted when a slider thumb value has changed. */
+  @Output() readonly change: EventEmitter<MatSliderChange> = new EventEmitter<MatSliderChange>();


Do we need these on the container? Can't the user just listen to change, input, etc. events on the individual thumbs?

I was just matching the old API. I can remove them if you'd like

It's been a while since we discussed the API. I think we decided that we were going to try to keep most of the API but split it between the container and thumbs. That way people would need to make some changes, but hopefully they would be fairly straightforward, just adding the wrapper and moving a few properties to it. @jelbourn is that what you remember too?

Let's go with that since there are relatively few usages in Google so it should be pretty straightforward to swap

src/material-experimental/mdc-slider/slider.ts

jelbourn · 2021-01-27T19:04:15Z

src/material-experimental/mdc-slider/slider.ts

+
+  /** Whether the slider displays tick marks along the slider track. */
+  @Input()
+  get hasTickMarks(): boolean { return this._hasTickMarks; }


What was the rationale for changing this API from the current MatSlider (which uses tickInterval for this? I also think the API would probably be something like showTickMarks

I didn't implement tickInterval because it is not part of the MDC implementation. We'd have to add that functionality ourselves

I'm ok with renaming this to showTickMarks (again, I was just copying the variable name from the MDC foundation)

src/material-experimental/mdc-slider/slider.ts

jelbourn · 2021-01-27T19:12:12Z

src/material-experimental/mdc-slider/slider.ts

+   * Returns the defaultView of the injected document
+   * if available or fallback to global window reference.
+   */
+  _getWindow(): Window {


What is this needed for?

It is used by SliderAdapter. It will be changed to a property. See this comment

src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html

wagnermaciel · 2021-01-27T21:09:14Z

@jelbourn Ready for re-review 👍🏽

* omitted code in kitchen-sink-mdc.html instead of commenting it out * deleted the MatSliderChange class * renamed MatSliderInteraction to MatSliderThumbInteractionEvent and made it an interface instead of a class * renamed isDisabled to disabled * renamed isDiscrete to discrete * renamed hasTickMarks to showTickMarks * removed spaces from object literals * deleted change and input @outputs * use properties instead of getters for _document, _window, and _hostElement

google-cla · 2021-02-02T02:11:20Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

google-cla · 2021-02-02T02:11:30Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

google-cla · 2021-02-02T02:11:35Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

google-cla · 2021-02-02T02:11:40Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

src/material-experimental/mdc-slider/slider.ts

src/material-experimental/mdc-slider/slider-thumb.ts

src/material-experimental/mdc-slider/slider.ts

* move MatSliderDragEvent to slider-thumb.ts * move drag events from MatSlider to the MatSliderThumbs * deleted _hostElement conveniece variables * unbinded from MatSlider * added underscores to getValue and setValue

google-cla · 2021-02-08T16:13:45Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

mmalerba

LGTM

…21680)

angular-automatic-lock-bot · 2021-03-11T00:09:54Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 23, 2021

wagnermaciel added merge safe target: feature This PR is targeted for a feature branch (outside of main and semver branches) labels Jan 23, 2021

wagnermaciel force-pushed the slider-thumb-decorator branch from 188b1d9 to 6b3230c Compare January 23, 2021 16:12

feat(material-experimental/mdc-slider): create MatSliderThumbDecorator

4dfee9b

* mouseenter and mouseleave events are needed for displaying ripples * _knob and _getHostElement() will be needed for the SliderAdapter implementation * _getThumb() will be needed to implement the ripples

wagnermaciel force-pushed the slider-thumb-decorator branch from 6b3230c to 4dfee9b Compare January 23, 2021 16:15

wagnermaciel marked this pull request as ready for review January 23, 2021 16:17

wagnermaciel requested a review from devversion as a code owner January 23, 2021 16:17

crisbeto reviewed Jan 24, 2021

View reviewed changes

wagnermaciel requested a review from crisbeto January 25, 2021 16:20

wagnermaciel requested review from jelbourn and mmalerba January 25, 2021 16:21

jelbourn reviewed Jan 26, 2021

View reviewed changes

crisbeto approved these changes Jan 26, 2021

View reviewed changes

src/material-experimental/mdc-slider/slider-thumb-decorator.html Outdated Show resolved Hide resolved

wagnermaciel force-pushed the slider-thumb-decorator branch 2 times, most recently from 2eb606f to 290a7e9 Compare January 27, 2021 04:35

wagnermaciel requested a review from jelbourn January 27, 2021 04:36

wagnermaciel force-pushed the slider-thumb-decorator branch from 290a7e9 to 4aadced Compare January 27, 2021 16:15

feat(material-experimental/mdc-slider): implement MatSlider

9fd3f2e

wagnermaciel force-pushed the slider-thumb-decorator branch from 4aadced to 9fd3f2e Compare January 27, 2021 16:29

mmalerba reviewed Jan 27, 2021

View reviewed changes

wagnermaciel requested a review from mmalerba January 27, 2021 18:46

jelbourn reviewed Jan 27, 2021

View reviewed changes

wagnermaciel force-pushed the slider-thumb-decorator branch 2 times, most recently from 1566368 to 373958d Compare January 27, 2021 22:40

wagnermaciel added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 2, 2021

angular deleted a comment from google-cla bot Feb 2, 2021

google-cla bot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Feb 2, 2021

angular deleted a comment from google-cla bot Feb 2, 2021

wagnermaciel added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Feb 2, 2021

mmalerba reviewed Feb 2, 2021

View reviewed changes

fix(material-experimental/mdc-slider): code review changes

3ebf3bc

* move MatSliderDragEvent to slider-thumb.ts * move drag events from MatSlider to the MatSliderThumbs * deleted _hostElement conveniece variables * unbinded from MatSlider * added underscores to getValue and setValue

google-cla bot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Feb 8, 2021

wagnermaciel added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Feb 8, 2021

mmalerba approved these changes Feb 8, 2021

View reviewed changes

mmalerba added the action: merge The PR is ready for merge by the caretaker label Feb 8, 2021

wagnermaciel changed the title ~~feat(material-experimental/mdc-slider): create MatSliderThumbDecorator~~ feat(material-experimental/mdc-slider): implement MatSlider Feb 8, 2021

wagnermaciel merged commit 48c8f40 into angular:mdc-slider Feb 8, 2021

wagnermaciel added a commit to wagnermaciel/components that referenced this pull request Feb 8, 2021

feat(material-experimental/mdc-slider): implement MatSlider (angular#…

5f852eb

…21680)

wagnermaciel added a commit to wagnermaciel/components that referenced this pull request Feb 17, 2021

feat(material-experimental/mdc-slider): implement MatSlider (angular#…

73c9ba7

…21680)

wagnermaciel added a commit to wagnermaciel/components that referenced this pull request Feb 17, 2021

feat(material-experimental/mdc-slider): implement MatSlider (angular#…

b3a6dc5

…21680)

wagnermaciel added a commit to wagnermaciel/components that referenced this pull request Mar 4, 2021

feat(material-experimental/mdc-slider): implement MatSlider (angular#…

d3adff0

…21680)

angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 11, 2021

feat(material-experimental/mdc-slider): implement MatSlider #21680

feat(material-experimental/mdc-slider): implement MatSlider #21680

Uh oh!

Conversation

wagnermaciel commented Jan 23, 2021

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wagnermaciel Jan 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wagnermaciel commented Jan 25, 2021

Uh oh!

wagnermaciel commented Jan 25, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wagnermaciel commented Jan 27, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

wagnermaciel commented Jan 27, 2021

Uh oh!

google-cla bot commented Feb 2, 2021

Uh oh!

google-cla bot commented Feb 2, 2021

Uh oh!

google-cla bot commented Feb 2, 2021

Uh oh!

google-cla bot commented Feb 2, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

google-cla bot commented Feb 8, 2021

Uh oh!

mmalerba left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Mar 11, 2021

Uh oh!

Uh oh!

wagnermaciel Jan 25, 2021 •

edited

Loading