From 9870dbb0872545c634483042f0630b80815c1e4b Mon Sep 17 00:00:00 2001
From: vincentsnagg <vincent.snagg@gmail.com>
Date: Mon, 10 Jun 2019 16:21:34 -0400
Subject: [PATCH] fix(list): fix markers for nested list items (#2941)

* fix(list): reset counter on nested unordered lists

* fix(list): indent wrapped lines

* fix(list): change ordered list markers within unordered lists to alpha

* fix(list): add markup to show enhancement
---
 .../components/src/components/list/_list.scss | 34 ++++++++++--
 .../src/components/list/list--nesting.hbs     | 55 +++++++++++++++++++
 2 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/components/list/list--nesting.hbs

diff --git a/packages/components/src/components/list/_list.scss b/packages/components/src/components/list/_list.scss
index f79aea522a7f..62cb486102b4 100644
--- a/packages/components/src/components/list/_list.scss
+++ b/packages/components/src/components/list/_list.scss
@@ -32,6 +32,14 @@
     color: $text-01;
     list-style-type: none;
     counter-increment: listitem;
+    margin-left: $carbon--spacing-03;
+    padding-left: $carbon--spacing-03;
+    position: relative;
+  }
+
+  .#{$prefix}--list__item:before {
+    position: absolute;
+    left: -#{$carbon--spacing-03};
   }
 
   .#{$prefix}--list--nested {
@@ -61,27 +69,43 @@
   }
 
   .#{$prefix}--list--unordered
-    .#{$prefix}--list--nested
+    ul.#{$prefix}--list--nested
     > .#{$prefix}--list__item:before {
     content: '\0025AA';
   }
 
+  .#{$prefix}--list--unordered
+    ol.#{$prefix}--list--nested
+    > .#{$prefix}--list__item:before {
+    content: counter(listitem, lower-alpha) '.';
+  }
+
   .#{$prefix}--list--ordered > .#{$prefix}--list__item:before {
     content: counter(listitem) '.';
   }
 
+  .#{$prefix}--list--ordered ol.#{$prefix}--list--nested {
+    counter-reset: ol-counter;
+  }
+
   .#{$prefix}--list--ordered
-    .#{$prefix}--list--nested
+    ol.#{$prefix}--list--nested
     > .#{$prefix}--list__item {
-    counter-increment: sub-list-item;
+    counter-increment: ol-counter;
   }
 
   .#{$prefix}--list--ordered
-    .#{$prefix}--list--nested
+    ol.#{$prefix}--list--nested
     > .#{$prefix}--list__item:before {
-    content: counter(sub-list-item, lower-alpha) '.';
+    content: counter(ol-counter, lower-alpha) '.';
     width: 0.6rem;
   }
+
+  .#{$prefix}--list--ordered
+    ul.#{$prefix}--list--nested
+    > .#{$prefix}--list__item:before {
+    content: '\0025AA';
+  }
 }
 
 @include exports('lists') {
diff --git a/packages/components/src/components/list/list--nesting.hbs b/packages/components/src/components/list/list--nesting.hbs
new file mode 100644
index 000000000000..5a00bd7937cd
--- /dev/null
+++ b/packages/components/src/components/list/list--nesting.hbs
@@ -0,0 +1,55 @@
+<!-- 
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<ol class="{{@root.prefix}}--list--ordered">
+  <li class="{{@root.prefix}}--list__item"> Ordered List level 1
+    <ul class="{{@root.prefix}}--list--nested">
+      <li class="{{@root.prefix}}--list__item"> Unordered List level 2</li>
+      <li class="{{@root.prefix}}--list__item"> Unordered List level 2
+        <ol class="bx--list--nested">
+          <li class="bx--list__item"> Ordered List level 3</li>
+          <li class="bx--list__item"> Ordered List level 3
+            <ul class="bx--list--nested">
+              <li class="bx--list__item"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis aliquet odio ut viverra. Integer sollicitudin sed mi a finibus. Etiam massa ipsum, suscipit vitae nisl ut, semper euismod ante.</li>
+              <li class="bx--list__item"> Unordered List level 4</li>
+              <li class="bx--list__item"> Unordered List level 4</li>
+            </ul>
+          </li>
+          <li class="bx--list__item"> Ordered List level 3</li>
+        </ol>
+      </li>
+      <li class="{{@root.prefix}}--list__item"> Unordered List level 2</li>
+    </ul>
+  </li>
+  <li class="{{@root.prefix}}--list__item">Ordered List level 1</li>
+  <li class="{{@root.prefix}}--list__item">Ordered List level 1</li>
+</ol>
+<br>
+<ul class="{{@root.prefix}}--list--unordered">
+  <li class="{{@root.prefix}}--list__item">Unordered List level 1
+    <ol class="{{@root.prefix}}--list--nested">
+      <li class="{{@root.prefix}}--list__item">Ordered List level 2</li>
+      <li class="{{@root.prefix}}--list__item">Ordered 
+        List level 2
+        <ul class="bx--list--nested">
+          <li class="bx--list__item"> Unordered List level 3</li>
+          <li class="bx--list__item"> Unordered List level 3
+            <ol class="bx--list--nested">
+              <li class="bx--list__item"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis aliquet odio ut viverra. Integer sollicitudin sed mi a finibus. Etiam massa ipsum, suscipit vitae nisl ut, semper euismod ante.</li>
+              <li class="bx--list__item"> Ordered List level 4</li>
+              <li class="bx--list__item"> Ordered List level 4</li>
+            </ol>
+          </li>
+          <li class="bx--list__item"> Unordered List level 3</li>
+        </ul>
+      </li>
+      <li class="{{@root.prefix}}--list__item">Ordered List level 2</li>
+    </ol>
+  </li>
+  <li class="{{@root.prefix}}--list__item">Unordered List level 1</li>
+  <li class="{{@root.prefix}}--list__item">Unordered List level 1</li>
+</ul>