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

list: secondary action checkboxes aren't aligned with secondary action icon buttons #11966

Closed
Splaktar opened this issue Jul 16, 2020 · 0 comments · Fixed by #11971
Closed

list: secondary action checkboxes aren't aligned with secondary action icon buttons #11966

Splaktar opened this issue Jul 16, 2020 · 0 comments · Fixed by #11971
Assignees
@Splaktar
Labels
has: Pull Request A PR has been created to address this issue 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 ui: CSS
Milestone
1.2.0

Comments

@Splaktar
Copy link
Member

Bug

Demo and steps to reproduce the issue

Demo URL (required)*: https://material.angularjs.org/HEAD/demo/list

Detailed Reproduction Steps

  1. Look at the last demo on the page, the last section

Explain the expected behavior

The checkboxes should be aligned with the icon buttons.

Explain the current behavior

The checkboxes aren't aligned with the icon buttons.

Discuss the use-case or motivation for changing the existing behavior

The layout should be the same as in 1.1.24.

List the affected versions of AngularJS, Material, OS, and browsers

  • AngularJS: 1.2.0-next.0
  • AngularJS Material: 1.8.0
  • OS: macOS Catalina
  • Browsers: Chrome 83

Add anything else we should know

Screenshots

Screen Shot 2020-07-16 at 18 24 20
@Splaktar Splaktar added P1: urgent Urgent issues that should be addressed in the next minor or patch release. severity: regression This issue is related to a regression labels Jul 16, 2020
@Splaktar Splaktar self-assigned this Jul 16, 2020
@Splaktar Splaktar added this to the 1.2.0 milestone Jul 16, 2020
@Splaktar Splaktar added ui: CSS has: Pull Request A PR has been created to address this issue labels Jul 16, 2020
Splaktar added a commit that referenced this issue Jul 22, 2020
@Splaktar
fix(list): fix checkbox alignment and match dense heights to spec
1a5ef09 
- 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
@Splaktar Splaktar mentioned this issue Jul 22, 2020
Merged
3 tasks
Splaktar added a commit that referenced this issue Jul 22, 2020
@Splaktar
fix(list): fix checkbox alignment and match dense heights to spec
12605fe 
- 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 added a commit that referenced this issue Jul 22, 2020
@Splaktar
fix(list): fix checkbox alignment and match dense heights to spec
698b3ba 
- 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 added a commit that referenced this issue Jul 22, 2020
@Splaktar
fix(list): fix checkbox alignment and match dense heights to spec
a13722e 
- 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.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

Labels
has: Pull Request A PR has been created to address this issue 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 ui: CSS
Projects
None yet
Milestone
1.2.0
Development

Successfully merging a pull request may close this issue.

fix(list): fix checkbox alignment and match dense heights to spec angular/material
1 participant
@Splaktar