fix: Deeply nested aspect ratio

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

@@ -65,7 +65,7 @@ const CAspectRatioBox = {
         left: 0,
         ...vnode.data.attrs
       }
-    })
+    }, vnode.componentOptions.children || [])
 
     return h('div', {
       class: this.className,

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

@@ -22,3 +22,23 @@ storiesOf('UI | AspectRatioBox', module)
       }
     }
   }))
+  .add('Nested Elements', () => ({
+    components: { CAspectRatioBox, CBox },
+    template: `
+      <div style="width: 100vh; height: 100vw;">
+        <CAspectRatioBox maxW="560px" :ratio="16 / 9" bg="gray.200">
+          <CFlex align="center" justify="center">
+            <CBox text-align="center">
+              <CHeading>See the Vue</CHeading>
+              <CText mt="4">Vue makes front-end development a breeze.</CText>
+            </CBox>
+          </CFlex>
+        </CAspectRatioBox>
+      </div>
+    `,
+    data () {
+      return {
+        showCollapsed: true
+      }
+    }
+  }))

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

@@ -6,7 +6,9 @@ const renderComponent = (props) => {
     components: { CAspectRatioBox, CBox },
     template: `
     <CAspectRatioBox maxW="400px" data-testid="aspectRatioBox" ${inlineAttrs}>
-      <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" data-testid="image" />
+      <CBox data-testid="child">
+        <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" h="100%" w="100%" data-testid="image" />
+      </CBox>
     </CAspectRatioBox>
     `,
     ...props
@@ -22,35 +24,50 @@ it('should render correctly', () => {
   const [emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 100%
-  `.trim())
+  `.trim()
+  )
 })
 
 it('should have correct styles', () => {
   const inlineAttrs = ':ratio="2"'
   renderComponent({ inlineAttrs })
   const image = screen.getByTestId('image')
   const aspectRatioBox = screen.getByTestId('aspectRatioBox')
+  const child = screen.getByTestId('child')
 
   const [emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 50%
-  `.trim())
+  `.trim()
+  )
 
   expect(aspectRatioBox).toHaveStyle(`
     max-width: 400px;
     position: relative;
   `)
 
-  expect(image).toHaveStyle(`
-    object-fit: cover;
+  // aspectRatioBox should contain exactly 1 immediate child
+  expect(aspectRatioBox.childElementCount).toEqual(1)
+
+  expect(child).toHaveStyle(`
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
   `)
+
+  expect(child).not.toBeEmpty()
+
+  expect(image).toHaveStyle(`
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  `)
 })

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

@@ -7,13 +7,19 @@ exports[`should render correctly 1`] = `
     data-chakra-component="CAspectRatioBox"
     data-testid="aspectRatioBox"
   >
-    <img
-      alt="naruto"
-      class="css-1mlkgdx"
+    <div
+      class="css-k57fb3"
       data-chakra-component="CBox"
-      data-testid="image"
-      src="https://bit.ly/naruto-sage"
-    />
+      data-testid="child"
+    >
+      <img
+        alt="naruto"
+        class="css-ygtapu"
+        data-chakra-component="CBox"
+        data-testid="image"
+        src="https://bit.ly/naruto-sage"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;