This is Cedar’s legacy site. Information may be outdated.
Go to Cedar's new documentation site for the latest features and support.

  • 11.x.x Release Notes

Fall 2021 Release

# Update Steps

We recommend updating older versions to Cedar 10.x.x before proceeding
We have concurrently released an update to Cedar's babel config to align with FEBS and reduce bundle sizes. This update has been released as standalone major version, please see the release notes for upgrade instructions.
  • Update to the latest version of the Cedar packages:
package name version
@rei/cedar ^11.x.x
@rei/cdr-tokens ^10.x.x
@rei/cdr-component-variables ^7.x.x
  • If your project depends on any shared component packages (i.e, FEDPACK, FEDCOMP, FEDPAGES), you will want to update those packages to the new version of Cedar before updating your micro-site.

# 11.3.2

# 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.

Example

100 reviews with an average rating of 3.3 out of 5 stars

# 11.3.1

See what's changed on GitHub

# New Features

# Icon Update

We've introduced a new experiences icon to our icon library

  • Experiences running

# Fixes

# Mobile tokens

We've updated mobile tokens to ensure parity between Figma and the published package.

# 11.2.0

See what's changed on GitHub

# New Features

# Icon Updates

We have introduced new icons to our icon library

  • Membership
  • Returns
  • Shipping prep
  • Shipping truck

# 11.1.0

# New Features

# TikTok

  • We have introduced a new social brand icon for TikTok to our icon library

# CdrAccordion Content Spacing

  • CdrAccordion has a new content-spacing prop that allows a consuming application to disable spacing (css padding) on the accordion content.
  • See the CdrAccordion docs page for more information.

# 11.0.1

# Bug fixes

  • CdrToast and CdrBanner have been updated to address style discrepancies between the design and code libraries.

# New Features

# CdrBanner Redesign

CdrBanner has been redesigned to support additional configurations and utilize the new messaging color tokens.

See the CdrBanner docs page for more information.

# CdrToast

We have created a new CdrToast component that can be used for transient status notifications.

See the CdrToast docs page for more information.

# Heading Display

We have introduced a new suite of display heading styles for certain campaign applications. These larger and lighter styles can be consumed via token mixins.

# Messaging color update

New messaging color tokens have been added to CdrTokens to support our updates to messaging patterns.

# New Error Icons

We have introduced new error icons to our icon library to create more clear delineation between warning and error icons.

# CdrButton Type Size

We have aligned the type size of CdrButton to be same at the medium (default) and large button sizes.


# Patterns

Patterns are intended serve as guidance for teams solving similar problems over and over, and to document best practices for interaction design patterns to guide users through common tasks.

The first batch of Cedar Patterns focuses on the themes of Forms and Messaging, bringing forward the research and reasoning behind many new components delivered in the past year, and helping teams determine what available components are appropriate for each experience.

# Alerts

Alerts inform users that something important has happened on the page.

See the Alerts docs page for more information.

# Form Inputs

Use form input patterns to capture user data in a consistent, optimized manner.

See the Form Input Types docs page for more information.

# Form Validation

Form validation ensures the data a user has entered into a form matches the requirements of our systems.

See the Form validation docs page for more information.

# Validation Notifications

Validation notifications provide important feedback to users during and after form submission.

See the Validation notifications docs page for more information.

# Update and Loading Notifications

Update and loading notifications inform users of the current working state of their request and help reduce uncertainty.

See the Update and loading notifications docs page for more information.

# Status Notifications

Status Notifications inform users that something on the page has changed.

See the Status notifications docs page for more information.


# Bug Fixes

# CdrModal

CdrModal has been updated to address an issue when using the modal slot that would result in errors being thrown when opened.


# Deprecations

# CdrBanner Component Variable

With the redesign of CdrBanner, the component variable has been deprecated and will be removed in a future release. Teams who are unable to utilize the Vue component should plan to make use of the messaging tokens to create their banners.

# Preparing for Vue 3

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.

# CdrBreadcrumb and CdrPagination Scoped Slots

CdrBreadcrumb and CdrPagination both allow for passing in a scoped slot for rendering their link elements which was intended to support things like vue-router which must override the default link navigation behavior. This feature increased the complexity of both components, making it difficult to maintain and improve the components over time. It requires that consumers bind multiple attributes to the slot element to ensure a consistent UI. Most importantly, this functionality is better served through an event handler which would allow the Cedar components to remain simple and consistent but give consumers the flexibility to customize their behavior.

We are planning to remove support for scoped slots in both components as part of our future Vue 3 updates. See the CdrBreadcrumb or CdrPagination pages for examples of how to override their default navigation behavior. Please reach out to the Cedar team if you have any questions or concerns about this change.

# 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.

<!-- Named slots -->
<span slot="slotname">old named slot syntax</span>
<template #slotname>
  <span>new named slot syntax<span>
</template>

<!-- Scoped slots -->
<template slot="slotname" slot-scope="scopeObject">old scoped slot syntax {{ scopeObject.name }}</template>
<template #slotname="scopeObject">new scoped slot syntax {{ scopeObject.name }}</template>
1
2
3
4
5
6
7
8
9

The examples on this doc site have been updated to make use of the new syntax, see the Vue documentation (opens new window) for more information.


# Breaking Changes

# Removals

In accordance with our deprecation policy, features that were deprecated in the Winter 2021 release and Spring 2021 release have been removed from Cedar.

# CdrRow and CdrCol

CdrRow and CdrCol have been removed from Cedar in favor of the more performant CdrGrid. If teams are still needing to incrementally migrate their usage, CdrRow and CdrCol can be consumed from @rei/flex-grid (opens new window).