Merge pull request #325 from chakra-ui/fix/input-group-z-index

fix(inputgroup): default inputgroup z-index to containing element zindex

Author: codebender828

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

@@ -87,6 +87,7 @@ const CInputGroup = {
       attrs: {
         display: 'flex',
         position: 'relative',
+        zIndex: 0,
         ...data.attrs,
         'data-chakra-component': 'CInputGroup'
       }

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

@@ -0,0 +1,23 @@
+import { CInputGroup, CInputLeftElement, CInputRightElement, CInput, CIcon } from '../..'
+import { render } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const base = {
+    data: () => ({ text: 'hello' }),
+    components: { CInputGroup, CInputLeftElement, CInputRightElement, CInput, CIcon },
+    template: `
+      <c-input-group>
+        <c-input-left-element color="gray.300" fontSize="1.2em">¥</c-input-left-element>
+        <c-input placeholder="Enter amount" />
+        <c-input-right-element><c-icon name="check" color="green.500" /></c-input-right-element>
+      </c-input-group>
+    `,
+    ...props
+  }
+  return render(base)
+}
+
+test('should render correctly', () => {
+  const { asFragment } = renderComponent()
+  expect(asFragment()).toMatchSnapshot()
+})

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-15frdhg"
+    data-chakra-component="CInputGroup"
+  >
+    <div
+      class="css-rbouvx"
+      color="gray.300"
+      data-chakra-component="CInputLeftElement"
+      fontsize="1.2em"
+    >
+      ¥
+    </div>
+    <input
+      class="css-lr9hjy"
+      data-chakra-component="CInput"
+      placeholder="Enter amount"
+    />
+    <div
+      class="css-wqp70x"
+      data-chakra-component="CInputRightElement"
+    >
+      <svg
+        class="css-12j51pv css-3vopgu css-7w9hf9"
+        data-chakra-component="CIcon"
+        role="presentation"
+        viewBox="0 0 14 14"
+      >
+        
+      
+        <g
+          fill="currentColor"
+        >
+          
+        
+          <polygon
+            points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+          />
+          
+      
+        </g>
+        
+    
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;

website/components/MDXComponents.js

@@ -109,7 +109,7 @@ const MDXComponents = {
     name: 'InlineCode',
     render () {
       return (
-        <CCode variant-color="orange" font-weight="bold" px="1" rounded="md" fontSize="0.84em" {...props}>
+        <CCode variant-color="orange" bg="transparent" font-weight="bold" px="1" rounded="md" fontSize="0.84em" {...props}>
           {this.$slots.default}
         </CCode>
       )

website/layouts/default.vue

@@ -103,11 +103,9 @@ export default {
       },
       code: {
         light: {
-          bg: 'orange.100',
-          color: 'orange.800'
+          color: 'orange.600'
         },
         dark: {
-          bg: 'rgba(250, 240, 137, 0.16)',
           color: 'rgb(250, 195, 137)'
         }
       },