From 698b3ba551b6d28511d225fb64620a80cd513c0b Mon Sep 17 00:00:00 2001
From: Michael Prentice <splaktar@gmail.com>
Date: Wed, 22 Jul 2020 01:16:53 -0400
Subject: [PATCH] fix(list): fix checkbox alignment and match dense heights to
 spec

- 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.
---
 src/components/button/button.scss |  2 --
 src/components/list/list.scss     | 34 +++++++++++++++++++++++--------
 src/core/style/_variables.scss    |  9 ++++----
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 14170ece76d..a31906780ac 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -22,8 +22,6 @@ $button-fab-mini-line-height: rem(4.00) !default;
 
 $button-fab-toast-offset: $button-fab-height * 0.75 !default;
 
-$icon-button-height: rem(4.000) !default;
-$icon-button-width: rem(4.000) !default;
 $icon-button-margin: rem(0.600) !default;
 
 // Fix issue causing buttons in Firefox to be 2px bigger than they should
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index 27081dfff42..83ea599c3e0 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -28,7 +28,7 @@ $list-item-height: 6 * $baseline-grid !default;
 $list-item-two-line-height: 9 * $baseline-grid !default;
 $list-item-three-line-height: 11 * $baseline-grid !default;
 
-$list-item-dense-height: 12 * $dense-baseline-grid !default;
+$list-item-dense-height: 10 * $dense-baseline-grid !default;
 $list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;
 $list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
 $list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;
@@ -48,7 +48,7 @@ md-list {
     line-height: $list-header-line-height;
   }
 
-  &.md-dense {
+  &.md-dense:not(.md-dense-disabled) {
     md-list-item {
       &,
       .md-list-item-inner {
@@ -65,15 +65,28 @@ md-list {
 
         > md-icon:first-child:not(.md-avatar-icon) {
           @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width, auto);
+          margin-top: $dense-baseline-grid;
+          margin-bottom: $dense-baseline-grid;
         }
         .md-avatar, .md-avatar-icon {
           @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width, auto);
+          margin-top: $dense-baseline-grid + 2px;
+          margin-bottom: $dense-baseline-grid + 2px;
         }
         .md-avatar {
           flex: none;
           width: $list-item-dense-primary-avatar-width;
           height: $list-item-dense-primary-avatar-width;
         }
+        .md-secondary-container {
+          .md-secondary.md-button {
+            margin-top: $dense-baseline-grid;
+            margin-bottom: $dense-baseline-grid;
+          }
+          md-checkbox:not(.md-dense-disabled) {
+            min-height: $icon-button-height;
+          }
+        }
       }
 
       &.md-2-line,
@@ -123,6 +136,10 @@ md-list {
         }
       }
     }
+    .md-subheader-inner {
+      padding-top: $dense-baseline-grid * 3;
+      padding-bottom: $dense-baseline-grid * 3;
+    }
   }
 }
 
@@ -277,9 +294,9 @@ md-list-item {
 
     & > md-checkbox {
       width: 3 * $baseline-grid;
-      @include rtl(margin-left, 3px, 29px);
-      @include rtl(margin-right, 29px, 3px);
-      margin-top: 16px;
+      min-height: $icon-button-height;
+      @include rtl(margin-left, 0px, 29px);
+      @include rtl(margin-right, 29px, 0px);
     }
 
     .md-secondary-container {
@@ -311,11 +328,12 @@ md-list-item {
       }
 
       md-checkbox {
-        margin-top: 0;
-        margin-bottom: 0;
+        margin: 0 6px;
+        padding: 0 8px;
+        min-height: $icon-button-height;
 
         &:last-child {
-          width: 3 * $baseline-grid;
+          width: $icon-button-width;
           @include rtl-prop(margin-right, margin-left, 0, auto);
         }
       }
diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss
index 3e225c96768..33fd3501204 100644
--- a/src/core/style/_variables.scss
+++ b/src/core/style/_variables.scss
@@ -30,9 +30,6 @@ $layout-breakpoint-sm:     960px !default;
 $layout-breakpoint-md:     1280px !default;
 $layout-breakpoint-lg:     1920px !default;
 
-// Button
-$button-left-right-padding: rem(0.800) !default;
-
 // Icon
 $icon-size: rem(2.400) !default;
 
@@ -119,8 +116,12 @@ $material-leave-duration: 0.3s;
 $material-leave-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
 $material-leave: all $material-leave-duration $material-leave-timing-function;
 
+// Button
+$button-left-right-padding: rem(0.800) !default;
+$icon-button-height: rem(4.000) !default;
+$icon-button-width: rem(4.000) !default;
+
 // Fab Buttons (shared between buttons.scss and fab*.scss)
-// -------------------------------------------
 $button-fab-width: rem(5.600) !default;
 $button-fab-height: rem(5.600) !default;
 $button-fab-padding: rem(1.60) !default;