If you are not already on
@rei/cedar >= 2.x.x, you will first need to upgrade your project to the single-package version of Cedar.
@rei/febs^7.1.0 for it's prod and dev build systems
cdr-color-text-link-visitedto the correct value. CdrLink does not currently have a
The UI Toolkit has migrated to Figma! Designers can find updated information in the getting started article. Additionally, Figma replaces Abstract in facilitating the design to development hand-off process.
Cedar components and design tokens have been updated to make use of the new brand palette. Any hardcoded color values in your application may need to be updated in order to stay in sync with the new brand palette. We have additionally removed the concept of "lightmode" and "darkmode" themes from Cedar to align with the brand palette updates. See the color token deprecation list for guidance on re-mapping existing color tokens.
We have added a component for tables. This component is more generic than the existing data table (which has been moved to fed components). See the CdrTable docs for more details and examples. Note that the CdrDataTable component has been deprecated.
CdrCard is a simple wrapper component that allows for composing various card layouts, and now officially supported in the system. See the CdrCard docs for more details and usage guidelines.
We have added a new variant to CdrButton that allows you to render an icon-only button that has a background and border in order to make icon-only buttons more visible. See the CdrButton docs for more details.
We have added this wrapper component to better support the accessibility of accordion groups. Simply wrap your existing groups of accordions in this component and keyboard navigation will be taken care of. See the CdrAccordion docs for more details and examples.
We have updated CdrImg to accept event handlers. This is intended to support
onError event handlers. See the CdrImg docs for more details and examples.
CdrModal now shifts to a fullscreen view at the
xs breakpoint, and will otherwise render at
640px wide. Note that the
size property has been removed from CdrModal in order to accomodate this update.
CdrTabs now accepts a property named
active-tab which allows for changing which tab content is "active" on the initial page load. See the CdrTabs docs for more information.
Added missing medium responsive size modifier. Now all options can be used at all breakpoints for responsive sizing. The default size is still medium.
CdrAccordion has been updated to better handle content reflows which may occur when a browser window is resized or when content is added or removed to an opened accordion.
CdrTabs has been updated so that the active tab underline no longer causes window size issues on mobile when it is scrolled offscreen.
aria-expanded="false"and updated screen reader text ensuring the users understand the number of items hidden in this control.
pagination navigationas navigation would be read out twice.
|Use Case||Screen Reader Text|
|linked rating stars with average and count: has reviews||View the (x) reviews with an average rating of #.## out of 5 stars|
|linked rating stars with count: has reviews||"View the (x) reviews with an average rating of #.## out of 5 stars"|
|linked rating stars with count: no reviews||"No reviews yet; be the first!"|
|rating stars with average and count: has reviews||"(x) reviews with an average rating of #.## out of 5 stars"|
|rating stars with average and count: no reviews||"0 reviews"|
|rating stars with count: has reviews||"(x) reviews with an average rating of #.## out of 5 stars"|
|rating stars with count: no reviews||"0 reviews"|
Internet Explorer 11 has been removed from the REI browser support matrix. Cedar has been updated to no longer include IE11 related polyfills.
The space (
cdr-space-...) and breakpoint (
We have updated our component variables (opens new window) package to export only the mixins for component styles and have excluded the individual variables used within those mixins. Component variables are intended for applying the Cedar component CSS styles in projects which cannot use the Vue components directly, which is satisfied by exporting the mixins. Because the individual styles applied by a mixin might change from release to release it was very difficult to manage and document updates to the individual variables in a way that allowed consumers to stay up to date with Cedar. If you were using individual variables from the component variables package, we recommend you either switch to using the full mixin, replace that variable with the appropriate Cedar token if one exists, or simply hardcoding the value.
CdrAccordion components must now be wrapped inside an instance of CdrAccordionGroup to ensure that accordions meet accessibility requirements. See the CdrAccordion docs for more details and examples.
CdrAccordion has a new required prop:
level. This prop is required in order to meet WCAG accessibility standards and should be set to the appropriate heading level for the context of your page. See the CdrAccordion docs for more details and examples.
CdrLink previously supported theming by setting an
on-light CSS class on a container element. Due to the new color scale this feature was not possible to support in a consistent way and has been removed.
CdrButton previously accepted a prop named
on-dark which could be used in conjunction with the
icon-only prop to render a button with a background. This was intended to be used on dark backgrounds to make the icon button more visible and accessible. Due to the new color scale this feature was not possible to continue supporting as is, and has been replaced with a new with-background property.
In order to support the CdrModal fullscreen functionality, we have removed its
size prop. CdrModal will now always display at
640px wide except when viewed in
xs screen sizes.
In order to make the CdrTabs component meet accessibility requirements, you must now explicitly set both an
aria-labelledby property on CdrTabPanel elements. These properties must be unique identifiers, but other than that their content is arbitrary, for example:
<cdr-tab-panel id="foo-tab-panel" aria-labelledby="foo-tab" name="foo">. This allows us to wire up
aria- tags to correctly link the content of each tab to the header element that activates it. See the CdrTabs docs for more information and examples of usage.
The CdrDataTable component has been deprecated in favor of the new CdrTable component. CdrDataTable is a complex component which was difficult for developers to customize or enhance, whereas the new CdrTable component is a simple wrapper which applies styling to native HTML
<table> markup. The existing CdrDataTable component has been ported to the FEDCOMP repository and is now available in the REI private NPM registry as @rei/data-table (opens new window). Note that
@rei/data-table replaces the
modifier property with individual
borderless boolean properties. Consumers of CdrDataTable should either replace their usage of that component with CdrTable, or install and use
Legacy darkmode token variants have been deprecated. To update pages currently using darkmode tokens, consult your designer for a recommendation.
Note that Cedar design tokens should always be applied semantically, when re-mapping tokens take care to ensure that the token name matches it's purpose i.e, don't use a
border-input token for anything besides the border of an input element.
|Deprecated Token||Equivalent Token|
|Deprecated utility||Equivalent utility|
|Deprecated token/mixin||Equivalent token/mixin|
|Deprecated class name||Equivalent class name|
|Deprecated class name||Equivalent class name|
In accordance with our deprecation policy, features that were deprecated in the Fall 2019 release have been removed from Cedar.
spruce-displayshould be updated according to the typography mappings from the Winter 2020 release rather than the ones in the Fall 2019 release notes.