0.5.0+ Migration guide

Overview #

The 0.5.0 release of Rivet brings a ton of new components and features. In the future, the pace of change in Rivet will normalize, but with this latest release, we wanted to provide a quick guide to the latest version.

Here’s a quick list of the major additions:

• Tabs component, including three variations: default, fitted, and vertical
• Header updates, including better considerations for smaller screens and markup improvements
• Dropdown menus
• Custom file input/upload button
• Redesigned inline form input validation styles
• Segmented buttons
• Redesigned badges
• Tons of accessibility improvements

Header updates #

We’ve improved the markup in the header to be more accessible. Previously, all dropdown menus in the header were toggled using anchor elements <a>. We’ve improved things by using <button> elements instead. Using buttons is more semantically correct, and it avoids some accessibility pitfalls associated with having links on a page with invalid URLs.

We also made a small update to the attribute that associates dropdown toggles with the menus they control. The dropdown toggle buttons now use an attribute called data-dropdown-toggle (in place of the old data-dropdown-trigger). This change was driven by a larger effort to make a standalone dropdown component, which is also in this release 🎉

How to update the header

1. Change all toggles that used <a> tags to <button> tags and remove the href attributes.
2. Make sure all toggle buttons have a class of rvt-dropdown__toggle. This CSS class is specific to the header and provides styling of any dropdown toggle used there.
3. Update the data attribute on each toggle to data-dropdown-toggle.
4. Wrap the dropdown toggle text in a <span> with the class .rvt-dropdown__toggle-text.
5. Add the inline svg code for the new dropdown toggle icon inside the new button element and after the toggle text. You can get the code for the dropdown icon with the main navigation example.
6. Add the role="menu" ARIA attribute to all .rvt-dropdown__menu elements.
7. Update the inline svg inside the .rvt-header__trident <div>. This new code helps the header scale on smaller screens. Copy the code below.
8. Update the inline svg code for the .rvt-drawer-button element. (This update is also related to the responsive header updates. Copy the code below.
9. Update all instances of data-subnav-trigger in the rvt-drawer element to be data-subnav-toggle.
10. Update the .rvt-drawer__bottom-close element that is only visible on focus to use a button element in place of the current <a> element.

New trident SVG code #

<div class="rvt-header__trident">
    <svg class="rvt-header__trident-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 48" aria-hidden="true" aria-describedby="iu-logo">
        <title id="iu-logo">Indiana University Logo</title>
        <rect width="41" height="48" fill="#900"/>
        <polygon points="24.59 12.64 24.59 14.98 26.34 14.98 26.34 27.78 22.84 27.78 22.84 10.9 24.59 10.9 24.59 8.57 16.41 8.57 16.41 10.9 18.16 10.9 18.16 27.78 14.66 27.78 14.66 14.98 16.41 14.98 16.41 12.64 8.22 12.64 8.22 14.98 9.97 14.98 9.97 30.03 12.77 33.02 18.16 33.02 18.16 36.52 16.41 36.52 16.41 39.43 24.59 39.43 24.59 36.52 22.84 36.52 22.84 33.02 28 33.02 31.01 30.03 31.01 14.98 32.78 14.98 32.78 12.64 24.59 12.64" fill="#fff"/>
    </svg>
</div>

New drawer button code #

<button class="rvt-drawer-button" aria-haspopup="true" aria-expanded="false" data-drawer-toggle="mobile-drawer">
    <span class="sr-only">Toggle menu</span>
    <svg aria-hidden="true" class="rvt-drawer-button-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <g fill="currentColor">
            <path d="M15,3H1A1,1,0,0,1,1,1H15a1,1,0,0,1,0,2Z"/>
            <path d="M15,9H1A1,1,0,0,1,1,7H15a1,1,0,0,1,0,2Z"/>
            <path d="M15,15H1a1,1,0,0,1,0-2H15a1,1,0,0,1,0,2Z"/>
        </g>
    </svg>
    <svg aria-hidden="true" class="rvt-drawer-button-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z"/>
    </svg>
</button>

New bottom (focus only) drawer close button #

We’ve updated the markup for the bottom close button in the drawer (visible on focus only) to use a more semantically correct and accessible <button> element in place of the old <a> element it was using.

<button class="rvt-drawer__bottom-close">Close nav</button>```

## New modal close and alert dismiss icon
We also updated a few close icons to make them more consistent. You can update the icons in your modal close (`.rvt-modal__close`) and alert dismiss (`.rvt-alert__dismiss`) buttons by pasting the following code into them.

```html
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z"/>
</svg>

New inline form validation style #

Finally, we added a lot of new styles for inline form validation, along with documentation on how to implement them.

• Learn how to use the inline validation style on text inputs and <select> elements.
• Learn how to use the standalone inline alert on groups of form controls like checkboxes and radio buttons.

Button styles must be applied with CSS class #

Older versions of Rivet used a more generic set of CSS selectors to apply buttons styles. That meant that any <button> element (without any classes) would be styled to look like a Rivet button by default. Starting in 0.5.0 you will need to explicitly use the CSS class .rvt-button to get the Rivet button styles. By removing the default styling on <button> elements, it will be easier to style them for custom components and designs. You will no longer have to override the default <button> styles.

<!-- Sorry, this will no longer work! -->
<button>Rivet button</button>

<!-- But, this will get you a Rivet button -->
<button class="rvt-button">Ah ha!</button>