Summer 2020 Release

# Update Steps

  • Update to the latest version of the Cedar packages:
package name version
@rei/cedar ^6.x.x
@rei/cdr-tokens ^6.x.x
@rei/cdr-component-variables ^4.x.x
@rei/cedar-icons ^2.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.

# 6.1.1

  • Adds small and medium options for the gutter property of CdrRow. Note that CdrRow has built in responsive gutter behavior, and that the CdrGrid responsive properties target breakpoints and above rather than just specific breakpoints. For example, the default CdrGrid gutter behavior is <cdr-row gutter="small small@sm medium@md medium@lg">.

# 6.1.0

  • Adds new IconMap component.
  • Removes deprecated media query mixin from cdr-container mixin.
  • Includes correct cdr-container mixins in LESS output.
  • Removes min-height value on table cells.
  • Improves underline logic in CdrTabs, simplifies tab header markup.
  • Removes id attribute from CdrModal close button.

# 6.0.0

# New Features

# Mixin and Token Usage

To align with performance goals for the co-op, we have updated our guidance around the Cedar utility classes to recommend that customer facing projects instead use Cedar tokens to apply styling.

Cedar utility class files often contain a large number of options, and only a small number of them are used in most projects. By using Cedar tokens instead of utility classes, you can ensure that your project is only loading the styles you are directly using. Special attention should be paid to the space (@rei/cedar/dist/style/space.css) and text (@rei/cedar/dist/style/text.css or @rei/cedar/dist/style/cdr-text.css) utility class files as they are especially large.

  • The CdrText page has been updated to show examples of using mixins instead of the modifier/utilities.
  • CdrText related reset logic has been moved out of the CdrText CSS file and into the Cedar CSS reset file. The CdrText CSS file only needs to be loaded if you are using the modifier property to style text.
  • We have deprecated the space property in the Cedar components.
  • We have added mixins for sr-only and cdr-container so that they can be used in place of the equivalent utility classes.

# CdrAlert Component

CdrAlert is a simple wrapper component that allows for composing various alert layouts, and now officially supported in the system. See the CdrAlert docs for more details and usage guidelines.

# CdrFormGroup Component

CdrFormGroup is a simple wrapper component for grouping together form elements with a common label. See the CdrFormGroup docs for more details and usage guidelines.

# CdrButton Icon Left and Right Slots

CdrButton has updated with 2 additional slots, icon-left and icon-right, for rendering icons to the left or right of the button text. Using these slots ensures that the icon is properly spaced within the button and that its size adjusts with the button size. The original icon slot can still be used for rendering icon-only buttons. See the CdrButton docs for more details.

CdrButton has been updated to add new modifier: link. This is intended to visually style a CdrButton like a link, but with the same size and full-width options of a normal CdrButton. This allows for layouts which use links in the place of or alongside CdrButtons, while also providing an option for links with the bigger click target of a button. CdrLink should still be used for rendering a link inline with other text. See the CdrButton docs for more details.

# CdrRating Rounding Logic

CdrRating has been updated to round the displayed rating to the nearest 1/10th rather than the nearest 1/4. Whole number values now display an empty decimal place. For example, an average rating of "3.71" now renders as "3.7" rather than "3.75", while a rating of "3" now renders as "3.0" rather than "3". Visually the star icons still render in 1/4 increments as they did previously.

# Media Query Mixins For Breakpoint And Below

We have updated our media queries to add mixins that match below a given breakpoint. We have also renamed some of our existing media query mixins to follow this naming convention

Mixin Name Target
cdr-sm-mq-down Below $cdr-breakpoint-sm
cdr-md-mq-down Below $cdr-breakpoint-md
cdr-lg-mq-down Below $cdr-breakpoint-lg
cdr-xs-mq-up $cdr-breakpoint-xs and Above
cdr-sm-mq-up $cdr-breakpoint-sm and Above
cdr-md-mq-up $cdr-breakpoint-md and Above
cdr-lg-mq-up $cdr-breakpoint-lg and Above

# Mixins for sr-only and cdr-container

Cedar tokens now includes mixins for the screen-reader only and container utility classes. This gives consumers the option of skipping loading the utility class files and instead just inlining the CSS that they need. The new mixins are named cdr-display-sr-only, cdr-display-sr-focusable, cdr-container, and cdr-container-fluid.

# Placeholder Selectors for SCSS Mixins

The SCSS distribution of Cedar tokens now includes placeholder selectors. If you are using the same mixin multiple times then switching to placeholder selectors will allow SCSS to include that style only once. The placeholder selectors have the same names as their mixin equivalents, but are invoked by using @extend %mixin-name rather than @include mixin-name:

.mixin-example {
  @include cdr-display-sr-only;
}

.placeholder-example {
  @extend %cdr-display-sr-only;
}
1
2
3
4
5
6
7

# CdrTabs Auto Height

CdrTabs previously required a static height value to be set, with overflowing content rendered with a scrollbar. CdrTabs now accepts height="auto" which allows for rendering tabs with variable height based on the size of it's content. See the CdrTabs docs for more details.

# CdrTabs Background Color

In order to support CdrTabs that are rendered on non-primary backgrounds, we have added a background-color property that can be used to set the gradients inside CdrTabs to match it's background.

# Deprecations

# CdrCta Deprecated and Merged with CdrButton

The CdrCta component has been deprecated and its functionality has been merged with CdrButton. The sale, dark, elevated, and right-aligned-icon styles from CdrCta have all been added as options in CdrButton. This was intended to provide more flexibility in constructing calls to action, while also adding additional styling options for rendering CdrButtons.

See the CdrButton with link tag and CdrButton alternative styles for more information.

In order to update existing instances of CdrCta to instead use CdrButton:

  • Pass the icon-caret-left CdrIcon into the icon-right slot. Note that this can be replaced with any icon, or the icon can be omitted completely.
  • Update the ctaStyle property as needed and pass it into the modifier prop of CdrButton
CdrCta ctaStyle CdrButton modifier
brand primary
light secondary
sale sale
dark dark
// "sale" CdrCta migrated to a CdrButton
<cdr-cta cta-style="sale">Call To Action</cdr-cta>
<cdr-button modifier="sale" tag="a" href="rei.com">
  Call To Action <icon-caret-left slot="icon-right"/>
</cdr-button>

// "brand" CdrCta migrated to a CdrButton
<cdr-cta cta-style="brand">Call To Action</cdr-cta>
<cdr-button modifier="primary" tag="a" href="rei.com">
  Call To Action <icon-caret-left slot="icon-right"/>
</cdr-button>
1
2
3
4
5
6
7
8
9
10
11

# CdrCta Tokens

We have deprecated all of the cta tokens and merged them with our button tokens. The CTA tokens will be removed in the winter 2021 release. Mappings between the CTA and button tokens are listed below:

Deprecated Token Equivalent Token
cdr-color-text-cta-dark cdr-color-text-button-dark
cdr-color-text-cta-dark-hover cdr-color-text-button-dark-hover
cdr-color-text-cta-dark-active cdr-color-text-button-dark-active
cdr-color-text-cta-dark-disabled cdr-color-text-button-dark-disabled
cdr-color-background-cta-dark-rest cdr-color-background-button-dark-rest
cdr-color-background-cta-dark-active cdr-color-background-button-dark-active
cdr-color-background-cta-dark-hover cdr-color-background-button-dark-hover
cdr-color-border-cta-dark-rest cdr-color-border-button-dark-rest
cdr-color-border-cta-dark-active cdr-color-border-button-dark-active
cdr-color-border-cta-dark-active-inset cdr-color-border-button-dark-active-inset
cdr-color-border-cta-dark-hover cdr-color-border-button-dark-hover
cdr-color-text-cta-light cdr-color-text-button-secondary
cdr-color-text-cta-light-hover cdr-color-text-button-secondary-hover
cdr-color-text-cta-light-active cdr-color-text-button-secondary-active
cdr-color-text-cta-light-disabled cdr-color-text-button-secondary-disabled
cdr-color-background-cta-light-rest cdr-color-background-button-secondary-rest
cdr-color-background-cta-light-active cdr-color-background-button-secondary-active
cdr-color-background-cta-light-hover cdr-color-background-button-secondary-hover
cdr-color-background-cta-light-disabled cdr-color-background-button-secondary-disabled
cdr-color-border-cta-light-rest cdr-color-border-button-secondary-rest
cdr-color-border-cta-light-active cdr-color-border-button-secondary-active
cdr-color-border-cta-light-active-inset cdr-color-border-button-secondary-active-inset
cdr-color-text-cta-brand cdr-color-text-button-primary
cdr-color-text-cta-brand-hover cdr-color-text-button-primary-hover
cdr-color-text-cta-brand-active cdr-color-text-button-primary-active
cdr-color-text-cta-brand-disabled cdr-color-text-button-primary-disabled
cdr-color-background-cta-brand-rest cdr-color-background-button-primary-rest
cdr-color-background-cta-brand-active cdr-color-background-button-primary-active
cdr-color-background-cta-brand-hover cdr-color-background-button-primary-hover
cdr-color-border-cta-brand-rest cdr-color-border-button-primary-rest
cdr-color-border-cta-brand-active cdr-color-border-button-primary-active
cdr-color-border-cta-brand-active-inset cdr-color-border-button-primary-active-inset
cdr-color-border-cta-brand-hover cdr-color-border-button-primary-hover
cdr-color-text-cta-sale cdr-color-text-button-sale
cdr-color-text-cta-sale-hover cdr-color-text-button-sale-hover
cdr-color-text-cta-sale-active cdr-color-text-button-sale-active
cdr-color-text-cta-sale-disabled cdr-color-text-button-sale-disabled
cdr-color-background-cta-sale-rest cdr-color-background-button-sale-rest
cdr-color-background-cta-sale-active cdr-color-background-button-sale-active
cdr-color-background-cta-sale-hover cdr-color-background-button-sale-hover
cdr-color-border-cta-light-hover cdr-color-border-button-secondary-hover
cdr-color-border-cta-sale-rest cdr-color-border-button-sale-rest
cdr-color-border-cta-sale-active cdr-color-border-button-sale-active
cdr-color-border-cta-sale-active-inset cdr-color-border-button-sale-active-inset
cdr-color-border-cta-sale-hover cdr-color-border-button-sale-hover
cdr-color-background-cta-default-disabled cdr-color-background-button-default-disabled
cdr-color-border-cta-default-disabled cdr-color-border-button-default-disabled

# Space Property Deprecated

Many of the Cedar components accepted a space property which applied a spacing utility class to that component. As part of our efforts to improve performance by de-coupling the utility classes from the components we have deprecated this property in all of our components. This change affects the following components: CdrButton, CdrCheckbox, CdrCta, CdrDataTable, CdrIcon, CdrInput, CdrLink, CdrList, CdrQuote, CdrRadio, CdrRating, CdrSelect, CdrText. Spacing utility classes can still be applied to any of these components by simply passing the utility class in via the class prop instead of space, for example:

<cdr-button space="cdr-mb-space-one-x">Deprecated</cdr-button>
<cdr-button class="cdr-mb-space-one-x">Supported</cdr-button>
1
2

# CdrButton Icon Utility Class No Longer Needed

The functionality of the cdr-button__icon utility class has been built directly into CdrButton. You can safely remove this class from any instances of CdrButton that uses CdrIcon.

# Media Query Mixin Renaming

In order to support adding the breakpoint and below media queries, we have renamed some of the existing media query mixins to follow that naming convention.

Deprecated Mixin New Mixin
cdr-xs-mq cdr-xs-mq-up
cdr-sm-mq cdr-sm-mq-up
cdr-md-mq cdr-md-mq-up
cdr-lg-mq cdr-lg-mq-up

# Bug Fixes

# CdrModal Smooth Scroll

CdrModal now renders its closing animation properly when the scroll-behavior of the page is set to smooth.

# Breaking Changes

# CdrIcon a11y Enhancements

We have improved the accessibility of the CdrIcon components by moving the role="presentation" attribute from the root element onto the path element. The CdrIcon components now add aria-hidden="true" to their root element by default. The meaning of the icon should either be explained by the visible text around it, or by including screenreader-only text using the cdr-display-sr-only utility class or mixin. See the CdrIcon accessibility section for more details.

# CdrModal a11y Fix

We have removed the role="presentation" attribute from CdrModal as it is not needed for accessibility.

# Warning and Error Icons

We have updated our icon library to use circular icons for "error" states and triangular icons for "warning" states.

To align with this we have made the following breaking changes to our icon library:

old asset name new asset name
warning-stroke.svg error-stroke.svg
warning-fill.svg error-fill.svg
warning-tri.svg warning-fill.svg
n/a warning-stroke.svg

We have also updated the Cedar icon components with the following breaking changes:

old component name new component name
IconWarningStroke IconErrorStroke
IconWarningFill IconErrorFill
IconWarningTri IconWarningFill
n/a IconWarningStroke

# CdrTokens JS Naming Format

In version 6.x.x of @rei/cdr-tokens we updated the naming format for the CJS output to be PascalCase so that it matches the formatting of the ESM output. This was done to ensure that CJS and ESM interoperability works properly. Note that loading the CJS output of tokens directly is not recommended as it results in the entire tokens object being imported.

// CJS import
var tokens = require('@rei/cdr-tokens');
var CdrColorTextPrimary = tokens.CdrColorTextPrimary;

// ESM import
import { CdrColorTextPrimary } from '@rei/cdr-tokens';
1
2
3
4
5
6

# Removals

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

# Deprecated Cedar Tokens and Text Utilities Removed

The following mixins and utility classes have been removed. See the linked deprecation mapping for information on updating: