feat(stack): wip css stacking

Author: codebender828

packages/chakra-ui-core/src/CStack/CStack.js

@@ -1,50 +1,16 @@
-/**
- * Hey! Welcome to @chakra-ui/vue Stack
- *
- * Stack is a layout utility component that makes
- * it easy to stack elements together and apply a space between them.
- *
- * @see Docs     https://vue.chakra-ui.com/stack
- * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CStack/CStack.js
- */
-
-import { StringArray, SNA } from '../config/props/props.types'
-import { cloneVNode, createStyledAttrsMixin } from '../utils'
+import { css } from 'emotion'
 
 import CFlex from '../CFlex'
-import CBox from '../CBox'
+import { createStyledAttrsMixin } from '../utils'
 
-/**
- * CStack component
- *
- * Flex container to stck it's children
- *
- * @extends CFlex
- * @see Docs https://vue.chakra-ui.com/stack
- */
 const CStack = {
   name: 'CStack',
   mixins: [createStyledAttrsMixin('CStack')],
   props: {
-    direction: [String, Array],
-    isInline: {
-      type: Boolean,
-      default: false
-    },
-    isReversed: {
-      type: Boolean,
-      default: false
-    },
-    align: StringArray,
-    justify: StringArray,
-    spacing: {
-      type: SNA,
-      default: 2
-    },
-    shouldWrapChildren: {
-      type: Boolean,
-      default: false
-    }
+    ...CFlex.props,
+    isInline: [Boolean, String, Array],
+    isReversed: [Boolean, String, Array],
+    direction: [Boolean, String, Array]
   },
   computed: {
     _isInline () {
@@ -73,60 +39,28 @@ const CStack = {
       }
 
       return _direction
+    },
+    spacingProps () {
+      return this._isInline
+        ? this._isReversed
+          ? { mr: this.spacing, mb: 0 }
+          : { ml: this.spacing, mt: 0 }
+        : this._isReversed
+          ? { mb: this.spacing, mr: 0 }
+          : { mt: this.spacing, ml: 0 }
     }
   },
   render (h) {
-    const children = this.$slots.default.filter(e => e.tag)
-    const stackables = children.map((node, index) => {
-      const isLastChild = children.length === index + 1
-      const spacingProps = this._isInline
-        ? { [this._isReversed ? 'ml' : 'mr']: isLastChild ? null : this.spacing }
-        : { [this._isReversed ? 'mt' : 'mb']: isLastChild ? null : this.spacing }
-
-      const clone = cloneVNode(node, h)
-      const { propsData } = clone.componentOptions
-      const { attrs } = clone.data
-
-      // If children nodes should wrap,
-      // we wrap them inside block with
-      // display set to inline block.
-      if (this.shouldWrapChildren) {
-        return h(CBox, {
-          props: {
-            as: this.as,
-            to: this.to
-          },
-          attrs: {
-            d: 'inline-block',
-            ...spacingProps
-          }
-        }, [clone])
-      }
-
-      // Otherwise we simply set spacing props
-      // to current node.
-      clone.componentOptions.propsData = {
-        ...propsData
-      }
-
-      clone.data.attrs = {
-        ...attrs,
-        ...spacingProps
-      }
-
-      return clone
-    })
-
     return h(CFlex, {
-      class: this.className,
+      class: [this.className, css({
+        '& > *:not(template) ~ *:not(template)': this.$chakraSystem(this.spacingProps)
+      })],
       props: {
-        as: this.as,
-        align: this.align,
-        justify: this.justify,
+        ...this.$props,
         direction: this._direction
       },
       attrs: this.computedAttrs
-    }, stackables)
+    }, this.$slots.default)
   }
 }
 

packages/chakra-ui-core/src/CStack/CStack.stories.js

@@ -53,3 +53,23 @@ storiesOf('UI | Stack', module)
       </div>
     `
   }))
+  .add('with HTML elements', () => ({
+    components: { CHeading, CText, CStack, CBox, CFlex, CIcon },
+    template: `
+      <div>
+        <c-stack spacing="5" align="flex-end" direction="column">
+          <c-flex align-items="center">
+            <c-icon mr="3" name="moon" />
+            <c-text>Wakanda, 🌍 Africa</c-text>
+          </c-flex>
+          <p>I am a happy paragraph element</p>
+          <h3>I am a jolly heading element</h3>
+          <c-flex align-items="center">
+            <c-icon mr="3" name="sun" />
+            <c-text>Kitchener, ON, Canada</c-text>
+          </c-flex>
+          <button>O nankana ani?</button>
+        </c-stack>
+      </div>
+    `
+  }))

packages/chakra-ui-core/src/CStack/tests/CStack.test.js

@@ -47,6 +47,21 @@ it('should should stack horizontally if isInline', () => {
   expect(stack).toHaveStyle('flex-direction: row')
 })
 
+it('should should stack native html elements', () => {
+  const { asFragment } = renderComponent({
+    template: `
+      <CStack data-testid="stack">
+        <CText mt="4">The future can be even brighter but a goal without a plan is just a wish</CText>
+        <p data-testid="stacked-p">I am a happy paragraph element</p>
+        <h3 data-testid="stacked-h3">I am a jolly heading element</h3>
+        <CText mt="4">You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process</CText>
+      </CStack>
+    `
+  })
+
+  expect(asFragment()).toMatchSnapshot()
+})
+
 // Cannot use `it.each` because it cannot accept
 // component as interpolated variable
 

packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap

@@ -3,12 +3,12 @@
 exports[`should render CStack with element as nav 1`] = `
 <DocumentFragment>
   <nav
-    class="css-j7qwjs css-0"
+    class="css-j7qwjs css-k008qs css-1lp2as9"
     data-chakra-component="CStack"
     data-testid="stack"
   >
     <div
-      class="css-dtyjrz"
+      class="css-1ipbp6k"
       data-chakra-component="CBox"
       data-testid="stack-child-1"
     >
@@ -26,6 +26,7 @@ exports[`should render CStack with element as nav 1`] = `
         The future can be even brighter but a goal without a plan is just a wish
       </p>
     </div>
+     
     <div
       class="css-1ipbp6k"
       data-chakra-component="CBox"
@@ -52,12 +53,12 @@ exports[`should render CStack with element as nav 1`] = `
 exports[`should render CStack with element as section 1`] = `
 <DocumentFragment>
   <section
-    class="css-j7qwjs css-0"
+    class="css-j7qwjs css-k008qs css-1lp2as9"
     data-chakra-component="CStack"
     data-testid="stack"
   >
     <div
-      class="css-dtyjrz"
+      class="css-1ipbp6k"
       data-chakra-component="CBox"
       data-testid="stack-child-1"
     >
@@ -75,6 +76,7 @@ exports[`should render CStack with element as section 1`] = `
         The future can be even brighter but a goal without a plan is just a wish
       </p>
     </div>
+     
     <div
       class="css-1ipbp6k"
       data-chakra-component="CBox"
@@ -101,12 +103,12 @@ exports[`should render CStack with element as section 1`] = `
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-j7qwjs css-0"
+    class="css-j7qwjs css-k008qs css-1lp2as9"
     data-chakra-component="CStack"
     data-testid="stack"
   >
     <div
-      class="css-dtyjrz"
+      class="css-1ipbp6k"
       data-chakra-component="CBox"
       data-testid="stack-child-1"
     >
@@ -124,6 +126,7 @@ exports[`should render correctly 1`] = `
         The future can be even brighter but a goal without a plan is just a wish
       </p>
     </div>
+     
     <div
       class="css-1ipbp6k"
       data-chakra-component="CBox"
@@ -146,3 +149,39 @@ exports[`should render correctly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`should should stack native html elements 1`] = `
+<DocumentFragment>
+  <div
+    class="css-j7qwjs css-k008qs css-1lp2as9"
+    data-chakra-component="CStack"
+    data-testid="stack"
+  >
+    <p
+      class="css-18iq2bq"
+      data-chakra-component="CText"
+    >
+      The future can be even brighter but a goal without a plan is just a wish
+    </p>
+     
+    <p
+      data-testid="stacked-p"
+    >
+      I am a happy paragraph element
+    </p>
+     
+    <h3
+      data-testid="stacked-h3"
+    >
+      I am a jolly heading element
+    </h3>
+     
+    <p
+      class="css-18iq2bq"
+      data-chakra-component="CText"
+    >
+      You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process
+    </p>
+  </div>
+</DocumentFragment>
+`;

packages/chakra-ui-core/src/CThemeProvider/CThemeProvider.js

@@ -9,6 +9,7 @@
  */
 
 import { colorModeObserver } from '../utils/color-mode-observer'
+import { systemProps } from '../utils'
 
 /**
  * CThemeProvider component
@@ -24,7 +25,9 @@ const CThemeProvider = {
        * If no `ColorModeProvider` is provided in children/ consumer app, all chakra
        * components will consume the $chakraColorMode from here.
        */
-      $chakraColorMode: () => 'light'
+      $chakraColorMode: () => 'light',
+
+      $chakraSystem: props => systemProps({ ...props, theme: this.theme })
     }
   },
   computed: {

packages/chakra-ui-core/src/utils/components.js

@@ -38,7 +38,7 @@ export function createWatcher (property) {
 export const createStyledAttrsMixin = (name, isPseudo) => ({
   name,
   inheritAttrs: false,
-  inject: ['$chakraTheme', '$chakraColorMode'],
+  inject: ['$chakraTheme', '$chakraColorMode', '$chakraSystem'],
   data () {
     return {
       attrs$: {},

tests/test-utils/test-utils.js

@@ -4,10 +4,13 @@ import userEvent from '@testing-library/user-event'
 
 import icons from '@/packages/chakra-ui-core/src/lib/internal-icons'
 import theme from '@/packages/chakra-ui-core/src/lib/theme'
+import { systemProps } from '@/packages/chakra-ui-core/src/utils'
+
 const defaultProviders = options => ({
   $chakraTheme: () => theme,
   $chakraColorMode: () => 'light',
   $chakraIcons: icons,
+  $chakraSystem: props => systemProps({ ...props, theme }),
   ...options
 })