@ons/design-system 64.0.0 → 65.1.0

package/components/autosuggest/autosuggest.spec.js

@@ -88,7 +88,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -99,7 +99,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -110,10 +110,10 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('id'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
       const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
@@ -135,7 +135,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest-input__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -147,7 +147,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -174,7 +174,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -186,7 +186,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -198,10 +198,10 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('id'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
       const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
@@ -214,7 +214,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest-input__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -225,7 +225,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowUp');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -264,15 +264,15 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('Tab');
 
-      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCountSample1).toBe(2);
 
       await page.waitForTimeout(200);
-      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCountSample2).toBe(2);
 
       await page.waitForTimeout(320);
-      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCountSample3).toBe(0);
     });
 
@@ -294,7 +294,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('Tab');
       await page.waitForTimeout(320);
 
-      const hasClass = await page.$eval('.ons-autosuggest-input', node => node.classList.contains('ons-autosuggest-input--has-results'));
+      const hasClass = await page.$eval('.ons-autosuggest', node => node.classList.contains('ons-autosuggest--has-results'));
       expect(hasClass).toBe(false);
     });
 
@@ -316,7 +316,7 @@ describe('script: autosuggest', () => {
       await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
-      await page.click('.ons-autosuggest-input__option:nth-child(2)');
+      await page.click('.ons-autosuggest__option:nth-child(2)');
 
       const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
       expect(inputValue).toBe('United States Virgin Islands');
@@ -329,7 +329,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'En', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCount).toBe(0);
     });
 
@@ -338,7 +338,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCount).toBe(1);
     });
   });
@@ -349,9 +349,9 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 });
       await page.keyboard.press('ArrowDown');
-      await page.hover('.ons-autosuggest-input__option:nth-child(2)');
+      await page.hover('.ons-autosuggest__option:nth-child(2)');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest-input__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
       expect(focusedClassCount).toBe(0);
     });
   });
@@ -368,10 +368,10 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 });
       await page.keyboard.press('ArrowDown');
-      await page.hover('.ons-autosuggest-input__option:nth-child(2)');
+      await page.hover('.ons-autosuggest__option:nth-child(2)');
       await page.hover('#dummy');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest-input__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
       expect(focusedClassCount).toBe(1);
     });
   });
@@ -384,7 +384,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.type('.ons-js-autosuggest-input', 'd', { delay: 20 });
 
-      const focusedNodeCount = await page.$$eval('.ons-autosuggest-input__option--focused', nodes => nodes.length);
+      const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
       expect(focusedNodeCount).toBe(0);
     });
 
@@ -402,7 +402,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
 
-      const emboldened = await page.$$eval('.ons-autosuggest-input__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
       expect(emboldened).toEqual(['Unite', 'Unite']);
     });
 
@@ -411,9 +411,9 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'tland', { delay: 20 });
 
-      const matchCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(matchCount).toBe(2);
-      const emboldened = await page.$$eval('.ons-autosuggest-input__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
       expect(emboldened).toEqual(['tland']);
     });
 
@@ -452,7 +452,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const noResultsContent = await page.$eval('.ons-autosuggest-input__option--no-results', node => node.textContent);
+        const noResultsContent = await page.$eval('.ons-autosuggest__option--no-results', node => node.textContent);
         expect(noResultsContent).toBe('No suggestions found.');
       });
 
@@ -496,7 +496,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const matchCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+        const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
         expect(matchCount).toBe(0);
       });
 
@@ -534,7 +534,7 @@ describe('script: autosuggest', () => {
       it('shows the type more message', async () => {
         const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', nodes => nodes.length);
         expect(listItemCount).toBe(1);
-        const noResultsText = await page.$eval('.ons-autosuggest-input__option--no-results', node => node.innerText);
+        const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', node => node.innerText);
         expect(noResultsText.trim()).toBe('Continue entering to get suggestions');
       });
     });
@@ -565,7 +565,7 @@ 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 warningText = await page.$eval('.ons-autosuggest-input__warning', node => node.textContent);
+        const warningText = await page.$eval('.ons-autosuggest__warning', node => node.textContent);
         expect(warningText.trim()).toBe('!Sorry, there is a problem.');
       });
 

package/components/autosuggest/autosuggest.ui.js

@@ -4,12 +4,12 @@ import runFuse from './fuse-config';
 
 export const baseClass = 'ons-js-autosuggest';
 
-export const classAutosuggestOption = 'ons-autosuggest-input__option';
+export const classAutosuggestOption = 'ons-autosuggest__option';
 export const classAutosuggestOptionFocused = `${classAutosuggestOption}--focused`;
 export const classAutosuggestOptionNoResults = `${classAutosuggestOption}--no-results`;
 export const classAutosuggestOptionMoreResults = `${classAutosuggestOption}--more-results ons-u-fs-s`;
-export const classAutosuggestHasResults = 'ons-autosuggest-input--has-results';
-export const classAutosuggestResultsTitle = 'ons-autosuggest-input__results-title';
+export const classAutosuggestHasResults = 'ons-autosuggest--has-results';
+export const classAutosuggestResultsTitle = 'ons-autosuggest__results-title';
 
 export default class AutosuggestUI {
   constructor({
@@ -117,7 +117,7 @@ export default class AutosuggestUI {
     this.input.setAttribute('autocomplete', this.input.getAttribute('autocomplete') || 'off');
     this.input.setAttribute('role', 'combobox');
 
-    this.context.classList.add('ons-autosuggest-input--initialised');
+    this.context.classList.add('ons-autosuggest--initialised');
 
     this.bindEventListeners();
   }
@@ -350,8 +350,7 @@ export default class AutosuggestUI {
           listElement.setAttribute('id', `${this.listboxId}__option--${index}`);
           listElement.setAttribute('role', 'option');
           if (result.category) {
-            innerHTML =
-              innerHTML + `<span class="ons-autosuggest-input__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
+            innerHTML = innerHTML + `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
           }
           listElement.innerHTML = innerHTML;
           listElement.addEventListener('click', () => {
@@ -434,7 +433,7 @@ export default class AutosuggestUI {
           option.classList.add(classAutosuggestOptionFocused);
           option.setAttribute('aria-selected', true);
           this.input.setAttribute('aria-activedescendant', option.getAttribute('id'));
-          const groupedResult = option.querySelector('.ons-autosuggest-input__group');
+          const groupedResult = option.querySelector('.ons-autosuggest__group');
           const optionText = option.innerHTML.replace('<strong>', '').replace('</strong>', '');
           if (groupedResult) {
             let groupedAriaMsg = this.ariaGroupedResults.replace('{n}', groupedResult.innerHTML);
@@ -503,8 +502,8 @@ export default class AutosuggestUI {
     const warningBodyElement = document.createElement('div');
 
     warningListElement.setAttribute('aria-hidden', 'true');
-    warningListElement.className = 'ons-autosuggest-input__warning';
-    warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest-input__panel';
+    warningListElement.className = 'ons-autosuggest__warning';
+    warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 
     warningSpanElement.className = 'ons-panel__icon';
     warningSpanElement.setAttribute('aria-hidden', 'true');

package/components/breadcrumbs/_breadcrumbs.scss

@@ -1,6 +1,6 @@
 $breadcrumb-chevron-height: 0.65rem;
 
-.ons-breadcrumb {
+.ons-breadcrumbs {
   align-items: center;
   display: flex;
   padding: 1rem 0;
@@ -20,7 +20,7 @@ $breadcrumb-chevron-height: 0.65rem;
       display: none;
     }
 
-    .ons-svg-icon {
+    .ons-icon {
       height: $breadcrumb-chevron-height;
       margin: 0 0.2rem;
       vertical-align: middle;
@@ -30,7 +30,7 @@ $breadcrumb-chevron-height: 0.65rem;
     &:nth-last-child(1) {
       // small screen last child
       direction: rtl;
-      .ons-svg-icon {
+      .ons-icon {
         margin-left: -0.13rem;
         transform: rotate(180deg);
       }
@@ -46,7 +46,7 @@ $breadcrumb-chevron-height: 0.65rem;
       &:nth-last-child(1) {
         // last child
         direction: ltr;
-        .ons-svg-icon {
+        .ons-icon {
           display: none;
         }
       }
@@ -54,13 +54,13 @@ $breadcrumb-chevron-height: 0.65rem;
       &:first-child:nth-last-child(1) {
         //first and last child
         direction: rtl;
-        .ons-svg-icon {
+        .ons-icon {
           display: inline-block;
           vertical-align: middle;
         }
       }
 
-      &:not(:last-child).ons-svg-icon {
+      &:not(:last-child).ons-icon {
         //not last child
         margin: 0;
 

package/components/breadcrumbs/_macro.njk

@@ -1,11 +1,11 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
 
 {% macro onsBreadcrumbs(params) %}
-    <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
-        <ol class="ons-breadcrumb__items ons-u-fs-s">
+    <nav class="ons-breadcrumbs{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
+        <ol class="ons-breadcrumbs__items ons-u-fs-s">
             {% for item in params.itemsList %}
-                <li class="ons-breadcrumb__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
+                <li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
+                    <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
                     {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                     >{{ item.text }}</a>
                     {{

package/components/breadcrumbs/_macro.spec.js

@@ -58,62 +58,62 @@ describe('macro: breadcrumbs', () => {
   it('has additionally provided style classes', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb').hasClass('extra-class')).toBe(true);
-    expect($('.ons-breadcrumb').hasClass('another-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
   });
 
   it('has a default `aria-label` of "Breadcrumbs"', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
 
-    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs');
+    expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
   });
 
   it('has the provided `ariaLabel` for `aria-label`', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs label');
+    expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
   });
 
   it('has the provided `id`', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb').attr('id')).toBe('example-breadcrumbs');
+    expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
   });
 
   it('has additionally provided style classes on `item` element', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb__item:first').hasClass('item-extra-class')).toBe(true);
-    expect($('.ons-breadcrumb__item:first').hasClass('item-another-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
   });
 
   it('has additionally provided style classes on `link` element', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb__link:first').hasClass('link-extra-class')).toBe(true);
-    expect($('.ons-breadcrumb__link:first').hasClass('link-another-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
   });
 
   it('has provided `url` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const urls = mapAll($('.ons-breadcrumb__link'), node => node.attr('href'));
+    const urls = mapAll($('.ons-breadcrumbs__link'), node => node.attr('href'));
     expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
   });
 
   it('has provided `text` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const labels = mapAll($('.ons-breadcrumb__link'), node => node.text().trim());
+    const labels = mapAll($('.ons-breadcrumbs__link'), node => node.text().trim());
     expect(labels).toEqual(['Home', 'Guide']);
   });
 
   it('has provided `attributes` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const testValuesA = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-a'));
+    const testValuesA = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-a'));
     expect(testValuesA).toEqual(['123', '789']);
-    const testValuesB = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-b'));
+    const testValuesB = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-b'));
     expect(testValuesB).toEqual(['456', 'ABC']);
   });
 

package/components/button/_button.scss

@@ -31,7 +31,7 @@ $button-shadow-size: 3px;
   }
 
   &--search {
-    .ons-svg-icon {
+    .ons-icon {
       @include mq(s, l) {
         margin-right: 0.5rem;
       }
@@ -49,7 +49,7 @@ $button-shadow-size: 3px;
     pointer-events: none;
     position: relative;
 
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-text-inverse);
       height: 18px;
       margin-top: -$button-shadow-size;
@@ -76,7 +76,7 @@ $button-shadow-size: 3px;
     box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-text-link-focus);
     color: var(--ons-color-text-link-focus);
 
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-text-link-focus);
     }
   }
@@ -93,7 +93,7 @@ $button-shadow-size: 3px;
       box-shadow: none;
       color: var(--ons-color-text-inverse);
 
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse);
       }
     }
@@ -112,7 +112,7 @@ $button-shadow-size: 3px;
   &--small & {
     &__inner {
       padding: 0.5em 0.7em;
-      .ons-svg-icon {
+      .ons-icon {
         height: 16px;
         width: 16px;
       }
@@ -141,7 +141,7 @@ $button-shadow-size: 3px;
       color: var(--ons-color-text);
       font-weight: $font-weight-regular;
 
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -177,7 +177,7 @@ $button-shadow-size: 3px;
     outline: inherit;
 
     &__inner {
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -196,7 +196,7 @@ $button-shadow-size: 3px;
       color: var(--ons-color-text-link);
       font-weight: $font-weight-regular;
       padding: 0;
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link);
       }
     }
@@ -205,7 +205,7 @@ $button-shadow-size: 3px;
   &--text-link-inverse & {
     &__inner {
       color: var(--ons-color-text-inverse-link);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse-link);
       }
     }
@@ -217,7 +217,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: none;
       color: var(--ons-color-text-link-hover);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link-hover);
       }
     }
@@ -228,7 +228,7 @@ $button-shadow-size: 3px;
   &--text-link-inverse.active & {
     &__inner {
       color: var(--ons-color-text-inverse-link-hover);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse-link-hover);
       }
     }
@@ -247,7 +247,7 @@ $button-shadow-size: 3px;
       background-color: var(--ons-color-focus);
       box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus) !important;
       color: var(--ons-color-text-link-focus);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link-focus);
       }
     }
@@ -259,7 +259,7 @@ $button-shadow-size: 3px;
       border: 2px solid rgba(255, 255, 255, 0.6);
       box-shadow: none;
       color: var(--ons-color-text-inverse);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse);
       }
     }
@@ -271,7 +271,7 @@ $button-shadow-size: 3px;
       border: 2px solid var(--ons-color-black);
       box-shadow: none;
       color: var(--ons-color-text);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -306,7 +306,7 @@ $button-shadow-size: 3px;
   &--dropdown:focus:hover & {
     &__inner {
       color: var(--ons-color-text);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -326,7 +326,7 @@ $button-shadow-size: 3px;
       background: rgba(0, 0, 0, 0.2);
       border-color: rgba(255, 255, 255, 0.6);
       color: var(--ons-color-text-inverse);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse);
       }
     }
@@ -340,7 +340,7 @@ $button-shadow-size: 3px;
       background: var(--ons-color-black);
       border-color: var(--ons-color-black);
       color: var(--ons-color-white);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-white);
       }
     }
@@ -352,7 +352,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: var(--ons-color-focus);
       color: var(--ons-color-text-link-focus);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link-focus);
       }
     }
@@ -364,7 +364,7 @@ $button-shadow-size: 3px;
     &__inner {
       border-color: var(--ons-color-text-link-focus);
       box-shadow: 0 0 0 1px var(--ons-color-text-link-focus);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-black);
       }
     }
@@ -374,7 +374,7 @@ $button-shadow-size: 3px;
     &__inner {
       position: relative;
       transition: color 0.3s ease-in-out;
-      .ons-svg-icon {
+      .ons-icon {
         height: 27px;
         left: 50%;
         margin: 0;
@@ -389,7 +389,7 @@ $button-shadow-size: 3px;
   }
 
   &--loader.ons-btn--small {
-    .ons-svg-icon {
+    .ons-icon {
       height: 24px;
       width: 24px;
     }
@@ -398,7 +398,7 @@ $button-shadow-size: 3px;
   &--loader.ons-is-loading & {
     &__inner {
       color: transparent;
-      .ons-svg-icon {
+      .ons-icon {
         margin-left: 0 !important;
         opacity: 1;
       }
@@ -423,14 +423,14 @@ $button-shadow-size: 3px;
 
   &--mobile[aria-expanded='true'],
   &--text-link[aria-expanded='true'] {
-    .ons-svg-icon {
+    .ons-icon {
       transform: rotate(270deg);
     }
   }
 
   &--mobile,
   &--text-link {
-    .ons-svg-icon {
+    .ons-icon {
       transform: rotate(90deg);
     }
 
@@ -479,7 +479,7 @@ $button-shadow-size: 3px;
       padding: 0.6rem 1rem;
       text-align: left;
 
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-branded-text);
         float: right;
         margin-top: 3px;
@@ -491,7 +491,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: var(--ons-color-branded-secondary);
       color: var(--ons-color-white);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-white);
       }
     }
@@ -502,7 +502,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: var(--ons-color-branded-secondary);
       color: var(--ons-color-white);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-white);
       }
     }