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

fix(list): fix checkbox alignment and match dense heights to spec #11971

Merged
merged 1 commit into from
Jul 22, 2020

Conversation

Splaktar
Copy link
Contributor

@Splaktar Splaktar commented Jul 22, 2020

PR Checklist

Please check that your PR fulfills the following requirements:

  • The commit message follows our guidelines
  • Tests for the changes have been added or this is not a bug fix / enhancement
  • Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number:
Fixes #11966

What is the new behavior?

  • match the spec update where md-dense list items are 40px in height by default
    • was 48px in height
  • support .md-dense-disabled
  • for .md-dense lists: align heights with spec for list items with primary icons,
    avatars/avatar icons, secondary buttons, and checkboxes
  • md-subheaders in .md-dense lists should match the single line list item height
    • 48px -> 40px

Does this PR introduce a breaking change?

[x] Yes
[ ] No

BREAKING CHANGE: md-list with the md-dense class has been updated to align with the Material Design specification. This means that md-list-items heights have changed when using md-dense. The md-dense-disabled class is now supported on md-list. After updating to this version, you may need to adjust the layout of your app if you use md-dense with md-list or customize the layout of md-checkboxs within md-list-items.

Other information

Dense

Screen Shot 2020-07-22 at 01 10 02

Default

Screen Shot 2020-07-22 at 01 10 47

@googlebot googlebot added the cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ label Jul 22, 2020
@Splaktar Splaktar self-assigned this Jul 22, 2020
@Splaktar Splaktar requested a review from wagnermaciel July 22, 2020 05:20
@Splaktar Splaktar added this to the 1.2.0 milestone Jul 22, 2020
@Splaktar Splaktar added - Breaking Change CSS: High Density ui: CSS P1: urgent Urgent issues that should be addressed in the next minor or patch release. severity: regression This issue is related to a regression type: bug pr: merge ready This PR is ready for a caretaker to review labels Jul 22, 2020
@Splaktar Splaktar force-pushed the list-fix-checkbox-alignment branch from 1a5ef09 to 12605fe Compare July 22, 2020 05:32
@Splaktar Splaktar added the type: spec alignment For issues related to aligning with the Material Design Spec label Jul 22, 2020
- match the spec update where `md-dense` list items are `40px` in height by default
  - was `48px` in height
- support `.md-dense-disabled`
- for `.md-dense` lists: align heights with spec for list items with primary icons,
  avatars/avatar icons, secondary buttons, and checkboxes
- `md-subheaders` in `.md-dense` lists should match the single line list item height
  - `48px` -> `40px`

Fixes #11966

BREAKING CHANGE: `md-list` with the `md-dense` class has been updated to align with the Material Design specification. This means that `md-list-item`s heights have changed when using `md-dense`. The `md-dense-disabled` class is now supported on `md-list`. After updating to this version, you may need to adjust the layout of your app if you use `md-dense` with `md-list` or customize the layout of `md-checkbox`s within `md-list-item`s.
@Splaktar Splaktar force-pushed the list-fix-checkbox-alignment branch from 12605fe to 698b3ba Compare July 22, 2020 17:15
@Splaktar Splaktar added the pr: lgtm This PR has been approved by the reviewer label Jul 22, 2020
@Splaktar Splaktar merged commit a13722e into master Jul 22, 2020
@Splaktar Splaktar deleted the list-fix-checkbox-alignment branch July 22, 2020 19:52
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
- Breaking Change cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ CSS: High Density P1: urgent Urgent issues that should be addressed in the next minor or patch release. pr: lgtm This PR has been approved by the reviewer pr: merge ready This PR is ready for a caretaker to review severity: regression This issue is related to a regression type: bug 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.

list: secondary action checkboxes aren't aligned with secondary action icon buttons
3 participants