Cedar 12
Focusing on preparing for Vue 3| package name | version |
|---|---|
@rei/cedar | ^12.x.x |
@rei/cdr-tokens | ^10.x.x |
@rei/cdr-component-variables | ^8.x.x |
If your project depends on any external modules that also use Cedar, make sure to update those to the same version as your project.
v12.1.0
Performance improvements
Font swapping
We've added the font-display: swap property to our REI brand font definitions. This property allows the browser to substitute the fallback font until the brand fonts are successfully loaded, which serves to prevent a flash of invisible text on slower connections.
Accessibility fixes
CdrRating
CdrRating is updated to improve the contrast ratio between the filled and non-filled state of the rating stars. The component now meets the WCAG 2.1 success criterion for non-text contrast.
New tokens
Switch
We've added new tokens to support the upcoming CdrSwitch component, which will be released with Cedar's Vue 3 version.
v12.0.0
Bug Fixes
CdrPopover
- Addressed an issue where the component would emit its
openevent twice in certain circumstances. - Addressed an accessibility issue where focus wasn’t being correctly assigned when multiple popovers were in use.
Deprecations
Vue 2
To prepare for our Vue 3 migration, we're deprecating the Vue 2 component library. We'll provide basic maintenance and bug fixes to support this final planned Vue 2 release for an additional 12 months. Once our Vue 3 library is released, we'll republish our Vue 2 library as @rei/cedar-vue-2. We recognize this is a major migration and will flex our plans as needed to provide the best support to our teams as we make the move to Vue 3.
Breaking Changes
Scoped Slots
Scoped slots are removed from CdrBreadcrumb and CdrPagination. See the CdrBreadcrumb or CdrPagination pages for examples of how to override their default navigation behavior.
CdrBanner Component Variable
The CdrBanner component variable is removed. Teams who are unable to utilize the Vue component should plan to use the messaging tokens to create their banners.
Preparing for Vue 3
The following are carried over from the Cedar 9 release. We will continue to note Vue 3 related deprecations so teams can adequately prepare for the upcoming migration.
Vue 3: Update Slot Syntax
Vue 2.6 introduced a new v-slot syntax for passing slot content into components. A pound sign # can be used as a shorthand for v-slot:, much like a colon : can be used as a shorthand for v-bind. The old syntax is removed from Vue 3 and we recommend updating your codebase to make use of the new slot syntax to simplify the upgrade process in the future. Note that the new v-slot or # syntax can only be used on a template tag, however those additional template tags will not be included in the rendered HTML.