Bugfix/story issues

.storybook/components/Canvas.vue

@@ -80,6 +80,8 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 100%;
+    height: 100%
   }
 }
 </style>

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

@@ -1,45 +1,35 @@
 import { storiesOf } from '@storybook/vue'
-import { CSSReset, Progress as KProgress, Stack } from '..'
+import { CSSReset, Progress as KProgress, Stack, Box } from '..'
 
 storiesOf('UI | Progress', module)
-  .add('Default Progress', () => ({
-    components: { CSSReset, KProgress },
+  .addDecorator(story => ({
+    components: { CSSReset, Box, story: story() },
     template: `
-      <div>
-        <CSSReset />
-        <KProgress :value="80" />
-      </div>
-    `
+      <Box w="full" maxWidth="400px" mx="auto" mt="8" p="3">
+        <CSSReset></CSSReset>
+        <story></story>
+      </Box>`
+  }))
+
+  .add('Default Progress', () => ({
+    components: { KProgress },
+    template: `<KProgress :value="80" />`
   }))
   .add('With stripe', () => ({
-    components: { CSSReset, KProgress },
-    template: `
-      <div>
-        <CSSReset />
-        <KProgress hasStripe :value="64" />
-      </div>
-    `
+    components: { KProgress },
+    template: `<KProgress hasStripe :value="64" />`
   }))
   .add('With sizes', () => ({
-    components: { CSSReset, KProgress, Stack },
+    components: { KProgress, Stack },
     template: `
-      <div>
-        <CSSReset />
-        <Stack :spacing="5">
-          <KProgress rounded="sm" color="green" size="sm" />
-          <KProgress color="green" size="md" />
-          <KProgress color="green" size="lg" />
-          <KProgress color="green" height="32px" />
-        </Stack>
-      </div>
-    `
+      <Stack :spacing="5">
+        <KProgress rounded="sm" color="green" size="sm" />
+        <KProgress color="green" size="md" />
+        <KProgress color="green" size="lg" />
+        <KProgress color="green" height="32px" />
+      </Stack>`
   }))
   .add('With color', () => ({
-    components: { CSSReset, KProgress },
-    template: `
-    <div>
-      <CSSReset />
-      <KProgress color="pink" hasStripe />
-    </div>
-  `
+    components: { KProgress },
+    template: `<KProgress color="pink" hasStripe />`
   }))

packages/chakra-ui-core/src/Radio/index.js

@@ -47,7 +47,7 @@ const Radio = {
     }
   },
   render (h) {
-    const children = this.$slots.default.filter(e => (e.tag))
+    const children = this.$slots.default
 
     return h(Box, {
       props: {
@@ -67,6 +67,9 @@ const Radio = {
         props: {
           as: 'input'
         },
+        domProps: {
+          defaultChecked: this.defaultIsChecked
+        },
         attrs: {
           type: 'radio',
           'aria-label': this._ariaLabel,
@@ -75,7 +78,6 @@ const Radio = {
           name: this.name,
           value: this.value,
           'aria-invalid': this.isInvalid,
-          defaultChecked: this.defaultIsChecked,
           disabled: this.isDisabled,
           'aria-disabled': this.isDisabled
         },
@@ -103,7 +105,7 @@ const Radio = {
           }
         })
       ]),
-      ...children && h(Box, {
+      children && h(Box, {
         props: {
           ml: 2,
           fontSize: this.size,

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

@@ -0,0 +1,77 @@
+import Radio from '../'
+import { render, userEvent } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const inlineAttrs = (props && props.inlineAttrs) || ''
+  const base = {
+    components: { Radio },
+    template: `<Radio ${inlineAttrs}>radio</Radio>`,
+    ...props
+  }
+  return render(base)
+}
+
+it('should render correctly', () => {
+  const { asFragment } = renderComponent()
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('should display a disabled radio', () => {
+  const inlineAttrs = 'isDisabled'
+  const { getByText, container } = renderComponent({ inlineAttrs })
+  const input = container.querySelector('input')
+
+  expect(input).toHaveAttribute('disabled')
+  expect(getByText('radio').parentNode).toHaveStyle('cursor: not-allowed;')
+})
+
+it('should display a radio with a checked state', () => {
+  const inlineAttrs = 'defaultIsChecked'
+  const { container } = renderComponent({ inlineAttrs })
+  const input = container.querySelector('input')
+
+  expect(input).toBeChecked()
+})
+
+it('should display a radio with an unchecked state', () => {
+  const inlineAttrs = ':isChecked="false"'
+  const { container } = renderComponent({ inlineAttrs })
+  const input = container.querySelector('input')
+
+  expect(input).not.toBeChecked()
+})
+
+it('should have a checked state when setting defaultIsChecked', () => {
+  const inlineAttrs = 'defaultIsChecked'
+  const { container } = renderComponent({ inlineAttrs })
+  const input = container.querySelector('input')
+
+  expect(input).toBeChecked()
+})
+
+test('Uncontrolled - should not check if disabled', async () => {
+  const inlineAttrs = 'isDisabled'
+  const { container, getByText } = renderComponent({ inlineAttrs })
+  const input = container.querySelector('input')
+  const radio = getByText('radio')
+
+  expect(input).toBeDisabled()
+
+  await userEvent.click(radio)
+
+  expect(input).not.toBeChecked()
+})
+
+test('Uncontrolled - should be checked always', async () => {
+  const { container, getByText } = renderComponent()
+  const input = container.querySelector('input')
+  const radio = getByText('radio')
+
+  // click the first time, it's checked
+  await userEvent.click(radio)
+  expect(input).toBeChecked()
+
+  // click the second time, it should be still checked
+  await userEvent.click(radio)
+  expect(input).toBeChecked()
+})

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <label
+    class="css-1qf83f9"
+  >
+    <input
+      class="css-0 css-f8n5zr"
+      type="radio"
+    />
+    <div
+      aria-hidden="true"
+      class="css-1kfhqjz css-aufuif"
+    >
+      <span
+        class="css-1qfw50u"
+      />
+    </div>
+    <div
+      class="css-np4rym"
+    >
+      radio
+    </div>
+  </label>
+</DocumentFragment>
+`;

packages/chakra-ui-core/src/RadioButtonGroup/RadioGroup.stories.js

@@ -30,13 +30,9 @@ storiesOf('UI | RadioGroup', module)
     template: `
       <div>
         <Fragment>
-          <Button @click="focusRadioGroup">
-            Focus RadioGroup
-          </Button>
           <RadioGroup
             size="lg"
             defaultValue="male"
-            @change="handleChange"
             ref="rg"
           >
           <Radio variantColor="red" value="male">Male</Radio>
@@ -53,7 +49,6 @@ storiesOf('UI | RadioGroup', module)
         <Fragment>
           <RadioButtonGroup
             defaultValue="item-2"
-            @change="handleChange"
             isInline
             :spacing="4"
           >

packages/chakra-ui-core/src/RadioButtonGroup/index.js

@@ -1,7 +1,7 @@
 import Box from '../Box'
 import { baseProps } from '../config'
 import { StringNumber, SNA } from '../config/props/props.types'
-import { isDef, useId, cloneVNodeElement, forwardProps } from '../utils'
+import { isDef, useId, cloneVNodeElement, forwardProps, cleanChildren } from '../utils'
 
 const RadioButtonGroup = {
   name: 'RadioButtonGroup',
@@ -43,7 +43,7 @@ const RadioButtonGroup = {
     }
   },
   mounted () {
-    const children = this.$slots.default
+    const children = cleanChildren(this.$slots.default)
     this.focusableValues = children.map(child => child.componentOptions.propsData.isDisabled === true
       ? null
       : child.componentOptions.propsData.value)

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

@@ -0,0 +1,76 @@
+import { Button, Radio, RadioGroup, RadioButtonGroup } from '../../'
+import { render, defaultProviders } from '@/tests/test-utils'
+
+// mocks
+jest.mock('breadstick/dist/components/Alert/styles.css', () => ({})) // jest tries to import styles and fails...
+
+const CustomRadio = {
+  name: 'CustomRadio',
+  props: {
+    isChecked: Boolean,
+    isDisabled: Boolean,
+    value: [String, Number],
+    mx: String,
+    dataTestid: String
+  },
+  inheritAttrs: true,
+  render (h) {
+    return h(Button, {
+      props: {
+        ...this.$props,
+        isDisabled: this.isDisabled,
+        variantColor: this.isChecked ? 'red' : 'gray'
+      },
+      attrs: {
+        role: 'radio',
+        'aria-checked': this.isChecked,
+        'data-testid': this.dataTestid
+      }
+    }, this.$slots.default)
+  }
+}
+
+const renderComponent = (props) => {
+  const base = {
+    components: { Button, Radio, RadioGroup, RadioButtonGroup, CustomRadio },
+    provide: () => defaultProviders(),
+    template: `
+    <RadioButtonGroup defaultValue="item-2" isInline>
+        <CustomRadio value="item-1" data-testid="item-1">Custom Radio 1</CustomRadio>
+        <CustomRadio value="item-2" data-testid="item-2">Custom Radio 2</CustomRadio>
+        <CustomRadio value="item-3" data-testid="item-3">Custom Radio 3</CustomRadio>
+        <CustomRadio isDisabled value="item-4" data-testid="item-4">Custom Radio 4</CustomRadio>
+    </RadioButtonGroup>
+`,
+    ...props
+  }
+  return render(base)
+}
+
+it('should render correctly', () => {
+  const { asFragment } = renderComponent()
+
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('should display children', () => {
+  const { getByText } = renderComponent()
+  expect(getByText('Custom Radio 1')).toBeInTheDocument()
+  expect(getByText('Custom Radio 2')).toBeInTheDocument()
+})
+
+test('defaultValue works', () => {
+  const { getByTestId } = renderComponent()
+  const one = getByTestId('item-1')
+  const two = getByTestId('item-2')
+
+  expect(one).not.toHaveAttribute('aria-checked')
+  expect(two).toHaveAttribute('aria-checked', 'true')
+})
+
+test('CustomRadio isDisabled works', () => {
+  const { getByTestId } = renderComponent()
+  const last = getByTestId('item-4')
+
+  expect(last).toHaveAttribute('disabled')
+})

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-0"
+    role="radiogroup"
+  >
+    <button
+      class="css-0 css-rup5mm"
+      data-testid="item-1"
+      role="radio"
+      tabindex="-1"
+      type="button"
+    >
+      Custom Radio 1
+    </button>
+    <button
+      aria-checked="true"
+      class="css-0 css-1f3kv3a"
+      data-testid="item-2"
+      role="radio"
+      tabindex="0"
+      type="button"
+    >
+      Custom Radio 2
+    </button>
+    <button
+      class="css-0 css-rup5mm"
+      data-testid="item-3"
+      role="radio"
+      tabindex="-1"
+      type="button"
+    >
+      Custom Radio 3
+    </button>
+    <button
+      aria-disabled="true"
+      class="css-0 css-rup5mm"
+      data-testid="item-4"
+      disabled="disabled"
+      role="radio"
+      tabindex="-1"
+      type="button"
+    >
+      Custom Radio 4
+    </button>
+  </div>
+</DocumentFragment>
+`;

packages/chakra-ui-core/src/Select/index.js

@@ -58,7 +58,7 @@ const SelectInput = {
           value: ''
         }
       }, this.placeholder),
-      ...this.$slots.default
+      this.$slots.default
     ])
   }
 }