fix(list): Fixed layout of list variants.

PiperOrigin-RevId: 464498232
material-components · Aug 1, 2022 · a885a1f · a885a1f
1 parent c277252
commit a885a1f
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/list/lib/_tokens.scss b/list/lib/_tokens.scss
@@ -11,7 +11,7 @@
     list-item-one-line-container-height: 56px,
     list-item-two-line-container-height: 72px,
     list-item-three-line-container-height: 88px,
-    list-item-container-color: transparent,
+    list-item-container-color: #fff,
     list-item-label-text-font: string.unquote('Roboto, sans-serif'),
     list-item-label-text-size: 16px,
     list-item-label-text-tracking: 0.03125rem,

diff --git a/list/lib/image/_list-item-image.scss b/list/lib/image/_list-item-image.scss
@@ -9,6 +9,8 @@
 @mixin static-styles() {
   .md3-list-item__image {
     display: inline-flex;
+    margin-block-end: 8px;
+    margin-block-start: 8px;
     margin-inline-start: 16px;
   }
 }
diff --git a/list/lib/listitem/_list-item-theme.scss b/list/lib/listitem/_list-item-theme.scss
@@ -298,19 +298,19 @@ $light-theme: tokens.md-comp-list-values();
 
 @mixin _set-one-line-container-height($height) {
   &.md3-list-item--with-one-line {
-    height: $height;
+    min-height: $height;
   }
 }
 
 @mixin _set-two-line-container-height($height) {
   &.md3-list-item--with-two-line {
-    height: $height;
+    min-height: $height;
   }
 }
 
 @mixin _set-three-line-container-height($height) {
   &.md3-list-item--with-three-line {
-    height: $height;
+    min-height: $height;
   }
 }
 

diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
@@ -43,8 +43,6 @@
   align-items: center;
   box-sizing: border-box;
   display: flex;
-  padding-block-end: 12px;
-  padding-block-start: 12px;
   width: 100%;
   position: relative;
 

diff --git a/list/lib/video/_list-item-video.scss b/list/lib/video/_list-item-video.scss
@@ -7,8 +7,12 @@
 // Selector '.md3-*' should only be used in this project.
 
 @mixin static-styles() {
+  display: inline-flex;
+
   .md3-list-item__video {
     display: inline-flex;
+    margin-block-end: 12px;
+    margin-block-start: 12px;
     object-fit: cover;
   }
 }