Resources

Work In Progress Last updated: 3/30/23

Heads up - we’ll update this page before every sprint to showcase a preview of what you can expect to be delivered in the next release. Bookmark this page to quickly reference what’s coming up next!

Next Release Date

Th Apr 20

Blog

Design Ripple's new blog

Expected availability date: coming soon

Icons

Update size of icons for increased readability

Expected availability date: 4/20/23

Dropdowns

Allow dropdown menus to overflow beyond containers such as modals

Expected availability date: 4/20/23

In other news

  • Layout Guidelines: Designing guidelines for the various layouts used within Ripple
  • Line Chart: Writing specs
  • Snackbar: Ensuring all snackbar messages (including duplicates) are read by screen readers

Got Questions about Work in Progress?

Slack us at #designsystem about functionality, roadmap, priority or requests.

Versions

Check out the Versions page to all previously released updates to components.

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.