feat: simplify API & fixes theme bugs

BREAKING CHANGE: remove uiAs prop & uiAs helper
smooth-code · Feb 3, 2019 · 3ac41ec · 3ac41ec
1 parent a7e7458
commit 3ac41ec
Show file tree

Hide file tree

Showing 28 changed files with 186 additions and 204 deletions.
diff --git a/docs/advanced/CustomComponent.mdx b/docs/advanced/CustomComponent.mdx
@@ -4,36 +4,35 @@ menu: Advanced
 ---
 
 import { Playground } from 'docz'
-import { Button, Alert, uiAs } from '@smooth-ui/core-sc'
+import { Button, Alert } from '@smooth-ui/core-sc'
 
 # Custom component
 
 Sometimes you may want to use a component but the resulting HTML tag is not the good one. Or you want to use a `Button` with another component like [the `Link` from React Router](https://reacttraining.com/react-router/web/api/Link).
 
 You can do it using two approaches.
 
-## Use "uiAs" property
+## Use "as" property
 
-Every components accepts a `uiAs` property, it defines the base component used in each component.
+Every components accepts a `as` property, it defines the base component used in each component.
 
 An example of an `Alert` that uses `span` as a component.
 
 <Playground>
-  <Alert uiAs="span" variant="primary">
+  <Alert as="span" variant="primary">
     A span alert
   </Alert>
 </Playground>
 
-## Use "uiAs" helper
+## Use "withComponent" helper
 
-`uiAs` creates a new component with a predefined base component.
+`withComponent` creates a new component with a predefined base component.
 
 An example of `Button` that will use `a` instead of `button`.
 
 <Playground>
   {() => {
-    // import { uiAs } from '@smooth-ui/core-sc'
-    const LinkButton = uiAs(Button, 'a')
+    const LinkButton = Button.withComponent('a')
     return <LinkButton href="#">A button as a link</LinkButton>
   }}
 </Playground>

diff --git a/examples/basics/src/emotion/index.js b/examples/basics/src/emotion/index.js
@@ -8,7 +8,7 @@ const BlackButton = styled(Button)`
   color: black;
 `
 
-const DivButton = uiAs(Button, 'div')
+const DivButton = Button.withComponent('div')
 
 const App = () => (
   <>
@@ -17,10 +17,10 @@ const App = () => (
       <Button>Basic</Button>
     </div>
     <div>
-      <DivButton>{`uiAs(Button, 'div')`}</DivButton>
+      <DivButton>{`Button.withComponent('div')`}</DivButton>
     </div>
     <div>
-      <Button uiAs="div">{`<Button uiAs="div">`}</Button>
+      <Button as="div">{`<Button as="div">`}</Button>
     </div>
     <div>
       <BlackButton>{`styled(Button)\`color: black\``}</BlackButton>

diff --git a/examples/basics/src/styled-components/index.js b/examples/basics/src/styled-components/index.js
@@ -6,7 +6,7 @@ const BlackButton = styled(Button)`
   color: black;
 `
 
-const DivButton = uiAs(Button, 'div')
+const DivButton = Button.withComponent('div')
 
 const App = () => (
   <>
@@ -15,10 +15,10 @@ const App = () => (
       <Button>Basic</Button>
     </div>
     <div>
-      <DivButton>{`uiAs(Button, 'div')`}</DivButton>
+      <DivButton>{`Button.withComponent('div')`}</DivButton>
     </div>
     <div>
-      <Button uiAs="div">{`<Button uiAs="div">`}</Button>
+      <Button as="div">{`<Button as="div">`}</Button>
     </div>
     <div>
       <BlackButton>{`styled(Button)\`color: black\``}</BlackButton>

diff --git a/packages/shared/core/Alert.js b/packages/shared/core/Alert.js
@@ -6,13 +6,13 @@ import createComponent from './utils/createComponent'
 const Alert = createComponent(() => ({
   name: 'alert',
   omitProps: ['variant'],
-  style: css`
+  style: p => css`
     position: relative;
     padding: ${th('alertPaddingY')} ${th('alertPaddingX')};
     margin-bottom: ${th('alertMarginBottom')};
     border: 1px solid transparent;
     border-radius: ${th('borderRadius')};
-    ${p => p.variant && mixin('alertVariant', p.variant)(p)};
+    ${p.variant && mixin('alertVariant', p.variant)(p)};
   `,
   propTypes: {
     children: PropTypes.node,

diff --git a/packages/shared/core/Breakpoint.js b/packages/shared/core/Breakpoint.js
@@ -6,10 +6,10 @@ import createComponent from './utils/createComponent'
 const Breakpoint = createComponent(() => ({
   name: 'breakpoint',
   omitProps: ['up', 'down'],
-  style: css`
+  style: p => css`
     display: none;
-    ${p => p.up && up(p.up, 'display: block;')};
-    ${p => p.down && down(p.down, 'display: block;')};
+    ${p.up && up(p.up, 'display: block;')};
+    ${p.down && down(p.down, 'display: block;')};
   `,
   propTypes: {
     children: PropTypes.node,

diff --git a/packages/shared/core/Button.js b/packages/shared/core/Button.js
@@ -28,7 +28,7 @@ const Button = createComponent(() => ({
   name: 'button',
   defaultComponent: 'button',
   omitProps: ['size', 'variant'],
-  style: css`
+  style: p => css`
     display: inline-block;
     padding: ${th('btnPaddingY')} ${th('btnPaddingX')};
     z-index: ${th('zIndexControl')};
@@ -47,8 +47,8 @@ const Button = createComponent(() => ({
       opacity: ${th('btnDisabledOpacity')};
     }
 
-    ${p => p.size && sizeStyle[p.size]};
-    ${p => p.variant && mixin('btnVariant', p.variant)(p)};
+    ${p.size && sizeStyle[p.size]};
+    ${p.variant && mixin('btnVariant', p.variant)(p)};
   `,
   propTypes: {
     children: PropTypes.node,

diff --git a/packages/shared/core/Checkbox.js b/packages/shared/core/Checkbox.js
@@ -78,22 +78,24 @@ const invalidStyle = css`
   }
 `
 
-const controlStyle = css`
+const getValidStyle = valid => {
+  switch (valid) {
+    case true:
+      return validStyle
+    case false:
+      return invalidStyle
+    default:
+      return null
+  }
+}
+
+const controlStyle = p => css`
   input:focus + .sui-checkbox-content {
     border-color: ${th('controlFocusBorderColor')};
     box-shadow: ${mixin('controlFocusBoxShadow', 'primary')};
   }
 
-  ${p => {
-    switch (p.valid) {
-      case true:
-        return validStyle
-      case false:
-        return invalidStyle
-      default:
-        return null
-    }
-  }};
+  ${getValidStyle(p)};
 `
 
 const containerSystem = compose(
@@ -137,7 +139,7 @@ const Checkbox = createComponent(() => ({
       )}
     </SwitchState>
   ),
-  style: css`
+  style: p => css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -185,8 +187,8 @@ const Checkbox = createComponent(() => ({
       background-color: ${th('inputDisabledBgColor')};
     }
 
-    ${p => sizeStyle[p.size]};
-    ${p => p.control && controlStyle};
+    ${sizeStyle[p.size]};
+    ${p.control && controlStyle(p)};
 
     ${containerSystem.props};
 

diff --git a/packages/shared/core/ControlFeedback.js b/packages/shared/core/ControlFeedback.js
@@ -6,11 +6,11 @@ import createComponent from './utils/createComponent'
 const ControlFeedback = createComponent(() => ({
   name: 'control-feedback',
   omitProps: ['valid'],
-  style: css`
+  style: p => css`
     width: 100%;
     margin-top: 0.25rem;
     font-size: 80%;
-    color: ${p => (p.valid ? th('success')(p) : th('danger')(p))};
+    color: ${p.valid ? th('success')(p) : th('danger')(p)};
   `,
   propTypes: {
     children: PropTypes.node,

diff --git a/packages/shared/core/FormCheck.js b/packages/shared/core/FormCheck.js
@@ -5,12 +5,11 @@ import createComponent from './utils/createComponent'
 const FormCheck = createComponent(() => ({
   name: 'form-check',
   omitProps: ['inline'],
-  style: css`
+  style: p => css`
     display: flex;
     align-items: center;
 
-    ${p =>
-      p.inline &&
+    ${p.inline &&
       css`
         display: inline-flex;
         margin-right: 0.75rem;

diff --git a/packages/shared/core/FormCheckLabel.js b/packages/shared/core/FormCheckLabel.js
@@ -6,7 +6,7 @@ import createComponent from './utils/createComponent'
 const FormCheckLabel = createComponent(() => ({
   name: 'form-check-label',
   defaultComponent: 'label',
-  style: css`
+  style: () => css`
     padding-left: 0.25rem;
 
     [class*='disabled'] ~ & {

diff --git a/packages/shared/core/FormGroup.js b/packages/shared/core/FormGroup.js
@@ -4,7 +4,7 @@ import createComponent from './utils/createComponent'
 
 const FormGroup = createComponent(() => ({
   name: 'form-group',
-  style: css`
+  style: () => css`
     margin-bottom: 1rem;
   `,
   propTypes: {

diff --git a/packages/shared/core/Input.js b/packages/shared/core/Input.js
@@ -39,7 +39,18 @@ const invalidStyle = css`
   }
 `
 
-const controlStyle = css`
+const getValidStyle = valid => {
+  switch (valid) {
+    case true:
+      return validStyle
+    case false:
+      return invalidStyle
+    default:
+      return null
+  }
+}
+
+const controlStyle = p => css`
   display: block;
   width: 100%;
 
@@ -48,23 +59,14 @@ const controlStyle = css`
     box-shadow: ${mixin('controlFocusBoxShadow', 'primary')};
   }
 
-  ${p => {
-    switch (p.valid) {
-      case true:
-        return validStyle
-      case false:
-        return invalidStyle
-      default:
-        return null
-    }
-  }};
+  ${getValidStyle(p.valid)};
 `
 
 const Input = createComponent(() => ({
   name: 'input',
   defaultComponent: 'input',
   omitProps: ['control', 'size', 'valid'],
-  style: css`
+  style: p => css`
     display: inline-block;
     border-width: ${th('inputBorderWidth')};
     border-color: ${th('inputBorderColor')};
@@ -91,8 +93,8 @@ const Input = createComponent(() => ({
       color: ${th('inputDisabledText')};
     }
 
-    ${p => p.size && sizeStyle[p.size]};
-    ${p => p.control && controlStyle};
+    ${p.size && sizeStyle[p.size]};
+    ${p.control && controlStyle(p)};
   `,
   propTypes: {
     control: PropTypes.bool,

diff --git a/packages/shared/core/Modal.js b/packages/shared/core/Modal.js
@@ -2,7 +2,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import FocusLock from 'react-focus-lock'
-import { RemoveScroll } from 'react-remove-scroll';
+import { RemoveScroll } from 'react-remove-scroll'
 import { css, withTheme } from './styled-engine'
 import { th, mixin } from './utils/system'
 import Transition from './Transition'
@@ -132,7 +132,7 @@ const ModalComponentWithTheme = withTheme(ModalComponent)
 const Modal = createComponent(() => ({
   name: 'modal',
   InnerComponent: ModalComponentWithTheme,
-  style: css`
+  style: () => css`
     position: fixed;
     top: 0;
     right: 0;

diff --git a/packages/shared/core/ModalBody.js b/packages/shared/core/ModalBody.js
@@ -5,7 +5,7 @@ import createComponent from './utils/createComponent'
 
 const ModalBody = createComponent(() => ({
   name: 'modal-body',
-  style: css`
+  style: () => css`
     position: relative;
     /* Enable "flex-grow: 1" so that the body take up as much space as possible */
     /* when should there be a fixed height on ModalDialog. */

diff --git a/packages/shared/core/ModalCloseButton.js b/packages/shared/core/ModalCloseButton.js
@@ -26,7 +26,7 @@ const ModalCloseButton = createComponent(() => ({
       )}
     </ModalContext.Consumer>
   ),
-  style: css`
+  style: () => css`
     position: absolute;
     cursor: pointer;
     top: 0.2rem;

diff --git a/packages/shared/core/ModalContent.js b/packages/shared/core/ModalContent.js
@@ -26,7 +26,7 @@ const ModalContent = createComponent(() => ({
       )}
     </ModalContext.Consumer>
   ),
-  style: css`
+  style: () => css`
     position: relative;
     display: flex;
     flex-direction: column;
@@ -39,14 +39,14 @@ const ModalContent = createComponent(() => ({
     border: ${th('modalContentBorderWidth')} solid
       ${th('modalContentBorderColor')};
     border-radius: ${th('modalContentBorderRadius')};
-    box-shadow: ${th('modalContentBoxShadowXs')};
+    ${th('modalContentBoxShadowXs')};
     /* Remove focus outline from opened modal */
     outline: 0;
 
     ${up(
       'sm',
       css`
-        box-shadow: ${th('modalContentBoxShadowSmUp')};
+        ${th('modalContentBoxShadowSmUp')};
       `,
     )};
   `,

diff --git a/packages/shared/core/ModalDialog.js b/packages/shared/core/ModalDialog.js
@@ -10,7 +10,7 @@ const ModalDialog = createComponent(() => ({
   render: ({ Component, ...props }) => (
     <Component role="dialog" aria-modal="true" {...props} />
   ),
-  style: css`
+  style: () => css`
     position: relative;
     width: auto;
     margin: ${th('modalDialogMargin')};

diff --git a/packages/shared/core/ModalFooter.js b/packages/shared/core/ModalFooter.js
@@ -5,7 +5,7 @@ import createComponent from './utils/createComponent'
 
 const ModalFooter = createComponent(() => ({
   name: 'modal-footer',
-  style: css`
+  style: () => css`
     display: flex;
     align-items: center;
     justify-content: flex-end;

diff --git a/packages/shared/core/ModalHeader.js b/packages/shared/core/ModalHeader.js
@@ -5,7 +5,7 @@ import createComponent from './utils/createComponent'
 
 const ModalHeader = createComponent(() => ({
   name: 'modal-header',
-  style: css`
+  style: () => css`
     display: flex;
     align-items: flex-start;
     justify-content: space-between;