fix: Resolve issue with missing padding on elements on dynamic display and separator

Author: adamszalapski

apps/pattern-lab/src/_patterns/02-components/list/-00-list-demo.twig

@@ -1,8 +1,8 @@
 <div class="pl-c-main">
     <div class="pl-c-pattern-index">
-
-        <h3>UL list</h3>
-        <bolt-list tag="ul" display="block" spacing="small" separator="dashed">
+        <h3>Dynamic display</h3>
+        <p>(block on small, inline on medium, large and full)</p>
+        <bolt-list display="inline@small" spacing="small" separator="dashed">
             <bolt-list-item>
                 Item 1
             </bolt-list-item>
@@ -15,67 +15,48 @@
             <bolt-list-item>
                 Item 4
             </bolt-list-item>
-            <bolt-list-item>
+            <bolt-list-item last>
                 Item 5
             </bolt-list-item>
         </bolt-list>
 
-        {#<h3>OL list</h3>#}
-        {#<bolt-list tag="ol" inset>#}
-            {#<bolt-list-item>#}
-                {#Item 1#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 2#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 3#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 4#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 5#}
-            {#</bolt-list-item>#}
-        {#</bolt-list>#}
-
-        {#<h3>DIV list</h3>#}
-        {#<bolt-list tag="div" separator="solid">#}
-            {#<bolt-list-item>#}
-                {#Item 1#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 2#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 3#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 4#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 5#}
-            {#</bolt-list-item>#}
-        {#</bolt-list>#}
+        <h3>Display inline</h3>
+        <bolt-list display="inline" spacing="small" separator="dashed">
+            <bolt-list-item>
+              Item 1
+            </bolt-list-item>
+            <bolt-list-item>
+              Item 2
+            </bolt-list-item>
+            <bolt-list-item>
+              Item 3
+            </bolt-list-item>
+            <bolt-list-item>
+              Item 4
+            </bolt-list-item>
+            <bolt-list-item last>
+              Item 5
+            </bolt-list-item>
+        </bolt-list>
 
-        {#<h3>SPAN list</h3>#}
-        {#<bolt-list tag="span" display="inline" separator="dashed">#}
-            {#<bolt-list-item>#}
-                {#Item 1#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 2#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 3#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 4#}
-            {#</bolt-list-item>#}
-            {#<bolt-list-item>#}
-                {#Item 5#}
-            {#</bolt-list-item>#}
-        {#</bolt-list>#}
+        <h3>Display Block</h3>
+        <bolt-list display="block" spacing="small" separator="dashed">
+            <bolt-list-item>
+              Item 1
+            </bolt-list-item>
+            <bolt-list-item>
+              Item 2
+            </bolt-list-item>
+            <bolt-list-item>
+              Item 3
+            </bolt-list-item>
+            <bolt-list-item>
+              Item 4
+            </bolt-list-item>
+            <bolt-list-item last>
+              Item 5
+            </bolt-list-item>
+        </bolt-list>
     </div>
 </div>
 

packages/components/bolt-list/src/_list-item.scss

@@ -61,11 +61,13 @@ $bolt-list-separator-styles: solid, dashed;
       $breakpoint-name: nth($breakpoint, 1);
 
       &.c-bolt-list-item--display-inline\@#{$breakpoint-name} {
-        border-bottom-width: 1px;
+        &:not(.c-bolt-list-item--last-item) {
+          border-bottom-width: 1px;
 
-        @include bolt-mq($breakpoint-name) {
-          border-right-width: 1px;
-          border-bottom-width: 0;
+          @include bolt-mq($breakpoint-name) {
+            border-right-width: 1px;
+            border-bottom-width: 0;
+          }
         }
       }
     }
@@ -94,7 +96,7 @@ $bolt-list-separator-styles: solid, dashed;
         $breakpoint-name: nth($breakpoint, 1);
 
         &.c-bolt-list-item--spacing-#{$spacing-value-name} {
-          .c-bolt-list-item--display-inline\@#{$breakpoint-name} {
+          &.c-bolt-list-item--display-inline\@#{$breakpoint-name} {
             @include bolt-padding-bottom(#{$spacing-value-name});
 
             @include bolt-mq($breakpoint-name) {