Summer 2022 Release | Vue 3

# Update steps

For users at REI, our internal build system has also undergone significant changes
Teams should expect to refactor to the FEBS 3 pattern concurrently with this update

package name version
@rei/cedar ^13.x.x
@rei/cdr-tokens ^11.x.x
@rei/cdr-component-variables ^8.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 microsite.


# 13.0.2

# Bug fixes

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

# 13.0.1

# Bug fixes

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

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

Check out the repo on Github .

Note: Shortly after launch, the Vue 3 repo will be renamed to rei-cedar and our Vue 2 library will be republished under @rei/cedar-vue-2.


# Breaking changes

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

# Vue 3 attribute handling

In Vue 2, class and style attributes were excluded from the $attrs object.

In Vue 3, 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 its 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 with the inclusion of class and style in the $attrs object. 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 this attribute changes is causing issues.

Vue migration guide: $attrs (opens new window)

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

New

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

# Vue 3 v-html directive

Vue 3 has limited the use (opens new window) 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>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11

# 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 (opens new window)

# Cedar reset

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

Old

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

New

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

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

# Doc site

A keen observer may notice our documentation site is still utilizing Vue 2. We're currently in the process of rebuilding our documentation site from the ground up and hope to have it released in early 2023.

While it's not ideal to document a Vue 3 component library in a Vue 2 site, we have introduced a handful of changes to support our Vue 3 library in the interim:

  • Adding a utility to generate a Vue 3 version of our component sandboxes. Try it out
  • Flagging when a change or feature applies to the Vue 3 library only