♻️ Change use → base, add base to List

Author: exah

docs/list.mdx

@@ -12,8 +12,6 @@ import { List, Flex } from '../src'
 
 Based on [Box](/box) with reset styles for `ul`, `ol`. By default renders `<ul>`.
 
-For more information see [Flex](/flex) docs.
-
 
 ## Usage
 
@@ -42,18 +40,6 @@ import { List } from 'pss-components'
   </List>
 </Playground>
 
-### Make `horizontal` list with [Flex](/flex)
-
-<Playground>
-  <List use={Flex} justifyContent='space-between'>
-    <List.Item>1</List.Item>
-    <List.Item>2</List.Item>
-    <List.Item>3</List.Item>
-    <List.Item>4</List.Item>
-    <List.Item>5</List.Item>
-    <List.Item>6</List.Item>
-  </List>
-</Playground>
 
 ### Change `list-style`
 
@@ -68,6 +54,7 @@ import { List } from 'pss-components'
   </List>
 </Playground>
 
+
 ### Ordered list
 
 <Playground>
@@ -81,6 +68,21 @@ import { List } from 'pss-components'
   </List>
 </Playground>
 
+
+### Replace [Box](/box) inside with [Flex](/flex)
+
+<Playground>
+  <List as='ol' base={Flex} justifyContent='space-between'>
+    <List.Item>1</List.Item>
+    <List.Item>2</List.Item>
+    <List.Item>3</List.Item>
+    <List.Item>4</List.Item>
+    <List.Item>5</List.Item>
+    <List.Item>6</List.Item>
+  </List>
+</Playground>
+
+
 ## Props
 
 ### List ([Box](/box))

src/list.js

@@ -1,12 +1,18 @@
 import styled from '@emotion/styled'
-import { style } from 'pss'
+import pss from 'pss'
 import { Box } from './box'
+import { base } from './utils'
 
-const listStyle = style({
-  cssProp: 'listStyle'
+const listStyle = pss({
+  listStyle: true
 })
 
-const List = styled(Box)(
+const BaseList = base({
+  use: Box,
+  name: 'List'
+})
+
+const List = styled(BaseList)(
   listStyle
 )
 

src/utils.js

@@ -22,7 +22,7 @@ export function base ({
   const Base = React.forwardRef((props, ref) => {
     const {
       as: Element = defaultElement,
-      use: Comp = (BaseComp || Element),
+      base: Comp = (BaseComp || Element),
       className,
       ...rest
     } = props
@@ -51,7 +51,7 @@ export function base ({
   Base.propTypes = {
     className: PropTypes.string,
     as: PropTypes.elementType,
-    use: PropTypes.elementType
+    base: PropTypes.elementType
   }
 
   return Base

test/index.js

@@ -47,13 +47,13 @@ describe('Layout', () => {
   test('Holy Grail', () => {
     const result = renderJSON(
       <Layout flexDirection='column' minHeight='100%'>
-        <Box use='header'>
+        <Box as='header'>
           Header
         </Box>
-        <Layout.Content use='main'>
+        <Layout.Content as='main'>
           Main
         </Layout.Content>
-        <Box use='footer'>
+        <Box as='footer'>
           Footer
         </Box>
       </Layout>