Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(checkbox): update CSS to match spec #8713

Closed
wants to merge 1 commit into from

Conversation

clshortfuse
Copy link
Contributor

@clshortfuse clshortfuse commented Jun 9, 2016

Checkbox did not support a11y minimum touch target and the box was
larger than spec

  • Change checkbox size from 20px to 18px
  • Keep horizontal size flush when text is blank
  • Add md-dense support for checkbox
  • Add inline alignment math to SCSS
  • Increase size of md-checkbox to properly support touch

Fixes #9351, #9927

@clshortfuse
Copy link
Contributor Author

clshortfuse commented Jun 9, 2016

Part of #8209

@clshortfuse clshortfuse force-pushed the specFix-checkbox branch 2 times, most recently from 1decfdd to 69169d6 Compare June 9, 2016 20:57
@clshortfuse clshortfuse force-pushed the specFix-checkbox branch 6 times, most recently from a820435 to 3610828 Compare June 13, 2016 18:05
@clshortfuse clshortfuse added the needs: review This PR is waiting on review from the team label Jun 25, 2016
@clshortfuse clshortfuse force-pushed the specFix-checkbox branch 5 times, most recently from 8aeb8e8 to 6d3c4f1 Compare July 22, 2016 19:00
@clshortfuse clshortfuse added Blocked Progress on this issue is blocked. Primarily used for PRs that are blocked by presubmit feedback. needs: work and removed needs: review This PR is waiting on review from the team Blocked Progress on this issue is blocked. Primarily used for PRs that are blocked by presubmit feedback. labels Aug 4, 2016
@clshortfuse clshortfuse changed the title fix(checkbox) rework checkbox to match Material Design spec feat(checkbox) expand density options for checkbox Aug 4, 2016
@clshortfuse clshortfuse added needs: review This PR is waiting on review from the team CSS: High Density and removed needs: work labels Aug 4, 2016
@clshortfuse clshortfuse force-pushed the specFix-checkbox branch 2 times, most recently from 1153247 to 2ab3aee Compare August 15, 2016 19:22
@clshortfuse clshortfuse removed the g3: pr This PR was posted by an internal or external product team. label Nov 15, 2016
@Splaktar Splaktar changed the title fix(checkbox) update CSS to match spec fix(checkbox): update CSS to match spec Jan 2, 2018
@Splaktar Splaktar assigned Splaktar and unassigned topherfangio Jan 2, 2018
Copy link
Member

@Splaktar Splaktar left a comment

Choose a reason for hiding this comment

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

LGTM as these are just styling changes to better align with the spec.

@Splaktar Splaktar added pr: merge ready This PR is ready for a caretaker to review and removed needs: review This PR is waiting on review from the team labels Jan 2, 2018
@Splaktar Splaktar modified the milestones: 1.2.0, 1.1.6 Jan 2, 2018
@Splaktar
Copy link
Member

Splaktar commented Jan 2, 2018

My guess is that the Google presubmit tests will break due to finicky screenshot tests. But let's give it a shot as see how it goes.

@Splaktar
Copy link
Member

I really like the changes here, but unfortunately this failed the presubmit process due to the following “won’t be able to be merged since it breaks a lot of screendiffs (lots of changes in padding)“.

So this is currently on hold until we can determine if it is possible to move forward without requiring all of the screenshot tests within Google to pass.

@Splaktar Splaktar modified the milestones: 1.1.7, - Backlog Jan 17, 2018
@Splaktar Splaktar modified the milestones: - Backlog, 1.2.0 Jan 29, 2018
@jelbourn
Copy link
Member

Updating: this causes around 80 different test failures for Google apps; it's unlikely we can merge it

@Splaktar Splaktar added pr: lgtm This PR has been approved by the reviewer and removed pr: merge ready This PR is ready for a caretaker to review labels Jun 22, 2018
@Splaktar Splaktar added P2: required Issues that must be fixed. type: spec alignment For issues related to aligning with the Material Design Spec labels Feb 12, 2019
@Splaktar Splaktar added needs: rebase This PR needs to be rebased on the latest commits from master and conflicts need to be resolved and removed pr: presubmit-failures labels Jun 19, 2020
Splaktar pushed a commit that referenced this pull request Jun 19, 2020
Checkbox did not support a11y minimum touch target and the box was
larger than spec

 - Change checkbox size from 20px to 18px
 - Keep horizontal size flush when text is blank
 - Add md-dense support for checkbox
 - Add inline alignment math to SCSS
 - Increase size of md-checkbox to properly support touch
 - Add demo for md-dense support

Fixes #9351. Fixes #9927. Closes #8713.
Splaktar pushed a commit that referenced this pull request Jun 29, 2020
Checkbox did not support a11y minimum touch target and the box was
larger than spec.

 - Change checkbox size from 20px to 18px
 - Keep horizontal size flush when text is blank
 - Add md-dense support for checkbox
 - Add inline alignment math to SCSS
 - Increase size of md-checkbox to properly support touch
 - Add demo for md-dense support

Fixes #9351. Fixes #9927. Closes #8713.

BREAKING CHANGE: The default size and spacing for `md-checkbox` has been updated to align with the Material Design specification. Additionally, many new Sass variables have been added for customizing the size and spacing of `md-checkbox`. The `md-dense` class is now supported. After updating to this version, you may need to adjust the layout of your app due to the larger touch-friendly size of checkbox. You may also want to make use of `md-dense` in cases where space is limited.
Splaktar pushed a commit that referenced this pull request Jun 29, 2020
Checkbox did not support a11y minimum touch target and the box was
larger than spec.

 - Change checkbox size from 20px to 18px
 - Keep horizontal size flush when text is blank
 - Add md-dense support for checkbox
 - Add inline alignment math to SCSS
 - Increase size of md-checkbox to properly support touch
 - Add demo for md-dense support

Fixes #9351. Fixes #9927. Closes #8713.

BREAKING CHANGE: The default size and spacing for `md-checkbox` has been updated to align with the Material Design specification. Additionally, many new Sass variables have been added for customizing the size and spacing of `md-checkbox`. The `md-dense` class is now supported. After updating to this version, you may need to adjust the layout of your app due to the larger touch-friendly size of checkbox. You may also want to make use of `md-dense` in cases where space is limited.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y This issue is related to accessibility CSS: High Density g3: reported The issue was reported by an internal or external product team. needs: rebase This PR needs to be rebased on the latest commits from master and conflicts need to be resolved P2: required Issues that must be fixed. pr: lgtm This PR has been approved by the reviewer type: spec alignment For issues related to aligning with the Material Design Spec ui: CSS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

checkbox. Release 1.1.0-rc.5. Chrome v.52. Label is not centered
6 participants