Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat(checkbox): align with 2018 material design spec #12493

Merged
merged 1 commit into from
Sep 19, 2018
Merged

feat(checkbox): align with 2018 material design spec #12493

merged 1 commit into from
Sep 19, 2018

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Aug 2, 2018

Aligns the checkbox component with the latest Material design spec.

angular_material_-_google_chrome_2018-08-02_20-01-15
angular_material_-_google_chrome_2018-08-02_21-51-55

@crisbeto crisbeto added merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: major This PR is targeted for the next major release labels Aug 2, 2018
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 2, 2018
@crisbeto
Copy link
Member Author

crisbeto commented Aug 2, 2018

Caretaker note: aside from the screenshot diffs of checkboxes, this PR will probably cause diff failures for mat-selection-list and mat-select in multiple mode which use the mat-pseudo-checkbox.

devversion
devversion reviewed Aug 2, 2018
View reviewed changes
src/lib/checkbox/checkbox.ts Outdated
.monitor(this._inputElement.nativeElement)
.subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
this._focusMonitor.monitor(elementRef.nativeElement, true).subscribe(focusOrigin => {
// TODO(paul): support `program`. See https://github.com/angular/material2/issues/9889
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be able to remove this TODO since we no longer control the focus ripple based on the FocusMonitor.

jelbourn
jelbourn reviewed Aug 3, 2018
View reviewed changes
src/lib/core/style/_checkbox-common.scss
@@ -1,7 +1,7 @@
@import './variables';

// The width/height of the checkbox element.
$mat-checkbox-size: $mat-toggle-size !default;
$mat-checkbox-size: 16px !default;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the checkbox is getting smaller, I think we need to add an amount of clickable padding around it such that the total size is the same. Two reasons:

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per our discussion on Slack:

  • Screenshot diffs will change regardless since the square is smaller. As for layouts changing, it might not be that big of a difference, because we don't have line wrapping on mat-checkbox.
  • Click targets shouldn't be an issue, because checkboxes have a large label next to them that is also clickable.

I think that we should do a presubmit to see how big of an issue this would be.

@crisbeto crisbeto force-pushed the checkbox-new-spec branch 2 times, most recently from ea759e3 to c1bf2a0 Compare August 3, 2018 16:44
jelbourn
jelbourn approved these changes Aug 7, 2018
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

We'll see how the presubmits go before deciding whether to adjust these changes

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Aug 7, 2018
@ngbot
Copy link

ngbot bot commented Aug 7, 2018

I see that you just added the pr: merge ready label, but the following checks are still failing:
    failure status "continuous-integration/travis-ci/pr" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

@jelbourn jelbourn added the P2 The issue is important to a large percentage of users, with a workaround label Aug 14, 2018
@ngbot
Copy link

ngbot bot commented Aug 21, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

1 similar comment
@ngbot
Copy link

ngbot bot commented Aug 21, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@crisbeto crisbeto force-pushed the checkbox-new-spec branch 2 times, most recently from f963f2c to 2fb4d33 Compare August 27, 2018 18:23
@ngbot
Copy link

ngbot bot commented Aug 31, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@jelbourn
Copy link
Member

jelbourn commented Sep 6, 2018

I was looking at the spec for this, and it seems to specify 24px as the size of the checkbox:
image

@crisbeto
Copy link
Member Author

crisbeto commented Sep 7, 2018

It does, but note how the ruler's "arms" aren't flush against the bottom and top of the control, whereas they are for the radio buttons and slide toggle. I remember triple-checking this, because it seemed like a weird change, but also measuring the mockups themselves and comparing against MDC showed it to be 20px.

@jelbourn
Copy link
Member

jelbourn commented Sep 7, 2018

Yeah, I tried out 24px locally and it looked absurd. I sent an email to the material design team asking for a clarification, but I don't expect a response.

@crisbeto crisbeto mentioned this pull request Sep 7, 2018
Merged
@ngbot
Copy link

ngbot bot commented Sep 11, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@ngbot
Copy link

ngbot bot commented Sep 14, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@crisbeto
feat(checkbox): align with 2018 material design spec
c110943 
Aligns the checkbox component with the latest Material design spec.
@mmalerba mmalerba merged commit 95acccc into angular:master Sep 19, 2018
@mmalerba
Copy link
Contributor

@crisbeto Did we intentionally remove the persistent ripple on keyboard focus? I see a screendiff complaining about it

@crisbeto
Copy link
Member Author

The programmatically-triggered persistent ripple was replaced with a "permanent" ripple that is always inside the ripple container, because we also have to show a ripple on hover.

@jrovny
Copy link

jrovny commented Oct 29, 2018

I definitely appreciate this change. The box portion of the checkbox was way too big in previous Material versions which made complex forms with lots of controls more awkward.

@crisbeto crisbeto mentioned this pull request Nov 27, 2018
Closed
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@devversion devversion devversion left review comments

@jelbourn jelbourn jelbourn approved these changes

@josephperrott josephperrott josephperrott approved these changes

Assignees

@jelbourn jelbourn

Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note P2 The issue is important to a large percentage of users, with a workaround target: major This PR is targeted for the next major release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@crisbeto @jelbourn @mmalerba @jrovny @devversion @josephperrott @googlebot