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

1024pix · Jan 14, 2025 · f52e5c8 · f52e5c8
1 parent 571aab4
commit f52e5c8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 51 deletions.
diff --git a/addon/components/pix-filter-banner.hbs b/addon/components/pix-filter-banner.hbs
@@ -1,32 +1,36 @@
 <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
+              class="pix-filter-banner__button"
+              @variant="tertiary"
+              @size="small"
+              @triggerAction={{@onClearFilters}}
+              @isDisabled={{@isClearFilterButtonDisabled}}
+            >
+              {{@clearFiltersLabel}}
+            </PixButton>
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
 </div>
diff --git a/addon/styles/_pix-filter-banner.scss b/addon/styles/_pix-filter-banner.scss
@@ -1,31 +1,27 @@
 @use "pix-design-tokens/breakpoints";
-@use "pix-design-tokens/shadows";
 
 .pix-filter-banner {
-  @extend %pix-shadow-sm;
-
-  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;
+    color: var(--pix-neutral-800);
   }
 
-  &__container-filter {
+  &__filter {
     display: flex;
     flex-direction: column;
     gap: var(--pix-spacing-4x);
   }
 
-  &__container-action {
+  &__action {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -51,23 +47,20 @@
 
 @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 {
-      flex-direction: row;
+    &__filter {
+      //flex-direction: row;
       flex-grow: 2;
       flex-wrap: wrap;
       align-items: center;
     }
 
-    &__container-action {
+    &__action {
       flex-direction: row;
       border: none;
     }

diff --git a/app/stories/pix-filter-banner.stories.js b/app/stories/pix-filter-banner.stories.js
@@ -26,7 +26,7 @@ export default {
     },
     isClearFilterButtonDisabled: {
       name: 'isClearFilterButtonDisabled',
-      description: 'Désactiver le button de la suppresion des filtres',
+      description: 'Désactiver le button de la suppression des filtres',
       type: { name: 'boolean', required: true },
       control: { type: 'boolean' },
       table: {
@@ -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: [