feat(select-slist): enhance selection list

1024pix · Jan 30, 2025 · 9e194ad · 9e194ad
1 parent 3259c60
commit 9e194ad
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 47 deletions.
diff --git a/addon/components/pix-select-list.hbs b/addon/components/pix-select-list.hbs
@@ -1,18 +1,20 @@
 <ul role="listbox" id={{@listId}} class="pix-select_list" ...attributes>
-  <li
-    class="pix-select-list-category__option{{unless
-        @value
-        ' pix-select-list-category__option--selected'
-      }}{{unless @displayDefaultOption ' pix-select-list-category__option--hidden'}}"
-    role="option"
-    tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
-    aria-selected={{if @value "false" "true"}}
-    {{on "click" (fn @onChange @defaultOption)}}
-    {{on-enter-action (fn @onChange @defaultOption)}}
-    {{on-space-action (fn @onChange @defaultOption)}}
-  >
-    {{@defaultOptionValue}}
-  </li>
+  {{#if @displayDefaultOption}}
+    <li
+      class="pix-select-list-category__option pix-select-list-category__option--default{{unless
+          @value
+          ' pix-select-list-category__option--selected'
+        }}"
+      role="option"
+      tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
+      aria-selected={{if @value "false" "true"}}
+      {{on "click" (fn @onChange @defaultOption)}}
+      {{on-enter-action (fn @onChange @defaultOption)}}
+      {{on-space-action (fn @onChange @defaultOption)}}
+    >
+      {{@defaultOptionValue}}
+    </li>
+  {{/if}}
   {{#if this.results}}
     {{#if this.displayCategory}}
       {{#each this.results as |element index|}}

diff --git a/addon/styles/_pix-select-list.scss b/addon/styles/_pix-select-list.scss
@@ -1,38 +1,38 @@
 @use "pix-design-tokens/typography";
 
 .pix-select_list {
-  padding: var(--pix-spacing-2x);
-  border-top: 1px solid var(--pix-neutral-20);
-
-  --border-radius-2x: var(--pix-spacing-2x);
-
+  display: flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-1x);
+  padding: var(--pix-spacing-2x) var(--pix-spacing-1x);
 }
 
 .pix-select-list-category {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-1x);
   margin: 0;
   padding: 0;
   list-style: none;
 
   &__name {
     @extend %pix-body-s;
 
-    padding: var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-2x) var(--pix-spacing-4x);
-    color: var(--pix-neutral-500);
-    text-transform: uppercase;
+    padding: var(--pix-spacing-1x) var(--pix-spacing-3x);
+    color: var(--pix-neutral-800);
+    font-weight: var(--pix-font-bold);
+    text-transform: capitalize;
+    background-color: var(--pix-neutral-20);
   }
 
   &__option {
     @extend %pix-body-s;
 
     position: relative;
-    padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-4x);
+    padding: var(--pix-spacing-2x) var(--pix-spacing-10x) var(--pix-spacing-2x) var(--pix-spacing-4x);
     color: var(--pix-neutral-900);
     border-radius: 8px;
 
-    &:nth-child(even) {
-      background-color: var(--pix-neutral-20);
-    }
-
     &:hover,
     &:focus {
       background-color: var(--pix-primary-10);
@@ -43,27 +43,18 @@
     svg {
       position: absolute;
       top: 50%;
-      right: var(--pix-spacing-2x);
+      right: var(--pix-spacing-3x);
       transform: translateY(-50%);
-      visibility: hidden;
-      opacity: 0;
     }
 
     &--selected {
-      align-items: center;
+      color: var(--pix-primary-900);
+      font-weight: var(--pix-font-bold);
       background-color: var(--pix-primary-10);
-
-      svg {
-        visibility: visible;
-        opacity: 1;
-      }
     }
 
-    &--hidden {
-      height: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      visibility: hidden;
+    &--default {
+      margin-bottom: var(--pix-spacing-1x);
     }
   }
 }

diff --git a/addon/styles/_pix-select.scss b/addon/styles/_pix-select.scss
@@ -64,7 +64,7 @@
 
   &__search {
     display: flex;
-    margin: var(--pix-spacing-4x) var(--pix-spacing-6x);
+    margin: var(--pix-spacing-2x) var(--pix-spacing-3x);
     color: var(--pix-neutral-100);
     border-bottom: 2px solid var(--pix-neutral-100);
     border-radius: var(--pix-spacing-1x) var(--pix-spacing-1x) 0 0;

diff --git a/tests/dummy/app/controllers/select-page.js b/tests/dummy/app/controllers/select-page.js
@@ -18,14 +18,15 @@ export default class SelectPage extends Controller {
 
   get options() {
     return [
-      { value: '1', label: 'Figues' },
-      { value: '3', label: 'Fraises' },
-      { value: '2', label: 'Bananes' },
-      { value: '4', label: 'Mangues' },
-      { value: '5', label: 'Kaki' },
+      { value: '1', label: 'Figues', category: 'rouge' },
+      { value: '3', label: 'Fraises', category: 'rouge' },
+      { value: '2', label: 'Bananes', category: 'jaune' },
+      { value: '4', label: 'Mangues', category: 'jaune' },
+      { value: '5', label: 'Kaki', category: 'vert' },
       {
         value: '6',
         label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+        category: 'vert'
       },
     ];
   }