feat: simplify API & fixes theme bugs

BREAKING CHANGE: remove uiAs prop & uiAs helper

Author: gregberge

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>

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>

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>

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,

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,

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,

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};
 

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,

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;

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'] ~ & {