v0.10.0
The biggest release of the component library so far and a big step towards 1.0! 🎉 As part of this release the approach of the Vue components was retooled to use CSS classes under the hood, with the Vue components being just a lightweight wrapper around them. This enables exciting things such as the ability to use the component styling without using the Vue components.
A big thanks to all the contributors in this release for making this happen! ✨
Upgrade Guide
Be sure to import the CSS components at the top of your main CSS file:
/* main.css */
@import "@bcc-code/vue-components/tailwind/index.css";
@tailwind ...Using without Vue
It's now possible to use the components without Vue, although you then need to make sure to add the right classes to the components. Currently the easiest way to do this is to use Inspect element on the Storybook to view which classes are added with which prop. Or check out the components source.
When you're using Tailwind, use the snippet above to include the Tailwind CSS file so only the classes you're using are included in the final CSS output.
If you are not using Tailwind, include the compiled CSS file somewhere. You will need to do your own purging of classes if you only want to include the component classes you're using, because we can't determine that when compiling the library.
/* main.css */
@import "@bcc-code/vue-components/style.css";Note that this is a different CSS file that the one for Tailwind.
What's Changed
Move to CSS classes
- Move to CSS classes by @laurensgroeneveld in #55
- convert the BccPin component to use css classes by @jasverix in #58
- Rewrites the BccToggle component as a CSS library by @mvelzel in #60
- convert the BccAvatar component to use css classes by @jasverix in #59
- include css output in the build by @jasverix in #65
- Add raw CSS files for Tailwind to build output by @laurensgroeneveld in #69
Component Updates
- Added label for bcc input field by @timclausen in #62
- possible to disable animation on the capacity indicator by @jasverix in #57
- Fixes the secondary button background color by @mvelzel in #64
- badge has xs as default size in CSS by @jasverix in #67
- Fixes button primary and secondary ring colors by @mvelzel in #68
- Added optional option for input fields by @timclausen in #66
Other Changes
- Upgrade Storybook to v7 by @jasverix in #61
- make javascript variant of create-component so it is OS independent by @jasverix in #63
New Contributors
- @jasverix made their first contribution in #58
- @mvelzel made their first contribution in #60
- @timclausen made their first contribution in #62
Full Changelog: v0.9.1...v0.10.0
