fix: plusieurs retours UX/UI (#58)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #58
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/select/Select.test.ts

@@ -207,4 +207,70 @@ describe('MalioSelect', () => {
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
     expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
   })
+
+  it('shows muted chevron color when empty and closed', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows primary chevron color when open', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-primary')
+  })
+
+  it('shows black chevron color when an option is selected and closed', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: 'fr', options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
+  })
+
+  it('shows muted chevron color when disabled', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: 'fr', options, disabled: true},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows danger chevron color on error even when open', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options, error: 'Selection error'},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success chevron color on success', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options, success: 'OK'},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
+  })
+
+  it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const buttonClasses = wrapper.get('button').classes()
+    // !border-b-0 would shrink the bottom border to 0px and grow content area by 1px;
+    // !border-b-transparent keeps the 1px allocation but hides the line
+    expect(buttonClasses).not.toContain('!border-b-0')
+    expect(buttonClasses).toContain('!border-b-transparent')
+  })
 })

app/components/malio/select/Select.vue

@@ -13,19 +13,19 @@
           hasError
             ? isOpen
               ? openDirection === 'down'
-                ? 'rounded-b-none !border !border-m-danger !border-b-0'
-                : 'rounded-t-none !border !border-m-danger !border-t-0'
+                ? 'rounded-b-none !border !border-m-danger !border-b-transparent'
+                : 'rounded-t-none !border !border-m-danger !border-t-transparent'
               : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-success !border-b-0'
-                  : 'rounded-t-none !border !border-m-success !border-t-0'
+                  ? 'rounded-b-none !border !border-m-success !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-success !border-t-transparent'
                 : 'border-m-success'
               : isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border !border-m-primary !border-t-0'
+                  ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-primary !border-t-transparent'
                 : isOptionSelected
                   ? 'border-black'
                   : 'border-m-muted',
@@ -73,13 +73,20 @@
       </span>
 
       <span
+        data-test="chevron"
         class="absolute right-3 top-1/2 -translate-y-1/2"
         :class="[
           hasError
             ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
-              : 'text-current'
+              : disabled
+                ? 'text-m-muted'
+                : isOpen
+                  ? 'text-m-primary'
+                  : isOptionSelected
+                    ? 'text-black'
+                    : 'text-m-muted'
         ]"
       >
       <slot name="icon">
@@ -145,7 +152,6 @@
     </ul>
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${buttonId}-describedby`"
       :class="[
         hasError
@@ -153,7 +159,7 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}
@@ -330,12 +336,7 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
 }
 
 .grow-height {
-  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
-}
-
-.grow-height:focus {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
 @media (prefers-reduced-motion: reduce) {

app/components/malio/select/SelectCheckbox.test.ts

@@ -182,4 +182,70 @@ describe('MalioSelectCheckbox', () => {
     const root = wrapper.find('button').element.parentElement
     expect(root?.className).toContain('mt-4')
   })
+
+  it('shows muted chevron color when nothing is selected and closed', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows primary chevron color when open', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-primary')
+  })
+
+  it('shows black chevron color when options are selected and closed', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
+  })
+
+  it('shows muted chevron color when disabled', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options, disabled: true},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows danger chevron color on error even when open', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, error: 'Selection error'},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success chevron color on success', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, success: 'OK'},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
+  })
+
+  it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const buttonClasses = wrapper.get('button').classes()
+    // !border-b-0 would shrink the bottom border to 0px and grow content area by 1px;
+    // !border-b-transparent keeps the 1px allocation but hides the line
+    expect(buttonClasses).not.toContain('!border-b-0')
+    expect(buttonClasses).toContain('!border-b-transparent')
+  })
 })

app/components/malio/select/SelectCheckbox.vue

@@ -13,19 +13,19 @@
           hasError
             ? isOpen
               ? openDirection === 'down'
-                ? 'rounded-b-none !border !border-m-danger !border-b-0'
-                : 'rounded-t-none !border !border-m-danger !border-t-0'
+                ? 'rounded-b-none !border !border-m-danger !border-b-transparent'
+                : 'rounded-t-none !border !border-m-danger !border-t-transparent'
               : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-success !border-b-0'
-                  : 'rounded-t-none !border !border-m-success !border-t-0'
+                  ? 'rounded-b-none !border !border-m-success !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-success !border-t-transparent'
                 : 'border-m-success'
               : isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border !border-m-primary !border-t-0'
+                  ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-primary !border-t-transparent'
                 : isOptionSelected
                   ? 'border-black'
                   : 'border-m-muted',
@@ -101,13 +101,20 @@
       </span>
 
       <span
+        data-test="chevron"
         class="absolute right-3 top-1/2 -translate-y-1/2"
         :class="[
           hasError
             ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
-              : 'text-current'
+              : disabled
+                ? 'text-m-muted'
+                : isOpen
+                  ? 'text-m-primary'
+                  : isOptionSelected
+                    ? 'text-black'
+                    : 'text-m-muted'
         ]"
       >
       <slot name="icon">
@@ -194,7 +201,6 @@
     </ul>
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${buttonId}-describedby`"
       :class="[
         hasError
@@ -202,7 +208,7 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}
@@ -409,12 +415,7 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
 }
 
 .grow-height {
-  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
-}
-
-.grow-height:focus {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
 @media (prefers-reduced-motion: reduce) {