Merge pull request #762 from indiana-university/release/2.8.0

Release 2.8.0

package.json

@@ -2,7 +2,7 @@
   "name": "rivet-core",
   "description": "Indiana University design system",
   "homepage": "https://rivet.iu.edu",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",

src/js/components/dialog.js

@@ -406,6 +406,9 @@ export default class Dialog extends Component {
           'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="-1"]'
         )
 
+        this.focusableChildElements = Array.from(this.focusableChildElements)
+        this.focusableChildElements = this.focusableChildElements.filter(el => el.clientHeight > 0) // Exclude hidden elements
+
         this.firstFocusableChildElement = this.focusableChildElements[0]
         this.lastFocusableChildElement = this.focusableChildElements[this.focusableChildElements.length - 1]
       },

src/sandbox/components/dialog/variants/dialog-hidden-element.njk

@@ -0,0 +1,30 @@
+---
+tags: dialog
+title: Dialog with hidden child element
+layout: layouts/preview.njk
+permalink: /components/preview/{{ title | slug}}/
+padding: true
+order: 8
+---
+<button type="button" class="rvt-button" data-rvt-dialog-trigger="dialog-example">
+  <span>Dialog example</span>
+</button>
+<div class="rvt-dialog" id="dialog-example" role="dialog" tabindex="-1" aria-labelledby="dialog-title" aria-describedby="dialog-description" data-rvt-dialog="dialog-example" hidden>
+  <header class="rvt-dialog__header">
+    <h1 class="rvt-dialog__title" id="dialog-title">Dialog title</h1>
+  </header>
+  <div class="rvt-dialog__body">
+    <p id="dialog-description">The default dialog appears near the middle of the screen. It does not darken the page behind it and does not close when the user clicks outside of it. You can use data attributes to configure the appearance and behavior of the dialog.</p>
+  </div>
+  <div class="rvt-dialog__controls">
+    <button type="button" class="rvt-button" role="button">
+    <span>OK</span>
+    </button>
+    <button type="button" class="rvt-button rvt-button--secondary" data-rvt-dialog-close="dialog-example" role="button">
+    <span>Cancel</span>
+    </button>
+    <button type="button" class="rvt-button" role="button" hidden aria-hidden="true" style="display: none">
+    <span>Hidden</span>
+    </button>
+  </div>
+</div>

src/sass/dropdown/_base.scss

@@ -26,6 +26,10 @@
     padding: 0;
 
     &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
       outline: math.div($spacing-xxs, 2) solid $color-blue-600;
       outline-offset: math.div($spacing-xxs, 2);
     }
@@ -96,6 +100,10 @@
 
       &:focus {
         outline: none;
+      }
+
+      &:focus-visible {
+        outline: none;
         box-shadow: inset 0 0 0 math.div($spacing-xxs, 2) $color-blue-500;
       }
 
@@ -111,6 +119,10 @@
         }
 
         &:focus {
+          outline: none;
+        }
+
+        &:focus-visible {
           /* stylelint-disable */
           box-shadow:
             inset $spacing-xxs 0 0 $color-blue-500,

src/sass/grid/_base.scss

@@ -85,7 +85,8 @@ $gutter: math.div($spacing-md, 2);
   flex-basis: 0;
   flex-grow: 1;
   max-width: 100%;
-  padding: 0 $gutter;
+  padding-left: $gutter;
+  padding-right: $gutter;
   position: relative;
 }
 
@@ -101,19 +102,23 @@ $gutter: math.div($spacing-md, 2);
   }
 
   &--loose {
-    margin: 0 ($gutter * -2);
+    margin-left: $gutter * -2;
+    margin-right: $gutter * -2;
   }
 
   &--loose > [class^='#{$prefix}-cols'] {
-    padding: 0 ($gutter * 2);
+    padding-left: $gutter * 2;
+    padding-right: $gutter * 2;
   }
 
   &--tight {
-    margin: 0 ($gutter * -.75);
+    margin-left: $gutter * -.75;
+    margin-right: $gutter * -.75;
   }
 
   &--tight > [class^='#{$prefix}-cols'] {
-    padding: 0 ($gutter * .75);
+    padding-left: $gutter * .75;
+    padding-right: $gutter * .75;
   }
 
   [class^='#{$prefix}-cols'] {
@@ -170,7 +175,8 @@ $gutter: math.div($spacing-md, 2);
  */
 
 %cols-properties {
-  padding: 0 $gutter;
+  padding-left: $gutter;
+  padding-right: $gutter;
   position: relative;
   width: 100%;
 }

src/sass/seriesnav/_base.scss

@@ -73,6 +73,11 @@
       border-right: 1px solid $color-black-100;
       flex-direction: row-reverse;
       padding-right: $spacing-md;
+
+      &:only-child {
+        border-right: 0;
+        padding-right: 0;
+      }
     }
 
     &__next {

src/sass/utilities/_prose.scss

@@ -65,7 +65,7 @@
     /* stylelint-enable */
   }
 
-  > *:empty:not(hr) {
+  > *:empty:not(br,embed,hr,input,img,wbr) {
     display: none;
   }
 }