feat: Describe how to add child lists into a list item.

PiperOrigin-RevId: 399221622
material-components · Sep 27, 2021 · 758ce31 · 758ce31
1 parent 9a02b6e
commit 758ce31
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md
@@ -449,6 +449,27 @@ When rendering list with checkbox items all pre-selected list items should conta
 
 The `selectedIndex` (that proxies foundation's `setSelectedState()`) accepts list of indexes in array format for list with checkbox items to set the selection state. It overwrites the current state with new selected state.
 
+### Multilevel list
+
+When rendering multilevel list (for example submenu), sublist should be rendered inside a wrapper `<li>` item. The rest of item layout should
+remain the same as all examples above. In this case `<li>` element should be marked with `role="presentation"`.
+
+```html
+<ul class="mdc-deprecated-list">
+  <li class="mdc-deprecated-list-item__wrapper" role="presentation">
+    <div class="mdc-deprecated-list-item" tabindex="0">
+      <span class="mdc-deprecated-list-item__ripple"></span>
+      <span class="mdc-deprecated-list-item__text">Single-line item</span>
+    </div>
+    <!-- Child list can be placed here. -->
+  </li>
+  <li class="mdc-deprecated-list-item">
+    <span class="mdc-deprecated-list-item__ripple"></span>
+    <span class="mdc-deprecated-list-item__text">Single-line item</span>
+  </li>
+</ul>
+```
+
 ## Style Customization
 
 ### CSS Classes

diff --git a/packages/mdc-list/_evolution-mixins.scss b/packages/mdc-list/_evolution-mixins.scss
@@ -49,6 +49,12 @@
     @include list-base($query: $query);
   }
 
+  .mdc-list-item__wrapper {
+    @include feature-targeting.targets($feat-structure) {
+      display: block;
+    }
+  }
+
   .mdc-list-item {
     @include item-base($query: $query);
 

diff --git a/packages/mdc-list/_mixins.scss b/packages/mdc-list/_mixins.scss
@@ -97,6 +97,12 @@
     }
   }
 
+  .mdc-deprecated-list-item__wrapper {
+    @include feature-targeting.targets($feat-structure) {
+      display: block;
+    }
+  }
+
   .mdc-deprecated-list-item {
     @include feature-targeting.targets($feat-structure) {
       @include deprecated-item-base_;