tech(pix-*-select): update icon

1024pix · Sep 27, 2024 · 54aac03 · 54aac03
1 parent 451d14a
commit 54aac03
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/addon/components/pix-multi-select.hbs b/addon/components/pix-multi-select.hbs
@@ -20,7 +20,7 @@
 
     {{#if @isSearchable}}
       <span {{reference}} class={{this.headerClassName}}>
-        <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
+        <PixIcon @name="search" class="pix-multi-select-header__search-icon" />
 
         <input
           class="pix-multi-select-header__search-input"
@@ -52,10 +52,10 @@
         {{else if @placeholder}}
           {{this.placeholder}}
         {{/if}}
-        <FaIcon
+        <PixIcon
           class="pix-multi-select-header__dropdown-icon
             {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
-          @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+          @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
         />
       </button>
     {{/if}}

diff --git a/addon/components/pix-select.hbs b/addon/components/pix-select.hbs
@@ -33,14 +33,14 @@
         aria-disabled={{@isDisabled}}
       >
         {{#if @icon}}
-          <FaIcon @icon={{@icon}} />
+          <PixIcon @name={{@icon}} role="img" />
         {{/if}}
 
         <span class="pix-select-button__text">{{this.placeholder}}</span>
 
-        <FaIcon
+        <PixIcon
           class="pix-select-button__dropdown-icon"
-          @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+          @name={{if this.isExpanded "chevronUp" "chevronDown"}}
         />
       </button>
       <div
@@ -50,7 +50,7 @@
       >
         {{#if @isSearchable}}
           <div class="pix-select__search">
-            <FaIcon class="pix-select-search__icon" @icon="magnifying-glass" />
+            <PixIcon class="pix-select-search__icon" @name="search" />
             <label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
             <input
               class="pix-select-search__input"
@@ -116,7 +116,7 @@
                       {{option.label}}
 
                       {{#if (eq option.value @value)}}
-                        <FaIcon @icon="check" role="presentation" />
+                        <PixIcon @name="check" role="presentation" />
                       {{/if}}
                     </li>
                   {{/each}}
@@ -139,7 +139,7 @@
                   {{option.label}}
 
                   {{#if (eq option.value @value)}}
-                    <FaIcon @icon="check" role="presentation" />
+                    <PixIcon @name="check" role="presentation" />
                   {{/if}}
                 </li>
               {{/each}}

diff --git a/tests/integration/components/pix-select-test.js b/tests/integration/components/pix-select-test.js
@@ -650,13 +650,13 @@ module('Integration | Component | PixSelect', function (hooks) {
     module('when an icon name is provided', function () {
       test('displays an icon', async function (assert) {
         // given & when
-        await render(
-          hbs`<PixSelect @icon='earth-europe' @options={{this.options}}><:label
-  >{{this.label}}</:label></PixSelect>`,
+        const screen = await render(
+          hbs`<PixSelect @icon='globe' @options={{this.options}}><:label>{{this.label}}</:label></PixSelect>`,
         );
 
+        const svg = screen.getAllByRole('img')[0].innerHTML;
         // then
-        assert.dom('.fa-earth-europe').exists();
+        assert.true(svg.includes('#globe'));
       });
     });
   });