♻️ feat(pix-ui): Change pixFilter appearance

addon/components/pix-filter-banner.hbs

@@ -1,32 +1,37 @@
 <div class="pix-filter-banner" ...attributes>
   {{#if this.displayTitle}}
-    <div class="pix-filter-banner__container-title">
-      <p class="pix-filter-banner__title">{{@title}}</p>
-    </div>
+    <p class="pix-filter-banner__title">
+      <PixIcon @name="filter" @plainIcon={{true}} />
+      {{@title}}
+    </p>
   {{/if}}
 
-  <div class="pix-filter-banner__container-filter">
-    {{yield}}
-  </div>
+  <div class="pix-filter-banner__container">
+    <div class="pix-filter-banner__filter">
+      {{yield}}
+    </div>
 
-  {{#if this.displayActionMenu}}
-    <div class="pix-filter-banner__container-action">
-      {{#if this.displayDetails}}
-        <p class="pix-filter-banner__details">{{@details}}</p>
-      {{/if}}
+    {{#if this.displayActionMenu}}
+      <div class="pix-filter-banner__action">
+        {{#if this.displayDetails}}
+          <p class="pix-filter-banner__details">{{@details}}</p>
+        {{/if}}
 
-      {{#if this.displayClearFilters}}
-        <div class="pix-filter-banner__button-container">
-          <PixButton
-            class="pix-filter-banner__button"
-            @size="small"
-            @triggerAction={{@onClearFilters}}
-            @isDisabled={{@isClearFilterButtonDisabled}}
-          >
-            {{@clearFiltersLabel}}
-          </PixButton>
-        </div>
-      {{/if}}
-    </div>
-  {{/if}}
+        {{#if this.displayClearFilters}}
+          <div class="pix-filter-banner__button-container">
+            <PixButton
+              @iconBefore="delete"
+              class="pix-filter-banner__button"
+              @variant="tertiary"
+              @size="small"
+              @triggerAction={{@onClearFilters}}
+              @isDisabled={{@isClearFilterButtonDisabled}}
+            >
+              {{@clearFiltersLabel}}
+            </PixButton>
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
 </div>

addon/styles/_pix-filter-banner.scss

@@ -1,46 +1,44 @@
 @use "pix-design-tokens/breakpoints";
-@use "pix-design-tokens/shadows";
 
 .pix-filter-banner {
-  @extend %pix-shadow-sm;
+  font-size: 0.875rem;
 
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pix-spacing-2x);
-  width: 100%;
-  min-height: 64px;
-  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
-  background-color: var(--pix-neutral-0);
+  &__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--pix-spacing-2x);
+    width: 100%;
+    min-height: 64px;
+  }
 
   &__title {
-    margin: 0;
-    color: var(--pix-neutral-500);
-    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--pix-spacing-1x);
+    color: var(--pix-neutral-800);
+    line-height: 20px;
   }
 
-  &__container-filter {
+  &__filter {
     display: flex;
     flex-direction: column;
     gap: var(--pix-spacing-4x);
   }
 
-  &__container-action {
+  &__action {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    border-top: 1px solid var(--pix-neutral-20);
+    align-items: flex-end;
   }
 
   &__details {
-    margin: 0;
-    padding: var(--pix-spacing-2x) 0 var(--pix-spacing-2x) 0;
-    color: var(--pix-neutral-500);
+    padding: 0;
     font-weight: var(--pix-font-medium);
-    font-size: 0.875rem;
   }
 
   &__button {
+    padding: 0;
     font-size: 0.875rem;
   }
 }
@@ -51,36 +49,17 @@
 
 @include breakpoints.device-is('tablet') {
   .pix-filter-banner {
-    flex-direction: row;
-    gap: var(--pix-spacing-6x);
-    align-items: center;
-
-    &__container-title {
-      display: flex;
+    &__container {
+      flex-direction: row;
+      gap: var(--pix-spacing-6x);
       align-items: center;
     }
 
-    &__container-filter {
+    &__filter {
       flex-direction: row;
       flex-grow: 2;
       flex-wrap: wrap;
       align-items: center;
     }
-
-    &__container-action {
-      flex-direction: row;
-      border: none;
-    }
-
-    &__details {
-      padding: 0 var(--pix-spacing-4x) 0 0;
-      text-align: center;
-      border: none;
-    }
-
-    &__button-container {
-      padding-left: var(--pix-spacing-4x);
-      border-left: 1px solid var(--pix-neutral-20);
-    }
   }
 }

app/stories/pix-filter-banner.stories.js

@@ -21,12 +21,12 @@ export default {
     },
     onClearFilters: {
       name: 'onClearFilters',
-      description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
+      description: 'Fonction à appeler pour déclencher l’action de suppression des filtres',
       type: { required: false },
     },
     isClearFilterButtonDisabled: {
       name: 'isClearFilterButtonDisabled',
-      description: 'Désactiver le button de la suppresion des filtres',
+      description: 'Désactiver le bouton de suppression des filtres',
       type: { name: 'boolean', required: true },
       control: { type: 'boolean' },
       table: {
@@ -50,23 +50,23 @@ export const filterBanner = (args) => {
     @options={{this.options}}
     @onChange={{this.onChange}}
     @screenReaderOnly={{true}}
-    @placeholder='placeholer'
+    @placeholder='placeholder'
   >
     <:label>mon label</:label>
   </PixSelect>
   <PixSelect
     @options={{this.options}}
     @onChange={{this.onChange}}
     @screenReaderOnly={{true}}
-    @placeholder='placeholer'
+    @placeholder='placeholder'
   >
     <:label>mon label</:label>
   </PixSelect>
   <PixSelect
     @options={{this.options}}
     @onChange={{this.onChange}}
     @screenReaderOnly={{true}}
-    @placeholder='placeholer'
+    @placeholder='placeholder'
   >
     <:label>mon label</:label>
   </PixSelect>
@@ -75,7 +75,7 @@ export const filterBanner = (args) => {
   };
 };
 filterBanner.args = {
-  title: 'Filtres',
+  title: 'Filtrer par :',
   details: 'Des détails sur le filtre',
   clearFiltersLabel: 'Effacer les filtres',
   options: [