Cedar 14

If your project depends on any external modules that also use Cedar, make sure to update those to the same version as your project.

v14.1.1

Resolved an issue in CdrModal where attributes were being duplicated on the modal element and the parent container. This was mistakenly introduced in v13.0.0 so there's a chance consuming teams have been mistakenly relying on this incorrect behavior. Please reach out if you need help adjusting your applications.

v14.1.0

Adds support for type="datetime-local" to CdrInput. Use this type to allow a user to specify a time and date in a single input. See the MDN web docs to learn more.

v14.0.3

Cedar's accessibility pipeline tests are now using WCAG 2.2 (AA). These tests are isolated to Cedar's pipeline and have no effect on consuming applications. Doesn't it feel good to use Cedar and know you're delivering an accessible experience to your customers?

v14.0.2

• Improved Cedar's typescript support and configuration
• Implementation guidelines have been added for using CdrBreadcrumb, CdrSelect, and CdrPagination in TypeScript applications

v14.0.1

Resolved a noisy logging issue in CdrImg.

v14.0.0

Palettes

A powerful new feature is here—color palettes! This functionality unlocks greater flexibility and control over the expression of color to meet the needs of more teams.

No more building custom components simply to change colors. With palettes, teams can define the colors for their application (think sales, membership, and more) and apply it to a page or section level. Any Cedar components within that palette's scope will be "listening" for that palette definition and re-color themselves to match.

And this is just the beginning. Palettes lay the foundation for more customization as we expand the functionality into themes and modes. Looking ahead, our roadmap includes Cedar-supported palettes and Figma integration.

Important: Palettes are currently an alpha release

• An alpha release means we’re still exploring how palettes work in specific contexts at REI—and that’s where you come in
• If you are interested in defining a palette for your application, the Cedar team wants to work with you
• We’ll help define your palette, with the possibility of contributing it back to Cedar
• Teams are responsible for implementing palettes with the functionality we’ve enabled

Technical goodness

Palettes are enabled via refactor of Tokens and Cedar components to use CSS Custom Properties for color definition.

Here's an example from CdrText to see what this looks like at the component level:

.cdr-text {
   color: var(--cdr-text-color, var(--cdr-color-text-primary, #{$cdr-color-text-primary}));
}

This may look a little complicated but we can break it apart and talk about what each piece is doing.

First, it's important to understand that the CSS custom property function var() accepts two values, a name, and a declaration (or fallback) value. That fallback value can be a var() unto itself. This is called a compound fallback.

With that information, we can break things apart and expose the magic.

--cdr-text-color: This is our custom property name that is exposed to a palette. A team can pass this variable with a value to recolor CdrText components within their page.

--cdr-color-text-primary: If name is undefined, the browser will first check if this property is defined. This value maps directly to the Cedar token value and comes from a new a tokens export. By including this, we allow a consumer to globally change the definition of cdr-color-text-primary (and other tokens) in their palette.

#{$cdr-color-text-primary}: If both the name and our initial fallback is undefined the component falls back to the compiled scss variable for the token. This preserves the ability for Cedar components to exist independently of tokens in your consuming apps (i.e. it avoids creating a contract between tokens and components where tokens is required for components to function).

Demo! Demo! Demo!

Bringing it all together, here's a simplified example of using palettes to create a promotional section on your page. Note how we're using a promotional modifier class to change the value of cdr-color-background-primary and cdr-text-color within that section.

<template>
  <section class="section">
      <CdrText tag="h3">
        Default section
      </CdrText>
      <CdrText>
        We believe a life outdoors is a life well-lived.
      </CdrText>
  </section>
  <section class="section section--promotional">
    <CdrText tag="h3">
      Promotional section
    </CdrText>
    <CdrText>
      New savings on your favorite brands
    </CdrText>
  </section>
</template>

<style lang="scss">
@import '@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss';
@import '@rei/cdr-tokens/dist/rei-dot-com/css/cdr-tokens.css';

.section {
  background-color: var(--cdr-color-background-primary);
  &--promotional {
    padding: $cdr-space-two-x;
    --cdr-color-background-primary: #{$cdr-color-background-message-sale};
    --cdr-text-color: #{$cdr-color-text-inverse};
  }
}
</style>

Interested in using palettes?

We want to hear from you! Please join us for office hours or reach out on #cedar-user-support

TypeScript is here

We've rewritten the entire component library in TypeScript. Cedar components and tokens are now exporting type definitions as part of the package. This will help enable teams who are interested in using TypeScript in their projects, not to mention the DX goodness of auto-completion when used with VS Code/Volar.

Aside from the DX and enablement side, TypeScript gives us more confidence in the code we're delivering to you. Type-safe code is more reliable, harder to break, and easier to maintain. Not to mention the typeScript compiler caught a number of mishandled aria-attributes, ain't that the cherry on top of the sasquatch?

Tokens

Tokens are updated to support multiple themes as well as palette capabilities

Themes (BREAKING)

Tokens now supports multiple themes, we've proven this out in this very site using a docsite theme. This allows us to preserve the semantic meaning of the token while updating its underlying value. For example, cdr-color-background-primary has a different value in the docsite theme, but the intended use is the same (i.e. the primary background color).

The original tokens are now labelled as the rei-dot-com theme.

To continue using tokens as you were, you will need to update your import paths to account for this additional theme depth.

Old

<style lang="scss">
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
</style>

New

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

New CSS custom properties export

Tokens is now exporting a CSS custom properties definition file. The file sets all token values as CSS properties at the document :root

Type definitions

Cedar tokens now exports type definitions for the JS tokens format

Component variables

CdrSkeleton

• We've added CdrSkeleton and CdrSkeletonBone component variables to the package
• Component variables also support palettes using the same properties as their respective component

Accessibility

• CdrAccordion no longer toggles aria-pressed when an accordion is opened as it was unnecessary
• CdrFormGroup no longer adds aria-errormessage and aria-describedby when aria-invalid="false" is present. To note: this wasn't breaking the experience, but added unnecessary noise

Build

lodash-es has been removed as a dependency, which means smaller bundles for you and a simplified build and less reliance on 3rd party modules for us 🎉.

The cedar-compiled.css and cedar-full.css assets have been deprecated and will be removed in a future release. Teams who rely on this asset can future proof your work by using a combination of reset.css and style.css to include all of the compiled styles.

Reminder on Vue 2

We officially dropped support for our Vue 2 component library at the end of Spring 2023. Teams should update to Vue 3 for continued Cedar support.