Deprecated items

Text Mixins

Color Tokens

Media Query Mixins

CdrCta Tokens

Vue2 Cedar component library

Cedar is moving to Vue3! After deprecation removal, Cedar Vue2 assets are available via the "REI-Cedar-Vue2" repo and NPM package.

CdrCta

The functionality of CdrCta is merged into CdrButton.

CdrDataTable

CdrDataTable is replaced by CdrTable.

CdrCheckbox

• The compact modifier is removed. Use size="small" instead

CdrRadio

• The compact modifier is removed. Use size="small" instead

CdrInput

• The helper-text slot in CdrInput is replaced with the helper-text-bottom slot

CdrTabs

• The tabChange event is replaced with tab-change for consistency

CdrAccordion

• The label prop for CdrAccordion is replaced with the label slot

CdrBreadcrumb

• The link scoped slot for CdrBreadcrumb is removed. To add custom link behavior use the navigate event

CdrPagination

• The link, prevLink and nextLink scoped slots for CdrPagination are removed. To add custom link behavior use the navigate eventß

CdrRow and CdrCol

The flexbox based CdrRow and CdrCol are replaced with the CSS grid based CdrGrid

CdrIcon

CdrBanner

• The CdrBanner component variable is removed. Messaging tokens are available to replicate CdrBanner.

NOTE: The Cedar utility classes and CdrText modifier are removed as of Cedar version 9.0.0. These mappings exist purely to guide consumers who may be updating from earlier versions of Cedar. Use Cedar tokens or plain CSS instead to apply these same styles.

CdrText Modifiers

Space

Alignment

Display

The utility visibility and accessibility classes are deprecated and updated to bring them inline with the latest token names. Please see the map below to review the new names.

Color

Migrating CSS utilities to tokens/mixins

The Cedar CSS utility classes are removed due to their negative impact on site performance, code quality/maintainability, and the architectural risk of using global un-scoped shared CSS classes. The examples below outline how to migrate instances of the various utility classes to instead use plain CSS and tokens or mixins from @rei/cdr-tokens.

Align utils

Replace alignment utilities with the equivalent plain CSS.

<div class="cdr-align-text-center">
  Deprecated utility
</div>

<template>
  <div class="your-custom-alignment-class">
    Using plain CSS
  </div>
</template>
<style lang="scss">
  .your-custom-alignment-class {
    text-align: center;
  }
</style>

Color utils

Replace color utilities with the equivalent value from @rei/cdr-tokens targeting either background-color, color or fill as appropriate.

<div class="cdr-color-background-primary">
  Deprecated background color utility
</div>

<div class="cdr-color-text-primary">
  Deprecated text color utility
</div>

<template>
  <div class="your-custom-background-color-class">
    Using plain CSS/tokens for background color
  </div>

  <div class="your-custom-text-color-class">
    Using plain CSS/tokens for text color
  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens';

  .your-custom-background-color-class {
    background-color: $cdr-color-background-primary;
  }

  .your-custom-text-color-class {
    color: $cdr-color-text-primary;
  }
</style>

Container utils

Replace the cdr-container and cdr-container-fluid utility classes with either the CdrContainer component or the equivalent mixin from @rei/cdr-tokens. See the Responsive article for more information on general container usage.

<div class="cdr-container">
  Deprecated utility
</div>

<template>
  <div>
    <cdr-container>
      Using the CdrContainer component
    </cdr-container>

    <div class="your-custom-container-class">
      Using plain CSS/tokens
    </div>

  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens';

  .your-custom-container-class {
    @include cdr-container;
  }
</style>

Display utils

Replace display utilities with the equivalent plain CSS.

<div class="cdr-display-none">
  Deprecated utility
</div>

<template>
  <div class="your-custom-display-class">
    Using plain CSS
  </div>
</template>
<style lang="scss">
  .your-custom-display-class {
    display: none;
  }
</style>

Space utils

Space utility classes were a combination of the targeted property and a Cedar spacing token.

<div class="cdr-space-inset-half-x">
  Deprecated utility
</div>

<template>
  <div class="your-custom-space-class">
    Using plain CSS/tokens
  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens';

  .your-custom-space-class {
    padding: $cdr-space-half-x;
  }
</style>

Text utils

Note that the text utility classes were available both as CSS utility classes and via the cdr-text modifier prop. The migration path is the same for both patterns.

<p class="cdr-text--utility-sans-strong-300">
  Deprecated utility
</p>

<cdr-text modifier="utility-sans-strong-300" tag="p">
  Deprecated modifier
</cdr-text>

<template>
  <p class="your-custom-type-class">
    Using plain CSS/tokens
  </p>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens';

  .your-custom-type-class {
    @include cdr-text-utility-sans-strong-300;
  }
</style>

Responsive utilities

The align, display, space and text utility classes supported breakpoint modifiers as a suffix which would only activate the utility class at the given breakpoint. Those instances should be migrated as described above but additionally use a breakpoint mixin from @rei/cdr-tokens.

<div class="cdr-mb-space-quarter-x\@md">
  Deprecated responsive utility
</div>

<template>
  <div class="your-custom-responsive-space-class">
    Using plain CSS/tokens
  </div>
</template>
<style lang="scss">
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens';

  @include cdr-md-mq-only {
    .your-custom-responsive-space-class {
      margin-bottom: $cdr-space-quarter-x;
    }
  }

</style>