See what's changed on GitHub
We've added the
font-display: swap property to our REI brand font defintions. This property allows the browser to subsitute the fallback font until the brand fonts are successfully loaded, which serves to prevent a flash of invisible text on slower connections.
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.
We've added new tokens to support the upcoming CdrSwitch component, which will be released with Cedar's Vue 3 version.
openevent twice in certain circumstances.
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.
The CdrBanner component variable has been removed. Teams who are unable to utilize the Vue component should plan to use the messaging tokens to create their banners.
The following have been carried over from the Spring 2021 release. We will continue to note Vue 3 related deprecations so teams can adequately prepare for the upcoming migration.
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
# syntax can only be used on a
template tag, however those additional
template tags will not be included in the rendered HTML.
We've revised and reorganized our "Getting Started" and "About" sections to provide better overall support.
The new name better reflects the section's purpose, which is to provide ongoing support as well as system onboarding.
Our resource guide for designers includes a Figma installation guide, tutorials, and extra resources.
Our new resource guide for developers is aimed at new REI developers and veteran devs alike. This guide features links to the most frequently needed Cedar resources for developers, Vue resources, and helpful definitions of Cedar’s most frequently used parts. Installation info can now be found on the new "Installing Cedar" page.
If you have a question about Cedar, this is a handy place to look for answers.
To make it easier for people to find how to contact us, we created a new “Get in Touch” page. Content includes info on the best channels to reach the Cedar team, and how to use them.
This page in the "About" section is now called "Cedar's Purpose & Parts." We've streamlined the content to focus on what Cedar is and what it's for. Content includes an intro to our purpose and philosophy, an overview of Cedar's parts, and ways to further explore Cedar and the doc site.