diff --git a/.all-contributorsrc b/.all-contributorsrc index deaf753b..86d53e84 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -195,6 +195,36 @@ "example", "code" ] + }, + { + "login": "odanado", + "name": "odanado", + "avatar_url": "https://avatars.githubusercontent.com/u/6040962?v=4", + "profile": "https://github.com/odanado", + "contributions": [ + "code", + "tool" + ] + }, + { + "login": "IHIutch", + "name": "Jonathan Hutchison", + "avatar_url": "https://avatars.githubusercontent.com/u/20825047?v=4", + "profile": "https://github.com/IHIutch", + "contributions": [ + "code", + "bug", + "ideas" + ] + }, + { + "login": "HoukasaurusRex", + "name": "JT Houk", + "avatar_url": "https://avatars.githubusercontent.com/u/23695312?v=4", + "profile": "https://jt.houk.space/", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 576ad960..1c1f326a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -51,6 +51,7 @@ jobs: uses: changesets/action@master with: publish: yarn release + title: "chore(release): version packages" commit: "chore(release): version packages" env: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/README.md b/README.md index 91a687ba..2bf85b73 100644 --- a/README.md +++ b/README.md @@ -215,6 +215,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Guilherme Schalch
💻
Žiga Vukčevič
📖
Sybren W
📖 🖋 💡 💻 +
odanado
💻 🔧 + + +
JT Houk
📖 +
Jonathan Hutchison
💻 🐛 🤔 diff --git a/package.json b/package.json index 7156a32c..4e839c8b 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "docs:lint": "yarn workspace chakra-ui-docs lint", "theme:dev": "yarn workspace @chakra-ui/theme-vue build", "docs-dev": "yarn workspace chakra-ui-docs dev", + "docs-build": "yarn workspace chakra-ui-docs build", + "docs-serve": "yarn workspace chakra-ui-docs nuxt start", "evalbundle": "bundlesize" }, "dependencies": { diff --git a/packages/chakra-ui-core/CHANGELOG.md b/packages/chakra-ui-core/CHANGELOG.md index f7ddc0c1..6becd138 100644 --- a/packages/chakra-ui-core/CHANGELOG.md +++ b/packages/chakra-ui-core/CHANGELOG.md @@ -1,11 +1,24 @@ # Change Log +## 0.8.0 + +### Minor Changes + +- [`8af1c07`](https://github.com/chakra-ui/chakra-ui-vue/commit/8af1c07404d2cfa94bb338e4268c5e0869a50776) Thanks [@codebender828](https://github.com/codebender828)! - Adds type definitions, aspect-ratio-box fixes, switch fixes and collapse fixes +- feat: add type definition of component #380 by @odanado +- feat: CCollapse now renders with collapsed height if initially closed by @codebender828 . closes #269 +- fix: Set ccollapse height to auto on enter complete, unless finalHeight wa... #384 by @IHIutch +- fix: Add position: relative to switch label #396 by @IHIutch +- fix: Deeply nested aspect-ratio by @IHIutch + ## 0.7.4 ### Patch Changes - [`951906a`](https://github.com/chakra-ui/chakra-ui-vue/commit/951906a61deabdcf1d3f04b7f8f9fdeaad1f3841) [#375](https://github.com/chakra-ui/chakra-ui-vue/pull/375) Thanks [@codebender828](https://github.com/codebender828)! - Added support for Feather Icons to Nuxt.js +* fix(nuxt): nuxt module icon parsing + ## 0.7.3 ## 0.7.2 diff --git a/packages/chakra-ui-core/package.json b/packages/chakra-ui-core/package.json index 4ee578e0..fbd0085b 100644 --- a/packages/chakra-ui-core/package.json +++ b/packages/chakra-ui-core/package.json @@ -1,9 +1,10 @@ { "name": "@chakra-ui/vue", - "version": "0.7.4", + "version": "0.8.0", "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", + "types": "types/index.d.ts", "sideEffects": false, "maintainers": [ "Jonathan Bakebwa " @@ -27,7 +28,8 @@ }, "files": [ "dist", - "src" + "src", + "types" ], "bundle-phobia": { "max-size": "85KB", diff --git a/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js b/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js index 1949c5bb..ca906410 100644 --- a/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js +++ b/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js @@ -32,6 +32,7 @@ storiesOf('UI | Accordion', module) tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + ` diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js index 5cbb1432..4fab0d4d 100644 --- a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js +++ b/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, diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js index 4f70bfbe..ff1ee77c 100644 --- a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js +++ b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js @@ -22,3 +22,23 @@ storiesOf('UI | AspectRatioBox', module) } } })) + .add('Nested Elements', () => ({ + components: { CAspectRatioBox, CBox }, + template: ` +
+ + + + See the Vue + Vue makes front-end development a breeze. + + + +
+ `, + data () { + return { + showCollapsed: true + } + } + })) diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js index 2e8752c9..9cdeb4f8 100644 --- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js +++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js @@ -6,7 +6,9 @@ const renderComponent = (props) => { components: { CAspectRatioBox, CBox }, template: ` - + + + `, ...props @@ -22,9 +24,11 @@ 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', () => { @@ -32,25 +36,38 @@ it('should have correct styles', () => { 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%; + `) }) diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap b/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap index 3b939e55..532a905a 100644 --- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap +++ b/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" > - naruto + data-testid="child" + > + naruto + `; diff --git a/packages/chakra-ui-core/src/CSwitch/CSwitch.js b/packages/chakra-ui-core/src/CSwitch/CSwitch.js index e53f870c..cf353621 100644 --- a/packages/chakra-ui-core/src/CSwitch/CSwitch.js +++ b/packages/chakra-ui-core/src/CSwitch/CSwitch.js @@ -125,6 +125,7 @@ const CSwitch = { as: 'label' }, attrs: { + position: 'relative', display: 'inline-block', verticalAlign: 'middle', ...data.attrs, diff --git a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap index 706cf836..232edfb8 100644 --- a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap +++ b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap @@ -3,7 +3,7 @@ exports[`should render correctly 1`] = `