fix: update list styles

carbon-design-system · Jul 16, 2019 · de3cca1 · de3cca1
1 parent bd2802e
commit de3cca1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 27 deletions.
diff --git a/packages/example/src/pages/components/markdown.mdx b/packages/example/src/pages/components/markdown.mdx
@@ -61,20 +61,21 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 ## Lists
 
 1. First ordered list item
-2. Another item
-   1. Nested items
-3. Actual numbers don't matter, just that it's a number
+2. Item with a nested item
+   1. Nested list item
+3. In markdown, the actual numbers don't matter, just that it's a number
 
 - Unordered list can use asterisks
+  - Nested list item
 - Or hyphens to create list items
 
 #### Code
 
 ```
 1. First ordered list item
-2. Another item
-   1. Nested items
-3. Actual numbers don't matter, just that it's a number
+1. Item with a nested item
+   1. Nested list item
+1. In markdown, the actual numbers don't matter, just that it's a number
 
 * Unordered list can use asterisks
 - Or hyphens to create list items

diff --git a/packages/example/src/pages/demo/index.mdx b/packages/example/src/pages/demo/index.mdx
@@ -1,6 +1,5 @@
 ---
 title: Demo
-tabs: ['Tab1', 'Tab2']
 ---
 
 <PageDescription>
@@ -68,25 +67,25 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin
 Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
 
 <AnchorLinks small>
-  <AnchorLink>Header number 3</AnchorLink>
-  <AnchorLink>Header number 4</AnchorLink>
+  <AnchorLink>Header</AnchorLink>
+  <AnchorLink>Header again</AnchorLink>
 </AnchorLinks>
 
-### Header number 3
+### Header
 
 Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
 
-### Header number 4
+### Header again
 
 Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
 
-1. Ordered list item
-1. Ordered list item
+1. This is a demonstration of an ordered list item. This list item is particularly long to demonstrate how the text wraps and aligns with the first line.
+   1. This is a nested list item, it should wrap in the same way. Typically, nested list items should be of the same type (ordered, unordered) as their parent.
 1. Ordered list item
 1. Ordered list item
 
-- Unordered list item
-- Unordered list item
+- This is a demonstration of an unordered list item. This list item is particularly long to demonstrate how the text wraps and aligns with the first line.
+  - This is a nested list item, it should wrap in the same way. Typically, nested list items should be of the same type (ordered, unordered) as their parent.
 - Unordered list item
 - Unordered list item
 

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
@@ -75,8 +75,7 @@
 .h4,
 .h5,
 .h6,
-.ordered,
-.unordered {
+.list {
   width: 100%;
   @include carbon--breakpoint('md') {
     width: 75%;
@@ -86,21 +85,18 @@
   }
 }
 
-:global(.bx--list--ordered).ordered {
-  @include carbon--type-style('body-long-02');
+:global(.bx--list--ordered).list,
+:global(.bx--list--unordered).list {
+  margin-bottom: $spacing-06;
 }
 
-:global(.bx--list--ordered).ordered p {
+.list-item {
   @include carbon--type-style('body-long-02');
   padding-right: 0;
   margin: 0;
   width: 100%;
 }
 
-.list-item:last-of-type {
-  margin-bottom: $spacing-06;
-}
-
 //---------------------------------------
 // Headings
 //---------------------------------------

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Ol.js b/packages/gatsby-theme-carbon/src/components/markdown/Ol.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import cx from 'classnames';
-import { ordered } from './Markdown.module.scss';
+import { list } from './Markdown.module.scss';
 
 const Ol = ({ children, ...rest }) => (
-  <ol className={cx('bx--list--ordered', ordered)} {...rest}>
+  <ol className={cx('bx--list--ordered', list)} {...rest}>
     {children}
   </ol>
 );

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Ul.js b/packages/gatsby-theme-carbon/src/components/markdown/Ul.js
@@ -1,7 +1,9 @@
 import React from 'react';
+import cx from 'classnames';
+import { list } from './Markdown.module.scss';
 
 const Ul = ({ children, ...rest }) => (
-  <ul className="bx--list--unordered" {...rest}>
+  <ul className={cx('bx--list--unordered', list)} {...rest}>
     {children}
   </ul>
 );