tech(pix-*-select): update icon

1024pix · Oct 11, 2024 · d6ac1b9 · d6ac1b9
1 parent e7b7bc8
commit d6ac1b9
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 28 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
@@ -32,15 +32,15 @@
         aria-controls={{this.listId}}
         aria-disabled={{@isDisabled}}
       >
-        {{#if @icon}}
-          <FaIcon @icon={{@icon}} />
+        {{#if @iconName}}
+          <PixIcon @name={{@iconName}} @plainIcon={{@plainIcon}} class="pix-select-button__icon" />
         {{/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 "chevronTop" "chevronBottom"}}
         />
       </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/addon/styles/_pix-multi-select.scss b/addon/styles/_pix-multi-select.scss
@@ -33,7 +33,7 @@
   }
 
   &__search-icon {
-    color: var(--pix-neutral-900);
+    fill: var(--pix-neutral-900);
   }
 
   &__title {
@@ -58,8 +58,8 @@
   &__dropdown-icon {
     @extend %pix-body-s;
 
-    color: var(--pix-neutral-900);
     pointer-events: none;
+    fill: var(--pix-neutral-900);
   }
 }
 

diff --git a/addon/styles/_pix-select.scss b/addon/styles/_pix-select.scss
@@ -102,6 +102,10 @@
   border-radius: var(--pix-spacing-1x);
   cursor: pointer;
 
+  &__icon {
+    fill: var(--pix-neutral-900);
+  }
+
   &--error {
     @extend %pix-form-error-state;
   }
@@ -115,8 +119,8 @@
   &__dropdown-icon {
     @extend %pix-body-s;
 
-    color: var(--pix-neutral-900);
     pointer-events: none;
+    fill: var(--pix-neutral-900);
   }
 }
 
@@ -153,7 +157,6 @@
       position: absolute;
       top: 50%;
       right: var(--pix-spacing-2x);
-      font-size: 1.125rem;
       transform: translateY(-50%);
       visibility: hidden;
       opacity: 0;
@@ -195,5 +198,6 @@
 
   &__icon {
     margin: auto var(--pix-spacing-1x);
+    fill: var(--pix-neutral-100)
   }
 }
diff --git a/app/stories/pix-select.mdx b/app/stories/pix-select.mdx
@@ -69,7 +69,7 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
   @requiredLabel="{{requiredLabel}}"
   @errorMessage="{{errorMessage}}"
   @placement="{{placement}}"
-  @icon="{{icon}}"
+  @iconName="{{icon}}"
 >
 <:label>{{label}}</:label>
 </PixSelect>

diff --git a/app/stories/pix-select.stories.js b/app/stories/pix-select.stories.js
@@ -1,5 +1,6 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
+import { ICONS } from '../../addon/helpers/icons';
 
 export default {
   title: 'Form/Select',
@@ -140,14 +141,22 @@ export default {
         defaultValue: { summary: 'bottom-start' },
       },
     },
-    icon: {
-      name: 'icon',
+    iconName: {
+      name: 'iconName',
       description:
-        "Permet l'affichage d'une icône FontAwesome avant le placeholder ou le label de l'option sélectionnée.",
-      type: { name: 'string', required: false },
+        "Permet l'affichage d'une icône **avant** le placeholder ou le label de l'option sélectionnée.",
+      type: { name: 'string', required: true },
+      control: { type: 'select' },
+      options: Object.keys(ICONS),
+    },
+    plainIcon: {
+      name: 'plainIcon',
+      description: "Permet d'utiliser la version pleine de l'icône",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
       table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: null },
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
       },
     },
     isComputeWidthDisabled: {
@@ -159,7 +168,6 @@ export default {
         type: { summary: false },
       },
     },
-
     label: {
       name: 'label',
       description: 'Le label du champ',
@@ -234,7 +242,8 @@ const Template = (args) => {
   @errorMessage={{this.errorMessage}}
   @isDisabled={{this.isDisabled}}
   @placement={{this.placement}}
-  @icon={{this.icon}}
+  @iconName={{this.iconName}}
+  @plainIcon={{this.plainIcon}}
   @size={{this.size}}
   @subLabel={{this.subLabel}}
   @inlineLabel={{this.inlineLabel}}
@@ -433,7 +442,7 @@ WithDropDownAtTheTop.args = {
 
 export const WithIcon = Template.bind({});
 WithIcon.args = {
-  icon: 'earth-europe',
+  iconName: 'users',
   isSearchable: false,
   label: 'With icon',
   onChange: action('onChange'),

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 @iconName='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'));
       });
     });
   });