feat(box): wip use between prop everywhere

telus · Nov 8, 2017 · 8e9598b · 8e9598b
1 parent f9a2345
commit 8e9598b
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 120 deletions.
diff --git a/src/components/Box/Box.jsx b/src/components/Box/Box.jsx
@@ -5,6 +5,8 @@ import safeRest from '../../utils/safeRest'
 import joinClassNames from '../../utils/joinClassNames'
 import capitalize from '../../utils/capitalize'
 
+import FlexBox from '../Flexbox/Flexbox'
+
 import styles from './Box.modules.scss'
 
 const getClassName = (spacing, location, scale) => {
@@ -21,7 +23,10 @@ const getBetweenClasses = (betweenSize, inline) => {
   }
 
   const direction = inline ? 'Right' : 'Bottom'
-  return styles[`between${direction}Margin-${betweenSize}`]
+  return joinClassNames(
+    styles[`between${direction}Margin-${betweenSize}`],
+    inline ? styles.betweenRight : undefined
+  )
 }
 
 /**
@@ -46,8 +51,6 @@ const Box = ({
   const xSize = inset || horizontal
   const ySize = inset || vertical
 
-  const Tag = tag || (inline ? 'span' : 'div')
-
   const classes = joinClassNames(
     getClassName('padding', 'horizontal', xSize),
     getClassName('padding', 'vertical', ySize),
@@ -58,14 +61,9 @@ const Box = ({
     dangerouslyAddClassName
   )
 
-  return React.createElement(
-    Tag,
-    {
-      ...safeRest(rest),
-      className: classes || undefined,
-    },
-    children
-  )
+  const BoxOutput = React.createElement(tag || 'div')
+
+  return React.createElement(tag || 'div', { ...safeRest(rest), className: classes }, children)
 }
 
 Box.propTypes = {

diff --git a/src/components/Box/Box.modules.scss b/src/components/Box/Box.modules.scss
@@ -27,6 +27,12 @@ $responsive-spacings: (
 
 $boxProps: ('margin': 'Margin', 'padding': 'Padding');
 
+.betweenRight {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 // Todo remove unneeded classes related to margin
 @mixin spacingClasses ($level, $value) {
   @each $p, $v in $boxProps {

diff --git a/src/components/Box/__tests__/Box.spec.jsx b/src/components/Box/__tests__/Box.spec.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
+import FlexBox from '../../Flexbox/Flexbox'
 import Box from '../Box'
 
 describe('Box', () => {
@@ -23,7 +24,7 @@ describe('Box', () => {
     expect(box).toHaveTagName('div')
 
     box = doShallow({ inline: true })
-    expect(box).toHaveTagName('span')
+    expect(box).toHaveClassName('betweenRight betweenRightMargin-3')
   })
 
   it('can render as other elements', () => {
@@ -72,7 +73,7 @@ describe('Box', () => {
   it('can have between margin as inline', () => {
     const box = doShallow({ between: 2, inline: true })
 
-    expect(box).toHaveClassName('betweenRightMargin-2')
+    expect(box).toHaveClassName('betweenRight betweenRightMargin-2')
   })
 
   it('passes additional attributes to the element', () => {

diff --git a/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap b/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap
@@ -127,7 +127,7 @@ exports[`ExpandCollapse renders a closed panel 1`] = `
                         >
                           <Box
                             bottom={2}
-                            inline={false}
+                            className=""
                             spacing="margin"
                           >
                             <div
@@ -376,7 +376,7 @@ exports[`ExpandCollapse renders an open panel 1`] = `
                         >
                           <Box
                             bottom={2}
-                            inline={false}
+                            className=""
                             spacing="margin"
                           >
                             <div

diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {childrenOfType} from 'airbnb-prop-types'
+import { childrenOfType } from 'airbnb-prop-types'
 
 import StandaloneIcon from '../Icons/StandaloneIcon/StandaloneIcon'
 import Text from '../Typography/Text/Text'
@@ -56,7 +56,7 @@ class Input extends React.Component {
   }
 
   onChange = event => {
-    const {onChange} = this.props
+    const { onChange } = this.props
 
     this.setState({
       value: event.target.value,
@@ -68,42 +68,36 @@ class Input extends React.Component {
   }
 
   onFocus = event => {
-    const {onFocus} = this.props
+    const { onFocus } = this.props
 
-    this.setState({focus: true})
+    this.setState({ focus: true })
 
     if (onFocus) {
       onFocus(event)
     }
   }
 
   onBlur = event => {
-    const {onBlur} = this.props
+    const { onBlur } = this.props
 
-    this.setState({focus: false})
+    this.setState({ focus: false })
 
     if (onBlur) {
       onBlur(event)
     }
   }
 
-  renderLabel(label, hint, tooltip, inputId) {
+  renderLabel(label, hint, inputId) {
     const labelClassNames = joinClassNames(styles.resetLabel, styles.label)
 
     return (
-      <Flexbox direction="row" dangerouslyAddClassName={formFieldStyles.containsTooltip}>
-        <label htmlFor={inputId.identity()} className={labelClassNames}>
-          <Box right={2} inline>
-            <Text size="medium" bold>
-              {label}
-            </Text>
-          </Box>
-
-          {hint && <Text size="small">{hint}</Text>}
-        </label>
-
-        {tooltip && React.cloneElement(tooltip, {connectedFieldLabel: label})}
-      </Flexbox>
+      <Box tag="label" inline between={2} htmlFor={inputId.identity()} className={labelClassNames}>
+        <Text size="medium" bold>
+          {label}
+        </Text>
+
+        {hint && <Text size="small">{hint}</Text>}
+      </Box>
     )
   }
 
@@ -154,7 +148,7 @@ class Input extends React.Component {
   }
 
   render() {
-    const {type, label, hint, feedback, error, helper, tooltip, ...rest} = this.props
+    const { type, label, hint, feedback, error, helper, tooltip, ...rest } = this.props
 
     const inputId = generateId(rest.id, rest.name, label)
     const helperId = helper && inputId.postfix('helper')
@@ -166,7 +160,10 @@ class Input extends React.Component {
 
     return (
       <Flexbox direction="column">
-        <Box below={2}>{this.renderLabel(label, hint, tooltip, inputId)}</Box>
+        <Box between={2} dangerouslyAddClassName={formFieldStyles.containsTooltip}>
+          {this.renderLabel(label, hint, inputId)}
+          {tooltip && React.cloneElement(tooltip, { connectedFieldLabel: label })}
+        </Box>
 
         {helper && (
           <Box below={3}>{this.renderHelper(helper, helperId, feedback, this.state.value)}</Box>

diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
@@ -5,26 +5,18 @@ exports[`Input renders 1`] = `
   class="column"
 >
   <div
-    class="bottomMargin-2"
+    class="betweenBottomMargin-2 containsTooltip"
   >
-    <div
-      class="row containsTooltip"
+    <label
+      class="resetLabel label"
+      for="the-input"
     >
-      <label
-        class="resetLabel label"
-        for="the-input"
+      <span
+        class="medium boldFont color"
       >
-        <span
-          class="rightMargin-2"
-        >
-          <span
-            class="medium boldFont color"
-          >
-            The input
-          </span>
-        </span>
-      </label>
-    </div>
+        The input
+      </span>
+    </label>
   </div>
   <div
     class="horizontalPadding-3 default"
@@ -54,26 +46,18 @@ exports[`Input renders with a feedback state and icon 1`] = `
   class="column"
 >
   <div
-    class="bottomMargin-2"
+    class="betweenBottomMargin-2 containsTooltip"
   >
-    <div
-      class="row containsTooltip"
+    <label
+      class="resetLabel label"
+      for="the-input"
     >
-      <label
-        class="resetLabel label"
-        for="the-input"
+      <span
+        class="medium boldFont color"
       >
-        <span
-          class="rightMargin-2"
-        >
-          <span
-            class="medium boldFont color"
-          >
-            The input
-          </span>
-        </span>
-      </label>
-    </div>
+        The input
+      </span>
+    </label>
   </div>
   <div
     class="horizontalPadding-3 error"
@@ -96,7 +80,9 @@ exports[`Input renders with a feedback state and icon 1`] = `
       <div
         style="transition:opacity 100ms ease-in-out;opacity:1"
       >
-        <div>
+        <div
+          class=""
+        >
           <i
             aria-label="The value of this input field is invalid."
             class="iconExclamationPointCircle error size16"

diff --git a/src/components/Link/ChevronLink/ChevronLink.jsx b/src/components/Link/ChevronLink/ChevronLink.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../../Box/Box'
 import DecorativeIcon from '../../../components/Icons/DecorativeIcon/DecorativeIcon'
 import safeRest from '../../../utils/safeRest'
-import {warn} from '../../../utils/warn'
+import { warn } from '../../../utils/warn'
+
+import Box from '../../Box/Box'
 
 import styles from './ChevronLink.modules.scss'
 
@@ -19,33 +20,35 @@ const getClassName = variant => {
   }
 }
 
-const getIcon = (symbol, className) => {
-  const direction = symbol === 'leftChevron' ? {right: 2} : {left: 2}
-
-  return (
-    <Box inline {...direction} dangerouslyAddClassName={className}>
-      <DecorativeIcon symbol={symbol} size={16} />
-    </Box>
-  )
-}
+const getIcon = (symbol, classes) => (
+  <span className={classes}>
+    <DecorativeIcon symbol={symbol} size={16} />
+  </span>
+)
 
 /**
  * A call to action link.
  */
-const ChevronLink = ({reactRouterLinkComponent, variant, direction, children, ...rest}) => {
+const ChevronLink = ({ reactRouterLinkComponent, variant, direction, children, ...rest }) => {
   if ((reactRouterLinkComponent || rest.to) && !(reactRouterLinkComponent && rest.to)) {
     warn('Chevron Link', 'The props `reactRouterLinkComponent` and `to` must be used together.')
   }
 
+  const innerLink = (
+    <Box inline between={2}>
+      {direction === 'left' ? getIcon('leftChevron', styles.leftChevron) : undefined}
+      <span>{children}</span>
+      {direction === 'right' ? getIcon('chevron', styles.rightChevron) : undefined}
+    </Box>
+  )
+
   return React.createElement(
     reactRouterLinkComponent || 'a',
     {
       ...safeRest(rest),
       className: getClassName(variant),
     },
-    direction === 'left' ? getIcon('leftChevron', styles.leftChevron) : undefined,
-    children,
-    direction === 'right' ? getIcon('chevron', styles.rightChevron) : undefined
+    innerLink
   )
 }