Cedar 16

Adding CdrSurfaceScroll

Surface-scroll extends our Surface component by adding a user defined overflow and applying a custom scrollbar. It is designed to handle scrollable content, providing our users with more control and flexibility for both horizontal and vertical scrolling within a constrained container.

Introducing CdrFilmstrip

A new filmstrip component has been added to Cedar. The Filmstrip is one of the supported patterns that uses the CdrSurfaceScroll component. This provides a flexible and accessible way to display a series of media or content in a scrollable container. This initial release includes:

• Full keyboard focus parity for improved accessibility
• A new scrollNavigate event to handle user interaction

Special thanks to REI Engineer Kurt Medley for this contribution!

Public injection keys

Prevents inconsistent symbol instances across packages: This ensures that when a component consumes an injected key from another package, it's always the same unique symbol instance, preventing errors.

Eliminates TypeScript declaration errors: The publicly exposed keys are correctly typed, which helps to prevent TypeScript errors in your project when using inject with Cedar components.

Resolves Vue warnings related to missing injectables: With a clear public entry point for these keys, you will avoid warnings that arise when a component attempts to inject a dependency that's not properly provided by a parent.

Here's an example of how you can use an injection key to build a custom component that interacts with a CdrFilmstrip's state:

import { inject } from 'vue';
import { CdrFilmstripSymbol } from '@rei/cedar';

export default {
  setup() {
    const filmstrip = inject(CdrFilmstripSymbol);

    // Now you can access the filmstrip's internal state and methods,
    // like checking the current slide index.
    const currentSlideIndex = filmstrip.state.currentSlideIndex;
    
    // You can also call methods on the filmstrip
    const goToNextSlide = filmstrip.methods.goToNext;
  }
};

Neutral Link

The neutral link variant extends our Link component by adding another option that can display in the default color but also can stack link modifiers.

Media Object

We updated Media Object to remove container query and use media query by default.

Deprecation of @import

We've refactored the entire Sass codebase to migrate from the @import rule to the modern @use rule, improving performance and consistency.

Migration to @use for Sass imports

With the release of v16.0.0, the Cedar Sass codebase is fully refactored to use the modern <code?>@use rule. This change aligns with the latest Sass standards and provides better encapsulation and performance.

What you need to do:

If your project uses Cedar's Sass files via @import, you will need to update your stylesheets to use the new @use syntax. This is a breaking change and will likely require some refactoring on your end.

For example, if you were previously importing Cedar variables like this:

@import '@rei/cedar/dist/style/cdr-tokens.scss';

.my-element {
  background-color: $cdr-color-primary-600;
}

You will need to update your code to use the @use rule and the new namespace, like this:

@use '@rei/cedar/dist/style/cdr-tokens' as cdr;

.my-element {
  background-color: cdr.$cdr-color-primary-600;
}

We recommend using the standard namespaced approach (as cdr) to avoid conflicts with your own variables. For more information, please consult the official Sass documentation on the module system.

radius-border

The design system now pulls in cdr-tokens version 13, which includes a fix for the radius-border map value.

v13.0.0

Cedar-Tokens update v13.0.0 removes support for the following deprecated media query tokens:

• cdr-xs-mq
• cdr-sm-mq
• cdr-md-mq
• cdr-lg-mq