Cedar 13

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

v13.5.3

Simplifies the markup for CdrAccordion to match the latest accessibility guidelines from w3

v13.5.2

Resolved an issue in CdrBreadcrumb where the MouseEvent wasn't correctly being passed to the @navigate handler.

v13.5.1

Cedar now forces vite to bundle lodash-es functions into the UMD asset to ensure support for legacy SSR applications

v13.5.0

Cedar now dynamically builds component documentation and distributes it as part of the library. Component API's can now document themselves.

v13.4.3

Resolved an issue in CdrPopup where the contentClass prop was not being correctly applied

v13.4.2

Restores the UMD build asset for users supporting legacy applications at REI

v13.4.1

Resolved an bug with checkboxes using the indeterminate state

v13.4.0

Allows the Cedar library to be tree-shaken in consuming applications. Tree shaking was failing in vite apps due to a bug in vue-core.

v13.3.2

Updated our end-to-end accessibility testing configuration to use the latest rules from Axe

v13.3.1

Resolved a visual bug with CdrModal's close button

v13.3.0

Adds type="date" to CdrInput to support browser-native date-picking functionality. See the CdrInput article for more information.

v13.2.2

Cleaned up some vestigial hover/focus styles in CdrModal

v13.2.1

Resolved an issue where CdrTabs was not emitting the tab-change event.

v13.2.0 💀

CdrSkeleton

CdrSkeleton is now available. Skeletons are used to visually communicate when content is in the process of loading. See the CdrSkeleton article for more information.

Polyfill removals

Polyfills for older, unsupported browsers have been removed. This has reduced the package size by about 50 Kb and should result in better application performance.

Users at REI should also update to the latest version of FEBS for optimal performance.

Accessibility improvements

CdrChip's design is tweaked to improve visual contrast between selected and unselected states.

Bug fixes

The Cedar component library is now less vocal about transitions and when they end.

v13.1.0

New icons are added to the library.

v13.0.2

CdrModal is updated to address an issue with the display of the close button when hiding the modal's title.

v13.0.1

CdrAccordion is updated to address an issue where the caret icon wasn't animating on accordion open/close.

v13.0.0

Vue 3 component library

We've migrated to Vue 3! While the components and their API's remain largely the same, we have adopted Vue 3's Composition API and rewritten the entire library from the ground-up as Vue SFC's (Single File Components). We have also adopted Vite, allowing us to significantly reduce the complexity of our build system.

Going forward, our Vue 3 library will be the only one we support with features and functionality. We will continue to support our Vue 2 library with basic maintenance and bug fixes until Spring 2023.

Breaking changes

While the API for most components remains unchanged, some changes were needed to accommodate breaking changes between Vue 2 and Vue 3.

Vue 3 Attribute handling

The $attrs object now contains all attributes passed to a component, including class and style.

• By default, attributes applied to a component are "passed through" to the parent element. For certain Cedar components, we make use of Vue's inheritAttrs property to bind attributes to a deeper element in the component. This allows us to pass attributes like loading="lazy" to the <img> element within CdrImg, even when it's being used with a wrapping ratio container
• We have identified two components where this deeper class binding was causing style issues. Rather than hack around Vue 3's new behavior, we have introduced new props that allow a custom class to be bound to the parent element
• CdrImg: A new containerClass prop has been added to allow passing a custom class to the cdr-img-ratio container div
• CdrInput: A new labelClass prop has been added to allow passing a custom class to the cdr-label-standalone container div

Please reach out to us if you identify other situations where attribute changes are causing issues.

Vue migration guide: $attrs

Vue 3 updated slot syntax

The syntax for using a named slot on a template element has changed. Slots will not function correctly in Vue 3 using the old syntax.

Old

<template slot="title">...</template>

New

<template #title>...</template>

Vue 3 v-html directive

Vue 3 has limited the use of the v-html directive and it no longer functions on custom components (e.g. CdrText). If your application relied on this pattern, our current recommendation is to replace any custom components with standard HTML elements and style them using tokens and/or component variables.

Old

<cdr-text 
  v-html="htmlContent"
  class="my-custom-class" 
/>

<style lang="scss">
  @import '@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .my-custom-class {
     @cdr-text-subheading-sans-500;
  }
</style>

New

<p 
  v-html="htmlContent"
  class="my-custom-class" 
/>

<style lang="scss">
  @import '@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .my-custom-class {
     @cdr-text-subheading-sans-500;
  }
</style>

Vue 3 v-model

Multiple Cedar components utilize the Vue's v-model directive. Depending on your implementation, you may have to refactor your applications for the updates to v-model in Vue 3.

Cedar components using v-model:

• CdrCheckbox
• CdrInput
• CdrPagination
• CdrRadio
• CdrSelect

Vue migration guide: v-model

Cedar reset

The reset.css asset is now consumed at the root level of the /dist/

Old

import '@rei/cedar/dist/style/reset.css';

New

import '@rei/cedar/dist/reset.css';

Non-breaking changes

• CdrModal: refactored to have a flatter HTML structure
  • To a consumer, nothing should change but the underlying structure is cleaner, easier to maintain, and adds fewer nodes to the DOM

New features

• CdrSwitch: We have introduced a new UI switch control intended for switching between binary states (e.g. on/off, true/false, etc.)
• CdrToggleButton: We have introduced a new UI toggle control intended for toggling between distinct options (e.g. metric/imperial)

Note: These components are only available in our Vue 3 library

Accessibility updates

• CdrFormGroup: Now applies an aria-describedby when in an error state
• CdrInput: Now correctly applies a unique ID to an error state (related to above)
• CdrSelect: No longer announces an error twice to a screen reader
• CdrRating: Improved the contrast ratio between the filled and non-filled state of the rating stars
• CdrChipGroup: Updated implementation guidance to apply role="radiogroup" for the CdrChipGroup when using Chip in a "single select" configuration
• CdrChip: Improved contrast ratio for SVG icons added to the icon slots

Bug fixes

• CdrBanner: Updated to address a small visual glitch at certain browser zoom levels
• CdrToast: Updated to address a small visual glitch at certain browser zoom levels

Tokens v11.0.0

The JavaScript variable tokens are now exported as an ECMA module to work better with Vite applications.