Skip to main content

Blog

Rivet 1.1.0 release

Rivet 1.1.0 is now available. This release fixes a lot of JavaScript-related issues, adds several new utility classes, and provides additional variations of the table component.

Levi McGranahan

Sep 20, 2018

Rivet 1.1.0 is now available! This release fixes a lot of JavaScript-related issues, adds several new utility classes, and provides additional variations of the table component.

Changes in 1.1.0

This release makes significant changes to the underlying structure of Rivet's JavaScript. If you run into any problems updating to 1.1.0, please file an issue on GitHub.

JavaScript updates #

This release updates the JavaScript that powers Rivet components to use the event delegation pattern. This allows you to add or remove elements from the DOM via JavaScript without breaking event listeners you’ve already set up.

Likewise, in an effort to give developers more flexibility over how they use Rivet’s JavaScript in their own scripts, we’ve added the ability to pass callback functions to many component API methods.

This release also adds new API methods for several components:

Finally, this release creates some new custom DOM events to help make it easier to handle certain component interactions:

New type scale aliases #

This release adds new type scale utility classes that follow the size naming conventions used by the spacing utility classes. These new aliases allow you to adjust the size of your text without having to remember specific font sizes.

New margin and padding utility classes #

This release adds new vertical and horizontal spacing utility classes:

New table variants #

This release adds two new variants of the table component:

More consistent color names #

In previous versions of Rivet the CSS class names we used to apply color to alerts and validation was inconsistent across components. In this release we’ve tried to standardize the way we refer to color in our CSS so that developers can consistently reference color names.

This mainly affects the CSS class names for alerts, form validation, and buttons, which all use the same names to refer to their respective color variants. For example, the following all produce the danger/error (orange) version of these components:

.rvt-badge--danger
.rvt-button--danger
.rvt-alert--danger
.rvt-validation-danger

The old CSS class names for alerts, and validation will still work as expected, but will be deprecated in future versions of Rivet and should be updated when possible. See this thread on Github for more details.

Complete list of updates #

For a complete breakdown of the 1.1.0 updates, see the changelog on the Rivet home page.