fix(list): incorrect padding for list-items with avatars, icons (#9163)

Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes #9156

Author: devversion

src/demo-app/list/list-demo.html

@@ -111,7 +111,7 @@ <h2>Selection list</h2>
                         (change)="changeEventCount = changeEventCount + 1">
       <h3 mat-subheader>Groceries</h3>
 
-      <mat-list-option value="bananas">Bananas</mat-list-option>
+      <mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
       <mat-list-option selected value="oranges">Oranges</mat-list-option>
       <mat-list-option value="apples">Apples</mat-list-option>
       <mat-list-option value="strawberries">Strawberries</mat-list-option>

src/lib/list/list.scss

@@ -92,17 +92,40 @@ $mat-list-item-inset-divider-offset: 72px;
 
   .mat-list-text {
     @include mat-line-wrapper-base();
-    padding: 0 $mat-list-side-padding;
 
-    // We only want to override the padding if there isn't
-    // an avatar or icon before the element. Since the ripple
-    // will always be the first child in the container, we
-    // check whether this element is the second child.
+    // By default, padding will be always added on the start-side of the mat-list-text, because
+    // we assume that there is always a secondary item (e.g. avatar-icon, checkbox). But if the
+    // mat-list-text element is the second element, then there is no secondary item and
+    // the padding can be removed.
     &:nth-child(2) {
       padding: 0;
     }
   }
 
+  // There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
+  // list-item. This means that there should be a padding for the mat-list-text on the start-side.
+  .mat-list-item-content .mat-list-text {
+    padding-left: $mat-list-side-padding;
+
+    [dir='rtl'] & {
+      padding-right: $mat-list-side-padding;
+      padding-left: 0;
+    }
+  }
+
+  // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
+  // end of the list option. Since there is a secondary item (checkbox) at the end of the
+  // option, there needs to be a padding for the mat-list-text on the end-side.
+  .mat-list-item-content-reverse .mat-list-text {
+    padding-left: 0;
+    padding-right: $mat-list-side-padding;
+
+    [dir='rtl'] & {
+      padding-right: 0;
+      padding-left: $mat-list-side-padding;
+    }
+  }
+
   .mat-list-avatar {
     flex-shrink: 0;
     width: $mat-list-avatar-size;