@ons/design-system 65.2.3 → 65.2.5

package/components/autosuggest/autosuggest.spec.js

@@ -597,12 +597,20 @@ describe('script: autosuggest', () => {
       });
 
       it('shows the API error message', async () => {
-        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length);
-        expect(listItemCount).toBe(1);
+        const resultsItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length);
+        expect(resultsItemCount).toBe(1);
         const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent);
         expect(warningText.trim()).toBe('!Sorry, there is a problem.');
       });
 
+      it('the list and results element should be removed from the page', async () => {
+        const hasListBox = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-js-autosuggest-listbox'));
+        const hasResultsTitle = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-autosuggest__results-title'));
+
+        expect(hasListBox).toBe(false);
+        expect(hasResultsTitle).toBe(false);
+      });
+
       it('the input should be disabled', async () => {
         const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', (node) => node.hasAttribute('disabled'));
         expect(hasDisabledAttribute).toBe(true);

package/components/autosuggest/autosuggest.ui.js

@@ -43,6 +43,7 @@ export default class AutosuggestUI {
     this.input = context.querySelector(`.${baseClass}-input`);
     this.resultsContainer = context.querySelector(`.${baseClass}-results`);
     this.listbox = this.resultsContainer.querySelector(`.${baseClass}-listbox`);
+    this.resultsTitleContainer = this.resultsContainer.querySelector(`.ons-autosuggest__results-title`);
     this.instructions = context.querySelector(`.${baseClass}-instructions`);
     this.ariaStatus = context.querySelector(`.${baseClass}-aria-status`);
     this.form = context.closest('form');
@@ -376,7 +377,10 @@ export default class AutosuggestUI {
 
       if (this.resultLimit === 100 && this.foundResults > this.resultLimit) {
         let message = this.tooManyResults.replace('{n}', this.foundResults);
-        this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild);
+        this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild);
+        this.ariaStatus.setAttribute('aria-hidden', 'true');
+        this.listbox.remove();
+        this.resultsTitleContainer.remove();
       }
 
       this.setHighlightedResult(null);
@@ -414,9 +418,11 @@ export default class AutosuggestUI {
       this.input.value = '';
       this.label.classList.add('ons-u-lighter');
 
-      this.listbox.innerHTML = '';
-      this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild);
+      this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild);
+      this.ariaStatus.setAttribute('aria-hidden', 'true');
       this.setAriaStatus(ariaMessage);
+      this.listbox.remove();
+      this.resultsTitleContainer.remove();
     } else {
       message = this.noResults;
       this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
@@ -497,13 +503,12 @@ export default class AutosuggestUI {
   }
 
   createWarningElement(content) {
-    const warningListElement = document.createElement('li');
+    const warningContainer = document.createElement('div');
     const warningElement = document.createElement('div');
     const warningSpanElement = document.createElement('span');
     const warningBodyElement = document.createElement('div');
 
-    warningListElement.setAttribute('aria-hidden', 'true');
-    warningListElement.className = 'ons-autosuggest__warning';
+    warningContainer.className = 'ons-autosuggest__warning';
     warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 
     warningSpanElement.className = 'ons-panel__icon';
@@ -515,9 +520,9 @@ export default class AutosuggestUI {
 
     warningElement.appendChild(warningSpanElement);
     warningElement.appendChild(warningBodyElement);
-    warningListElement.appendChild(warningElement);
+    warningContainer.appendChild(warningElement);
 
-    return warningListElement;
+    return warningContainer;
   }
 
   storeExistingSelections(value) {

package/components/checkboxes/_checkbox.scss

@@ -94,7 +94,6 @@ $checkbox-padding: 11px;
 
       &:checked,
       &:focus {
-        background-color: initial;
 
         & + .ons-checkbox__label::before {
           background: none;
@@ -123,7 +122,6 @@ $checkbox-padding: 11px;
 
       &:checked,
       &:focus {
-        background-color: initial;
 
         & + .ons-checkbox__label::before {
           background: none;

package/components/navigation/navigation.js

@@ -1,5 +1,3 @@
-import { GetViewportDetails } from 'viewport-details';
-
 import onViewportChange from '../../js/utils/viewport-change';
 
 const attrExpanded = 'aria-expanded';

package/components/tabs/_macro.njk

@@ -24,6 +24,6 @@
                 {% if tab.showTitle %}<h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>{% endif %}
                 {{ tab.content | safe }}
             </section>
-        {% endfor %}    
+        {% endfor %}
     </section>
 {% endmacro %}

package/components/tabs/_macro.spec.js

@@ -76,11 +76,7 @@ describe('macro: tabs', () => {
   it('has the provided `title`', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect(
-      $('.ons-tabs__title')
-        .text()
-        .trim(),
-    ).toBe('Example tabs');
+    expect($('.ons-tabs__title').text().trim()).toBe('Example tabs');
   });
 
   it('has title with provided tag override', () => {
@@ -113,11 +109,7 @@ describe('macro: tabs', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
     expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
-    expect(
-      $('.ons-tab:last')
-        .text()
-        .trim(),
-    ).toBe('Tab 2');
+    expect($('.ons-tab:last').text().trim()).toBe('Tab 2');
   });
 
   it('has Google Analytics integration on tab links', () => {
@@ -133,16 +125,8 @@ describe('macro: tabs', () => {
   it('has expected content in tab panels', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect(
-      $('.ons-tabs__panel:first')
-        .html()
-        .trim(),
-    ).toBe('Example content...');
-    expect(
-      $('.ons-tabs__panel:last')
-        .html()
-        .trim(),
-    ).toBe('Some nested <strong>strong element</strong>...');
+    expect($('.ons-tabs__panel:first').html().trim()).toBe('Example content...');
+    expect($('.ons-tabs__panel:last').html().trim()).toBe('Some nested <strong>strong element</strong>...');
   });
 
   it('displays a h2 when showTitle set to true', () => {