Welcome to Watermark’s Ripple Design System

The Ripple Design System provides a foundation comprising design guidelines, documentation, and components. It serves as the single source of truth for product designers, developers, and product managers, in order to create consistent and accessible user experiences in our products. The design system ensures efficiency in the design and development process by avoiding duplication of effort when solving similar problems.

Ripple is a living, evolving system. We continuously iterate our design patterns and components as we identify needs in our products.

Foundation & Guidelines

These sections contain rules, tips, and guidance on visual styling and design patterns we use in our products. You’ll find our UI Library here in Abstract (link opens in new window) for use in Sketch compositions.

Components

A library of reusable components that work like standard DOM elements.

  • Encapsulated styling and behavior
  • Configurable using defined properties
  • Fully accessible
  • Compatible with all widely used desktop and mobile browsers
  • Usable with any framework or no framework at all

Library version 2.31.0

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.