new(List): Add reversed prop to visually reverse the list items. (#374)

Author: stefhatcher

packages/core/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -53,7 +53,7 @@ export default function Breadcrumb({
   };
 
   return (
-    <li className={cx(styles.li)}>
+    <li>
       <ButtonOrLink
         {...aria}
         className={cx(

packages/core/src/components/Breadcrumbs/index.tsx

@@ -15,7 +15,7 @@ export type BreadcrumbsProps = {
 export default function Breadcrumbs({ accessibilityLabel, children }: BreadcrumbsProps) {
   return (
     <nav aria-label={accessibilityLabel}>
-      <List horizontal ordered>
+      <List horizontal gutter ordered>
         {children}
       </List>
     </nav>

packages/core/src/components/Breadcrumbs/styles.ts

@@ -48,12 +48,4 @@ export const styleSheetBreadcrumb: StyleSheet = ({ color, font, pattern, transit
   breadcrumb_selected: {
     fontWeight: font.weights.bold,
   },
-
-  li: {
-    marginRight: unit,
-
-    ':last-child': {
-      marginRight: 0,
-    },
-  },
 });

packages/core/src/components/List/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import useStyles, { StyleSheet } from '../../hooks/useStyles';
-import Item, { ListItemProps } from './Item';
+import Item from './Item';
 import { styleSheetList } from './styles';
 
 export { Item };
@@ -16,6 +16,8 @@ export type ListProps = {
   middleAlign?: boolean;
   /** Renders an `<ol></ol>`. */
   ordered?: boolean;
+  /** Render items in reverse order visually. */
+  reversed?: boolean;
   /** Wrap horizontal list. */
   wrap?: boolean;
   /** Custom style sheet. */
@@ -28,6 +30,7 @@ export default function List({
   horizontal,
   middleAlign,
   ordered,
+  reversed,
   wrap,
   styleSheet,
 }: ListProps) {
@@ -38,20 +41,28 @@ export default function List({
     <Tag
       className={cx(
         styles.list,
+        reversed && styles.list_reversed,
         !horizontal && gutter && styles.list_gutter,
+        !horizontal && gutter && reversed && styles.list_gutter_reversed,
         horizontal && styles.list_horizontal,
+        horizontal && reversed && styles.list_reversed_horizontal,
         horizontal && gutter && styles.list_gutter_horizontal,
-        horizontal && wrap && styles.list_horizontal_wrap,
+        horizontal && gutter && reversed && styles.list_gutter_horizontal_reversed,
+        horizontal && wrap && styles.list_wrap,
         middleAlign && styles.list_middleAlign,
       )}
     >
-      {React.Children.map(children, (child) => {
+      {React.Children.map(children as React.ReactElement[], (child: React.ReactElement) => {
         if (!child) {
           return null;
         }
 
-        if (horizontal) {
-          return React.cloneElement(child as React.ReactElement<ListItemProps>, { horizontal });
+        if (horizontal && (child.props.compact || child.props.spacious || child.props.spacious)) {
+          if (child.type === Item) {
+            return React.cloneElement(child, { horizontal });
+          }
+
+          return <Item horizontal>{child.props.children}</Item>;
         }
 
         return child;

packages/core/src/components/List/story.tsx

@@ -75,11 +75,11 @@ export function listWithHorizontal() {
         </Text>
       </Item>
 
-      <Item>
+      <li>
         <Text>
           <LoremIpsum short />
         </Text>
-      </Item>
+      </li>
 
       <Item>
         <Text>
@@ -103,11 +103,11 @@ export function listWithHorizontalAndGutter() {
         </Text>
       </Item>
 
-      <Item>
+      <li>
         <Text>
           <LoremIpsum short />
         </Text>
-      </Item>
+      </li>
 
       <Item>
         <Text>
@@ -131,13 +131,13 @@ export function listWithHorizontalMiddleAlignAndGutter() {
         </Text>
       </Item>
 
-      <Item>
+      <li>
         <Text>
           <LoremIpsum short />
           <br />
           <LoremIpsum short />
         </Text>
-      </Item>
+      </li>
 
       <Item>
         <Text>
@@ -180,7 +180,47 @@ listWithHorizontalAndWrap.story = {
   name: 'List with `horizontal` and `wrap`.',
 };
 
-export function listWithOrderedToRenderAsOlOl() {
+export function listWithReversed() {
+  return (
+    <>
+      <List reversed>
+        <Item>
+          <Text>1</Text>
+        </Item>
+
+        <li>
+          <Text>2</Text>
+        </li>
+
+        <Item>
+          <Text>3</Text>
+        </Item>
+      </List>
+
+      <br />
+
+      <List horizontal reversed>
+        <Item>
+          <Text>1</Text>
+        </Item>
+
+        <li>
+          <Text>2</Text>
+        </li>
+
+        <Item>
+          <Text>3</Text>
+        </Item>
+      </List>
+    </>
+  );
+}
+
+listWithReversed.story = {
+  name: 'List with `reversed` and List with `horizontal reversed`.',
+};
+
+export function listWithOrderedToRenderAsOl() {
   return (
     <List ordered>
       <Item>
@@ -204,7 +244,7 @@ export function listWithOrderedToRenderAsOlOl() {
   );
 }
 
-listWithOrderedToRenderAsOlOl.story = {
+listWithOrderedToRenderAsOl.story = {
   name: 'List with `ordered` to render as `<ol></ol>`.',
 };
 
@@ -291,3 +331,31 @@ export function itemsWithSpaciousPadding() {
 itemsWithSpaciousPadding.story = {
   name: 'Items with `spacious` padding.',
 };
+
+export function itemsWithBorderedHorizontal() {
+  return (
+    <List horizontal gutter>
+      <Item compact bordered>
+        <Text>
+          <LoremIpsum short />
+        </Text>
+      </Item>
+
+      <Item compact bordered>
+        <Text>
+          <LoremIpsum short />
+        </Text>
+      </Item>
+
+      <Item compact bordered>
+        <Text>
+          <LoremIpsum short />
+        </Text>
+      </Item>
+    </List>
+  );
+}
+
+itemsWithBorderedHorizontal.story = {
+  name: 'Items with `bordered`, `compact`, `horizontal`, and `gutter`.',
+};

packages/core/src/components/List/styles.ts

@@ -2,15 +2,21 @@ import { StyleSheet } from '../../hooks/useStyles';
 
 export const styleSheetList: StyleSheet = ({ unit }) => ({
   list: {
+    display: 'flex',
+    flexDirection: 'column',
     listStyle: 'none',
     margin: 0,
     padding: 0,
   },
 
+  list_horizontal: {
+    flexDirection: 'row',
+  },
+
   list_gutter: {
     '@selectors': {
       '> li': {
-        marginBottom: unit,
+        margin: `0 0 ${unit}px 0`,
       },
 
       '> li:last-child': {
@@ -19,11 +25,22 @@ export const styleSheetList: StyleSheet = ({ unit }) => ({
     },
   },
 
+  list_gutter_reversed: {
+    '@selectors': {
+      '> li': {
+        margin: `${unit}px 0 0 0`,
+      },
+
+      '> li:last-child': {
+        marginTop: 0,
+      },
+    },
+  },
+
   list_gutter_horizontal: {
     '@selectors': {
       '> li': {
-        marginBottom: 0,
-        marginRight: unit * 2,
+        margin: `0 ${unit * 2}px 0 0`,
       },
 
       '> li:last-child': {
@@ -32,15 +49,32 @@ export const styleSheetList: StyleSheet = ({ unit }) => ({
     },
   },
 
-  list_horizontal: {
-    display: 'flex',
+  list_gutter_horizontal_reversed: {
+    '@selectors': {
+      '> li': {
+        margin: `0 0 0 ${unit * 2}px`,
+      },
+
+      '> li:last-child': {
+        marginLeft: 0,
+      },
+    },
   },
 
   list_middleAlign: {
     alignItems: 'center',
   },
 
-  list_horizontal_wrap: {
+  list_reversed: {
+    flexDirection: 'column-reverse',
+  },
+
+  list_reversed_horizontal: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'flex-end',
+  },
+
+  list_wrap: {
     flexWrap: 'wrap',
   },
 });

packages/core/test/components/List.test.tsx

@@ -71,16 +71,36 @@ describe('<List />', () => {
     expect(wrapper.prop('className')).toContain('list_gutter');
   });
 
+  it('renders a reversed list with gutters', () => {
+    const wrapper = shallow(
+      <List gutter reversed>
+        <Item>Item 1</Item>
+      </List>,
+    );
+
+    expect(wrapper.prop('className')).toContain('list_gutter_reversed');
+  });
+
   it('renders a horizontal list with gutters', () => {
     const wrapper = shallow(
-      <List gutter horizontal>
+      <List horizontal gutter>
         <Item>Item 1</Item>
       </List>,
     );
 
     expect(wrapper.prop('className')).toContain('list_gutter_horizontal');
   });
 
+  it('renders a reversed horizontal list with gutters', () => {
+    const wrapper = shallow(
+      <List reversed horizontal gutter>
+        <Item>Item 1</Item>
+      </List>,
+    );
+
+    expect(wrapper.prop('className')).toContain('list_gutter_horizontal_reversed');
+  });
+
   it('renders a horizontal list', () => {
     const wrapper = shallow(
       <List horizontal>
@@ -91,6 +111,26 @@ describe('<List />', () => {
     expect(wrapper.prop('className')).toContain('list_horizontal');
   });
 
+  it('renders a reversed list', () => {
+    const wrapper = shallow(
+      <List reversed>
+        <Item>Item 1</Item>
+      </List>,
+    );
+
+    expect(wrapper.prop('className')).toContain('list_reversed');
+  });
+
+  it('renders a horizontal reversed list', () => {
+    const wrapper = shallow(
+      <List horizontal reversed>
+        <Item>Item 1</Item>
+      </List>,
+    );
+
+    expect(wrapper.prop('className')).toContain('list_reversed_horizontal');
+  });
+
   it('renders a list with middleAlign', () => {
     const wrapper = shallow(
       <List middleAlign>