fix: problèmes de taille des champs + Ajout d'un playground form (#42)

| 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é

Reviewed-on: #42
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/checkbox/Checkbox.vue

@@ -101,14 +101,14 @@ const mergedGroupClass = computed(() =>
 
 const mergedInputClass = computed(() =>
   twMerge(
-    'inp-cbx peer',
+    'inp-cbx peer ',
     props.inputClass,
   ),
 )
 
 const mergedLabelClass = computed(() =>
   twMerge(
-    'cbx text-black',
+    'cbx text-black text-lg',
     disabled.value ? 'cursor-not-allowed text-black/60' : '',
     hasError.value ? 'text-m-error' : '',
     hasSuccess.value ? 'text-m-success' : '',

app/components/malio/input/InputTextArea.vue

@@ -7,15 +7,15 @@
       :name="name"
 
       :autocomplete="autocomplete"
-      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
+      class="floating-input peer w-full border-2 bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
       :class="[
       isFilled ? 'border-black' : 'border-m-muted',
       disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
       hasError
-        ? 'border-m-danger focus:border-m-danger focus:pl-[11px]'
+        ? 'border-m-danger focus:border-m-danger'
         : hasSuccess
-          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
-          : 'focus:border-m-primary focus:pl-[11px]',
+          ? 'border-m-success focus:border-m-success'
+          : 'focus:border-m-primary',
       textInput,
       showCounterComputed ? 'pb-6' : '',
       rounded,

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

@@ -16,8 +16,6 @@ type SelectProps = {
   hint?: string
   error?: string
   success?: string
-  minWidth?: string
-  maxWidth?: string
   textField?: string
   textValue?: string
   textLabel?: string

app/components/malio/select/Select.vue

@@ -101,8 +101,8 @@
       class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
       :class="[
         openDirection === 'down'
-          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
-          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+          ? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
         hasError
           ? 'select-scrollbar-error'
           : hasSuccess
@@ -171,8 +171,6 @@ const props = withDefaults(defineProps<{
   hint?: string
   error?: string
   success?: string
-  minWidth?: string
-  maxWidth?: string
   textField?: string
   textValue?: string
   textLabel?: string
@@ -186,8 +184,6 @@ const props = withDefaults(defineProps<{
   hint: '',
   error: '',
   success: '',
-  minWidth: 'w-96',
-  maxWidth: '',
   textField: 'text-lg',
   textValue: 'text-lg',
   textLabel: 'text-sm',
@@ -213,7 +209,7 @@ const normalizedOptions = computed<Option[]>(() => {
   return [{label: props.emptyOptionLabel, value: null}, ...props.options]
 })
 const mergedGroupClass = computed(() =>
-  twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
+  twMerge('relative w-full h-12 flex items-center', props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)

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

@@ -16,8 +16,6 @@ type SelectCheckboxProps = {
   hint?: string
   error?: string
   success?: string
-  minWidth?: string
-  maxWidth?: string
   textField?: string
   textValue?: string
   textLabel?: string
@@ -177,15 +175,6 @@ describe('MalioSelectCheckbox', () => {
     expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
   })
 
-  it('applies minWidth via twMerge so it overrides w-full (parity with MalioSelect)', () => {
-    const wrapper = mount(SelectCheckboxForTest, {
-      props: {modelValue: [], options: [], minWidth: 'w-80'},
-    })
-    const root = wrapper.find('button').element.parentElement
-    expect(root?.className).toContain('w-80')
-    expect(root?.className).not.toContain('w-full')
-  })
-
   it('applies groupClass via twMerge', () => {
     const wrapper = mount(SelectCheckboxForTest, {
       props: {modelValue: [], options: [], groupClass: 'mt-4'},

app/components/malio/select/SelectCheckbox.vue

@@ -129,8 +129,8 @@
       class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
       :class="[
         openDirection === 'down'
-          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
-          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+          ? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
         hasError
           ? 'select-scrollbar-error'
           : hasSuccess
@@ -222,8 +222,6 @@ const props = withDefaults(defineProps<{
   hint?: string
   error?: string
   success?: string
-  minWidth?: string
-  maxWidth?: string
   textField?: string
   textValue?: string
   textLabel?: string
@@ -240,8 +238,6 @@ const props = withDefaults(defineProps<{
   hint: '',
   error: '',
   success: '',
-  minWidth: 'w-96',
-  maxWidth: '',
   textField: 'text-lg',
   textValue: 'text-lg',
   textLabel: 'text-sm',
@@ -267,7 +263,7 @@ const listRef = ref<HTMLElement | null>(null)
 const listHeight = ref(0)
 const normalizedOptions = computed<Option[]>(() => props.options)
 const mergedGroupClass = computed(() =>
-  twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
+  twMerge('relative w-full h-12 flex items-center', props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)