fix(visuallyhidden): fix attrs resolytion

Author: codebender828

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

@@ -0,0 +1,42 @@
+import { storiesOf } from '@storybook/vue'
+import { CSpinner, CStack } from '..'
+
+const components = { CSpinner, CStack }
+
+storiesOf('UI | Spinner', module)
+  .add('Basic Usage', () => ({
+    components,
+    template: `
+      <c-spinner />
+    `
+  }))
+  .add('With color', () => ({
+    components,
+    template: `
+      <c-spinner color="blue.500" />
+    `
+  }))
+  .add('With size', () => ({
+    components,
+    template: `
+    <c-stack is-inline :spacing="4">
+      <c-spinner size="xs" />
+      <c-spinner size="sm" />
+      <c-spinner size="md" />
+      <c-spinner size="lg" />
+      <c-spinner size="xl" />
+    </c-stack>
+    `
+  }))
+  .add('With empty color area', () => ({
+    components,
+    template: `
+      <c-spinner
+        thickness="4px"
+        speed="0.65s"
+        empty-color="green.200"
+        color="vue.500"
+        size="xl"
+      />
+    `
+  }))

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

@@ -28,19 +28,19 @@ const CVisuallyHidden = {
     const className = css({
       border: '0px',
       clip: 'rect(0px, 0px, 0px, 0px)',
-      height: `${attrs.w || '1px'}`,
-      width: `${attrs.h || '1px'}`,
+      height: `${(attrs && attrs.w) || '1px'}`,
+      width: `${(attrs && attrs.h) || '1px'}`,
       margin: '-1px',
       padding: '0px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
-      position: `${attrs.pos || 'absolute'}`
+      position: `${(attrs && attrs.pos) || 'absolute'}`
     })
 
     return h(props.as, {
       class: [className],
       attrs: {
-        ...attrs,
+        ...(attrs || {}),
         'data-chakra-component': 'CVisuallyHidden'
       },
       domProps,