fix(list): Fixed list item icon padding

PiperOrigin-RevId: 463008397
material-components · Jul 25, 2022 · 07aaa8a · 07aaa8a
1 parent 57c2cfd
commit 07aaa8a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/list/lib/icon/_list-item-icon.scss b/list/lib/icon/_list-item-icon.scss
@@ -21,6 +21,7 @@
     direction: ltr;
     height: 100%;
     width: 100%;
+    padding-inline-start: 16px;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;

diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
@@ -15,14 +15,6 @@
     @include item-root;
   }
 
-  .md3-list-item--with-leading-icon {
-    @include icon-item-root;
-  }
-
-  .md3-list-item__end {
-    padding-inline-start: 16px;
-  }
-
   .md3-list-item--with-leading-thumbnail {
     @include thumbnail-item-root;
   }
@@ -41,36 +33,40 @@
 }
 
 @mixin item-root() {
-  align-items: flex-start;
+  align-items: center;
   box-sizing: border-box;
   display: flex;
   padding-block-end: 12px;
   padding-block-start: 12px;
-  padding-inline-end: 24px;
   width: 100%;
 
   .md3-list-item__start {
     flex: 0 0 auto;
   }
 
   .md3-list-item__body {
+    box-sizing: border-box;
     flex: 1 0 0;
     padding-inline-start: 16px;
+    width: 100%;
   }
 
   .md3-list-item__end {
     flex: 0 0 auto;
+    padding-inline-end: 24px;
   }
 
   .md3-list-item__label-text {
     display: flex;
   }
 
   .md3-list-item__supporting-text {
-    display: flex;
+    display: block;
     padding-block-start: 4px;
     text-overflow: ellipsis;
     white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
   }
 
   .md3-list-item__supporting-text--multi-line {
@@ -80,6 +76,10 @@
     overflow: hidden;
     white-space: normal;
   }
+
+  .md3-list-item__trailing-supporting-text {
+    padding-inline-start: 16px;
+  }
 }
 
 @mixin icon-item-root() {