Merge pull request #456 from chakra-ui/develop

codebender828 · web-flow · commit 1c9afcc0c36f · 2021-07-09T09:36:33.000+08:00
chore: release candidate `@chakra-ui/vue@0.9.2` 🎉
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -256,6 +256,15 @@
         "code",
         "test"
       ]
+    },
+    {
+      "login": "ejirocodes",
+      "name": "Ejiro Asiuwhu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/45228014?v=4",
+      "profile": "http://linkedin.com/in/ejiro-asiuwhu",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/.changeset/tall-forks-do.md b/.changeset/tall-forks-do.md
@@ -0,0 +1,5 @@
+---
+'@chakra-ui/vue': patch
+'@chakra-ui/nuxt': patch
+'chakra-ui-docs': patch
+---
diff --git a/README.md b/README.md
@@ -218,10 +218,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/odanado"><img src="https://avatars.githubusercontent.com/u/6040962?v=4?s=50" width="50px;" alt=""/><br /><sub><b>odanado</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=odanado" title="Code">💻</a> <a href="#tool-odanado" title="Tools">🔧</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/IHIutch"><img src="https://avatars.githubusercontent.com/u/20825047?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Jonathan Hutchison</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/issues?q=author%3AIHIutch" title="Bug reports">🐛</a> <a href="#ideas-IHIutch" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Tests">⚠️</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Documentation">📖</a></td>
     <td align="center"><a href="https://jt.houk.space/"><img src="https://avatars.githubusercontent.com/u/23695312?v=4?s=50" width="50px;" alt=""/><br /><sub><b>JT Houk</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=HoukasaurusRex" title="Documentation">📖</a> <a href="#platform-HoukasaurusRex" title="Packaging/porting to new platform">📦</a></td>
     <td align="center"><a href="https://github.com/vincentpalma"><img src="https://avatars.githubusercontent.com/u/10133632?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Vincent Palma</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vincentpalma" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/MaySoMusician"><img src="https://avatars.githubusercontent.com/u/34566290?v=4?s=50" width="50px;" alt=""/><br /><sub><b>MaySoMusician</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MaySoMusician" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/MWFIAE"><img src="https://avatars.githubusercontent.com/u/6072971?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Martin</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MWFIAE" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MWFIAE" title="Tests">⚠️</a></td>
+    <td align="center"><a href="http://linkedin.com/in/ejiro-asiuwhu"><img src="https://avatars.githubusercontent.com/u/45228014?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Ejiro Asiuwhu</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=ejirocodes" title="Documentation">📖</a></td>
   </tr>
 </table>
 
diff --git a/packages/chakra-ui-core/src/CButton/CButton.js b/packages/chakra-ui-core/src/CButton/CButton.js
@@ -105,7 +105,7 @@ const CButton = {
       props: this.$props,
       attrs: {
         type: this.type,
-        tabIndex: 0,
+        tabindex: 0,
         disabled: this.isDisabled || this.isLoading,
         'aria-disabled': this.isDisabled || this.isLoading,
         dataActive: this.isActive ? 'true' : undefined,
diff --git a/packages/chakra-ui-core/src/CEditable/CEditable.js b/packages/chakra-ui-core/src/CEditable/CEditable.js
@@ -225,7 +225,7 @@ const CEditablePreview = {
         opacity: !this.hasValue ? 0.6 : undefined
       }
     },
-    tabIndex () {
+    tabindex () {
       const { isEditing, isDisabled, isPreviewFocusable } = this.context
       if ((!isEditing || !isDisabled) && isPreviewFocusable) {
         return 0
@@ -243,7 +243,7 @@ const CEditablePreview = {
       class: [this.className],
       attrs: {
         'aria-disabled': isDisabled,
-        tabIndex: this.tabIndex,
+        tabindex: this.tabindex,
         ...this.computedAttrs
       },
       on: {
diff --git a/packages/chakra-ui-core/src/CLink/CLink.js b/packages/chakra-ui-core/src/CLink/CLink.js
@@ -63,7 +63,7 @@ const CLink = {
         ...this.isRouterLink && { to: this.to }
       },
       attrs: {
-        tabIndex: this.isDisabled ? -1 : undefined,
+        tabindex: this.isDisabled ? -1 : undefined,
         'aria-disabled': this.isDisabled,
         ...this.externalAttrs,
         ...this.computedAttrs
diff --git a/packages/chakra-ui-core/src/CMenu/CMenu.js b/packages/chakra-ui-core/src/CMenu/CMenu.js
@@ -415,7 +415,7 @@ const CMenuList = {
         id: menuId,
         role: 'menu',
         'aria-labelledby': buttonId,
-        tabIndex: -1,
+        tabindex: -1,
         'data-chakra-component': 'CMenuButton'
       },
       on: {
@@ -484,7 +484,7 @@ const CMenuItem = {
         ...this.menuItemStyles({ theme: this.theme, colorMode: this.colorMode }),
         ...this.$attrs,
         role: this.role,
-        tabIndex: -1,
+        tabindex: -1,
         disabled: this.isDisabled,
         'aria-disabled': this.isDisabled,
         'data-chakra-component': 'CMenuItem'
diff --git a/packages/chakra-ui-core/src/CMenu/CMenuOption.js b/packages/chakra-ui-core/src/CMenu/CMenuOption.js
@@ -113,7 +113,7 @@ const CMenuItemOption = {
         alignItems: 'center',
         ...this.$attrs,
         role: this.role,
-        tabIndex: -1,
+        tabindex: -1,
         'aria-checked': this.isChecked,
         disabled: this.isDisabled,
         'aria-disabled': this.isDisabled,
diff --git a/packages/chakra-ui-core/src/CModal/CModal.js b/packages/chakra-ui-core/src/CModal/CModal.js
@@ -445,7 +445,7 @@ const CModalContent = {
         attrs: {
           role: 'dialog',
           'aria-modal': 'true',
-          tabIndex: -1,
+          tabindex: -1,
           id: contentId,
           ...(addAriaDescribedby && { 'aria-describedby': bodyId }),
           ...(addAriaLabelledby && { 'aria-labelledby': headerId }),
diff --git a/packages/chakra-ui-core/src/CPopover/CPopover.js b/packages/chakra-ui-core/src/CPopover/CPopover.js
@@ -497,7 +497,7 @@ const CPopoverContent = {
         _focus: { outline: 0, shadow: 'outline' },
         ...this.$attrs,
         id: popoverId,
-        tabIndex: -1,
+        tabindex: -1,
         'aria-labelledby': this.headerId,
         'aria-describedby': this.bodyId,
         'aria-label': this.ariaLabel,
diff --git a/packages/chakra-ui-core/src/CPopover/CPopover.stories.js b/packages/chakra-ui-core/src/CPopover/CPopover.stories.js
@@ -120,7 +120,7 @@ storiesOf('UI | Popover', module)
       <CPopover :closeOnBlur="false">
         <CPopoverTrigger>
           <CBox
-            tabIndex="0"
+            tabindex="0"
             role="button"
             aria-label="Some box"
             p="5"
diff --git a/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js b/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js
@@ -157,7 +157,7 @@ const CRadioButtonGroup = {
             ...(!isLastChild && spacingProps)
           },
           attrs: {
-            tabIndex: getTabIndex()
+            tabindex: getTabIndex()
           },
           nativeOn: {
             click: handleClick
diff --git a/packages/chakra-ui-core/src/CSlider/CSlider.js b/packages/chakra-ui-core/src/CSlider/CSlider.js
@@ -456,7 +456,7 @@ const CSliderThumb = {
         ...this.computedAttrs,
         id: thumbId,
         role: 'slider',
-        tabIndex: isDisabled ? undefined : 0,
+        tabindex: isDisabled ? undefined : 0,
         'aria-disabled': isDisabled,
         'aria-valuemin': min,
         'aria-valuetext': valueText,
diff --git a/packages/chakra-ui-core/src/CStack/CStack.js b/packages/chakra-ui-core/src/CStack/CStack.js
@@ -76,7 +76,8 @@ const CStack = {
     }
   },
   render (h) {
-    const children = this.$slots.default.filter(e => e.tag)
+    const defaultSlot = this.$slots.default || []
+    const children = defaultSlot.filter(e => e.tag)
     const stackables = children.map((node, index) => {
       const isLastChild = children.length === index + 1
       const spacingProps = this._isInline
diff --git a/packages/chakra-ui-core/src/CStack/tests/CStack.test.js b/packages/chakra-ui-core/src/CStack/tests/CStack.test.js
@@ -26,6 +26,13 @@ it('should render correctly', () => {
   expect(asFragment()).toMatchSnapshot()
 })
 
+it('should render empty children correctly', () => {
+  const { asFragment } = renderComponent({
+    template: '<c-stack></c-stack>'
+  })
+  expect(asFragment()).toMatchSnapshot()
+})
+
 it('should default to vertical stack', () => {
   renderComponent()
   const stack = screen.getByTestId('stack')
diff --git a/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap b/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
@@ -147,6 +147,15 @@ exports[`should render correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should render empty children correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-j7qwjs css-0"
+    data-chakra-component="CStack"
+  />
+</DocumentFragment>
+`;
+
 exports[`should should stack native html elements 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/chakra-ui-core/src/CTabs/CTabs.js b/packages/chakra-ui-core/src/CTabs/CTabs.js
@@ -373,7 +373,7 @@ const CTab = {
       class: [this.className],
       attrs: {
         role: 'tab',
-        tabIndex: this.isSelected ? 0 : -1,
+        tabindex: this.isSelected ? 0 : -1,
         id: `tab:${this.id}`,
         type: 'button',
         disabled: this.isDisabled,
@@ -408,7 +408,7 @@ const CTabPanel = {
       class: [this.className],
       attrs: {
         role: 'tabpanel',
-        tabIndex: -1,
+        tabindex: -1,
         'aria-labelledby': `tab:${this.id}`,
         hidden: !this.isSelected,
         id: `panel:${this.id}`,
@@ -460,7 +460,7 @@ const CTabPanels = {
     return h(this.as, {
       class: [this.className],
       attrs: {
-        tabIndex: -1,
+        tabindex: -1,
         ...this.computedAttrs
       },
       on: this.computedListeners
diff --git a/packages/chakra-ui-core/src/CTooltip/CTooltip.js b/packages/chakra-ui-core/src/CTooltip/CTooltip.js
@@ -151,7 +151,7 @@ const CTooltip = {
             as: 'span'
           },
           attrs: {
-            tabIndex: 0,
+            tabindex: 0,
             'x-tooltip-anchor': `${this.tooltipId}`,
             ...(this.isOpen && { 'aria-describedby': this.tooltipId })
           },
diff --git a/packages/chakra-ui-nuxt/package.json b/packages/chakra-ui-nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/nuxt",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Chakra UI Module for Nuxt.js",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chakra-ui/vue": "^0.9.0",
+    "@chakra-ui/vue": "^0.9.1",
     "chakra-loader": "latest",
     "@emotion/css": "^11.0.0"
   },
diff --git a/website/pages/accordion.mdx b/website/pages/accordion.mdx
@@ -171,7 +171,8 @@ Use the style prop `_expanded` to style this state.
 The `CAccordionItem` component exposes a scoped slot with two variables: `isExpanded` and `isDisabled`.
 In the example below, we change the icon rendered by the `CAccordionIcon` based on the `CAccordionItems` expanded state.
 
-```vue live=true<c-accordion :allow-toggle="true">
+```vue live=true
+<c-accordion :allow-toggle="true">
   <c-accordion-item>
     <c-accordion-header>
       <c-box flex="1" text-align="left">
diff --git a/website/pages/editable.mdx b/website/pages/editable.mdx
@@ -83,7 +83,7 @@ props. Here are the custom props:
 | onCancel           | `function`          |                      | Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.                            |
 | onSubmit           | `function`          |                      | Callback invoked when user confirms value with `enter` key or by blurring the input.                                                      |
 | onEdit             | `function`          |                      | Callback invoked once the user enters edit mode.                                                                                          |
-| isPreviewFocusable | `boolean`         | `true`               | If `true`, the read only view, has a `tabIndex` set to `0` so it can receive focus via the keyboard or click.                             |
+| isPreviewFocusable | `boolean`         | `true`               | If `true`, the read only view, has a `tabindex` set to `0` so it can receive focus via the keyboard or click.                             |
 | startWithEditView  | `boolean`         |                      | If `true`, the Editable will start with edit mode by default.                                                                             |
 | submitOnBlur       | `boolean`         | `true`               | If `true`, it'll update the value onBlur and turn off the edit mode.                                                                      |
 | selectAllOnFocus   | `boolean`         | `true`               | If `true`, the input's text will be highlighted on focus.                                                                                 |
diff --git a/website/pages/menu.mdx b/website/pages/menu.mdx
@@ -8,7 +8,7 @@ import SEO from "../components/SEO";
 # Menu
 
 The `CMenu` component is an accessible dropdown menu for the common dropdown menu button design pattern.
-Menu uses roving tabIndex for focus management.
+Menu uses roving tabindex for focus management.
 
 See `CMenu`'s [accessibility report](https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CMenu/accessibility.md)
 
diff --git a/website/pages/tooltip.mdx b/website/pages/tooltip.mdx
@@ -92,7 +92,7 @@ Using the `placement` prop you can adjust where your tooltip will be displayed.
 | `showDelay`          | `number`             |          | The delay in `ms` for the tooltip to show                                             |
 | `hideDelay`          | `number`             |          | The delay in `ms` for the tooltip to hide                                             |
 | `closeOnClick`       | `boolean`            |          | If `true` hide the tooltip, when the trigger is clicked.                              |
-| `shouldWrapChildren` | `boolean`            |          | If `true`, the tooltip will wrap the children in a `span` with `tabIndex=0`           |
+| `shouldWrapChildren` | `boolean`            |          | If `true`, the tooltip will wrap the children in a `span` with `tabindex=0`           |
 
 ### Slots
 
