@ons/design-system 60.0.1 → 60.0.3

package/components/autosuggest/autosuggest.ui.js

@@ -408,6 +408,7 @@ export default class AutosuggestUI {
       this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
     } else if (status > 400 || status === '') {
       message = this.errorAPI + (this.errorAPILinkText ? ' <a href="' + window.location.href + '">' + this.errorAPILinkText + '</a>.' : '');
+      let ariaMessage = this.errorAPI + (this.errorAPILinkText ? ' ' + this.errorAPILinkText : '');
 
       this.input.setAttribute('disabled', true);
       this.input.value = '';
@@ -415,7 +416,7 @@ export default class AutosuggestUI {
 
       this.listbox.innerHTML = '';
       this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild);
-      this.setAriaStatus(message);
+      this.setAriaStatus(ariaMessage);
     } else {
       message = this.noResults;
       this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;

package/components/button/_button.scss

@@ -99,7 +99,7 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:active {
+  &:active:not(&--disabled):not(&--loader.ons-is-loading) {
     top: ems($button-shadow-size);
   }
 
@@ -154,12 +154,19 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--secondary:hover & {
+  &--secondary:hover:not(&--disabled) & {
     &__inner {
       background: var(--ons-color-button-secondary-hover);
     }
   }
 
+  &--disabled:not(&--secondary) &,
+  &--loader.ons-is-loading:hover:not(&--secondary) & {
+    &__inner {
+      background: var(--ons-color-button);
+    }
+  }
+
   // Link button when hovered
   &--link:hover {
     text-decoration: none;
@@ -361,19 +368,21 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--loader &__inner {
-    position: relative;
-    transition: color 0.3s ease-in-out;
-    .ons-svg-icon {
-      height: 27px;
-      left: 50%;
-      margin: 0;
-      opacity: 0;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      transition: opacity 0.3s ease-in-out;
-      width: 27px;
+  &--loader & {
+    &__inner {
+      position: relative;
+      transition: color 0.3s ease-in-out;
+      .ons-svg-icon {
+        height: 27px;
+        left: 50%;
+        margin: 0;
+        opacity: 0;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        transition: opacity 0.3s ease-in-out;
+        width: 27px;
+      }
     }
   }
 
@@ -384,14 +393,26 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--loader.ons-is-loading &__inner {
-    color: transparent;
-    .ons-svg-icon {
-      margin-left: 0 !important;
-      opacity: 1;
+  &--loader.ons-is-loading & {
+    &__inner {
+      color: transparent;
+      .ons-svg-icon {
+        margin-left: 0 !important;
+        opacity: 1;
+      }
     }
   }
 
+  &--loader.ons-is-loading:active & {
+    &__inner {
+      box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
+    }
+  }
+
+  &--loader.ons-is-loading:hover {
+    cursor: not-allowed;
+  }
+
   &--dropdown:focus & {
     &__inner {
       box-shadow: inset 0 -4px 0 0 var(--ons-color-text-link-focus);
@@ -417,15 +438,22 @@ $button-shadow-size: 3px;
   }
 
   // Disabled buttons
-  &--disabled {
-    &:hover {
-      cursor: not-allowed;
-    }
-    .ons-btn__inner {
+  &--disabled & {
+    &__inner {
       opacity: 0.4;
     }
   }
 
+  &--disabled:hover {
+    cursor: not-allowed;
+  }
+
+  &--disabled:active & {
+    &__inner {
+      box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
+    }
+  }
+
   &--dropdown {
     @extend .ons-btn--mobile;
 

package/components/checkboxes/_checkbox-macro.njk

@@ -34,7 +34,6 @@
                             "id": params.other.id,
                             "name": params.other.name,
                             "type": params.other.type,
-                            "required": params.other.required,
                             "classes": params.other.classes | default(''),
                             "width": params.other.width | default('auto'),
                             "attributes": params.other.attributes,

package/components/checkboxes/_checkbox-macro.spec.js

@@ -25,7 +25,6 @@ const EXAMPLE_CHECKBOXES_ITEM_INPUT = {
     label: {
       text: 'Enter your own answer',
     },
-    required: false,
     classes: 'extra-textbox-class',
     width: 42,
     value: '42',
@@ -339,7 +338,6 @@ describe('macro: checkboxes/checkbox', () => {
         text: 'Enter your own answer',
         classes: 'ons-u-fw-n',
       },
-      required: false,
       classes: 'extra-textbox-class',
       width: 42,
       attributes: EXAMPLE_CHECKBOXES_ITEM_INPUT.other.attributes,

package/components/checkboxes/_checkbox.scss

@@ -188,12 +188,6 @@ $checkbox-padding: 11px;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   }
 
-  .ons-panel--error .ons-radio__input:checked ~ &__other > .ons-input--text:required:not(:focus) {
-    border: 1px solid var(--ons-color-ruby-red);
-    outline: 1px solid var(--ons-color-ruby-red);
-    outline-offset: -2px;
-  }
-
   &__input:focus + &__label::before {
     @extend %ons-input-focus;
   }

package/components/checkboxes/_macro.njk

@@ -79,7 +79,7 @@
                                 "otherType": checkbox.other.otherType,
                                 "options": checkbox.other.options,
                                 "width": checkbox.other.width,
-                                "classes": ("ons-input--error" if params.error else "") + checkbox.other.classes | default('') + exclusiveClass | default(''),
+                                "classes": ("ons-input--error" if params.error and checkbox.checked else "") + checkbox.other.classes | default('') + exclusiveClass | default(''),
                                 "attributes": checkbox.other.attributes,
                                 "label": {
                                     "text": checkbox.other.label.text

package/components/download-resources/download-resources.js

@@ -783,10 +783,10 @@ Math.easeInOutQuad = function(t, b, c, d) {
 
   let AdvFilter = function(element) {
     this.element = element;
-    this.form = this.element.getElementsByClassName('ons-js-adv-filter__form');
+    this.form = document.getElementsByClassName('ons-js-adv-filter__form');
     this.resultsList = this.element.getElementsByClassName('ons-js-adv-filter__gallery')[0];
     this.resultsCount = this.element.getElementsByClassName('ons-js-adv-filter__results-count');
-    this.showCount = this.element.getElementsByClassName('ons-js-adv-filter__show-results');
+    this.showCount = document.getElementsByClassName('ons-js-adv-filter__show-results');
 
     initAdvFilter(this);
   };
@@ -1011,8 +1011,10 @@ Math.easeInOutQuad = function(t, b, c, d) {
     let filtersTrigger = filters[0].getElementsByClassName('ons-js-adv-filter__trigger')[0];
     let filtersClose = filters[0].getElementsByClassName('ons-js-adv-filter__close')[0];
     let filtersShow = filters[0].getElementsByClassName('ons-js-adv-filter__show')[0];
+    let filtersWrap = filters[0].getElementsByClassName('ons-js-adv-filter__wrap')[0];
     let filtersPanel = filters[0].getElementsByClassName('ons-js-adv-filter__panel')[0];
     let body = document.getElementsByTagName('body')[0];
+    let page = document.getElementsByClassName('ons-page')[0];
 
     // Detect click on filters trigger
     filtersTrigger.addEventListener('click', function(event) {
@@ -1061,28 +1063,18 @@ Math.easeInOutQuad = function(t, b, c, d) {
 
     // Toggle filters visibility on small devices
     function toggleFilters(bool) {
-      let resultsOptions = document.getElementsByClassName('ons-adv-filter__results-options')[0];
-      let resultsList = document.getElementsByClassName('ons-js-adv-filter__gallery')[0];
-      let header = document.getElementsByClassName('ons-header')[0];
-      let breadcrumbs = document.getElementsByClassName('ons-breadcrumb')[0];
-      let footer = document.getElementsByClassName('ons-footer')[0];
-
+      if (bool === true) {
+        body.appendChild(filtersPanel);
+      } else {
+        filtersWrap.appendChild(filtersPanel);
+      }
+      Util.toggleClass(page, 'ons-u-d-no', bool);
       Util.toggleClass(filtersPanel, 'ons-adv-filter__panel--is-visible', bool);
       Util.toggleClass(body, 'ons-no-scroll', bool);
       filtersTrigger.setAttribute('aria-expanded', bool);
       filtersTrigger.setAttribute('aria-hidden', bool);
+      page.setAttribute('aria-hidden', bool);
       Util.toggleClass(filtersTrigger, 'ons-u-d-no', bool);
-
-      Util.toggleClass(resultsOptions, 'ons-u-d-no', bool);
-      Util.toggleClass(resultsList, 'ons-u-d-no', bool);
-      Util.toggleClass(header, 'ons-u-d-no', bool);
-      Util.toggleClass(breadcrumbs, 'ons-u-d-no', bool);
-      Util.toggleClass(footer, 'ons-u-d-no', bool);
-      resultsOptions.setAttribute('aria-hidden', bool);
-      resultsList.setAttribute('aria-hidden', bool);
-      header.setAttribute('aria-hidden', bool);
-      breadcrumbs.setAttribute('aria-hidden', bool);
-      footer.setAttribute('aria-hidden', bool);
     }
   }
 })();