feat(DsfrSelect): ✨ utilisation de hint pour la description, description devient deprecated

Author: iNeoO

src/components/DsfrSelect/DsfrSelect.md

@@ -12,19 +12,20 @@ La liste déroulante fournit une liste d’option parmi lesquelles l’utilisate
 
 ## 🛠️ Props
 
-| Nom                     | Type                                                                                        | Défaut                      | Obligatoire | Description                                                      |
-|-------------------------|---------------------------------------------------------------------------------------------|-----------------------------|:-----------:|------------------------------------------------------------------|
-| `modelValue`            | `string \| number`                                                                          |                             |             | Valeur associée à l'option sélectionnée.                         |
-| `required`              | `boolean`                                                                                   |                             |             | Indique si le select est obligatoire.                            |
-| `disabled`              | `boolean`                                                                                   |                             |             | Indique si le select est désactivé.                              |
-| `options`               | `(string \| undefined \| { value: string \| undefined, text: string disabled?: boolean})[]` | `[]`                        |             | Options à sélectionner                                           |
-| `label`                 | `string`                                                                                    | `''`                        |             | Texte du label associé au select.                                |
-| `name`                  | `string`                                                                                    |                             |             | Nom du champ.                                                    |
-| `description`           | `string`                                                                                    |                             |             | Si `true`, l'infobulle s'affiche au survol.                      |
-| `successMessage`        | `string`                                                                                    | `''`                        |             | Message de validation à afficher en dessous du select.           |
-| `errorMessage`          | `string`                                                                                    | `''`                        |             | Message d'erreur à afficher en dessous du select.                |
-| `defaultUnselectedText` | `string`                                                                                    | `'Sélectionner une option'` |             | Si `true`, l'infobulle s'affiche au survol.                      |
-| `selectId`              | `string`                                                                                    | `getRandomId('select')`     |             | Identifiant unique pour le select. Utilisé pour l'accessibilité. |
+| Nom                      | Type                                                                                        | Défaut                      | Obligatoire | Description                                                      |
+|--------------------------|---------------------------------------------------------------------------------------------|-----------------------------|:-----------:|------------------------------------------------------------------|
+| `modelValue`             | `string \| number`                                                                          |                             |             | Valeur associée à l'option sélectionnée.                         |
+| `required`               | `boolean`                                                                                   |                             |             | Indique si le select est obligatoire.                            |
+| `disabled`               | `boolean`                                                                                   |                             |             | Indique si le select est désactivé.                              |
+| `options`                | `(string \| undefined \| { value: string \| undefined, text: string disabled?: boolean})[]` | `[]`                        |             | Options à sélectionner                                           |
+| `label`                  | `string`                                                                                    | `''`                        |             | Texte du label associé au select.                                |
+| `name`                   | `string`                                                                                    |                             |             | Nom du champ.                                                    |
+| `description` deprecated | `string`                                                                                    |                             |             | Deprecated, utiliser hint plutôt.                                |
+| `hint`                   | `string`                                                                                    |                             |             | Texte d'indice pour guider.                                      |
+| `successMessage`         | `string`                                                                                    | `''`                        |             | Message de validation à afficher en dessous du select.           |
+| `errorMessage`           | `string`                                                                                    | `''`                        |             | Message d'erreur à afficher en dessous du select.                |
+| `defaultUnselectedText`  | `string`                                                                                    | `'Sélectionner une option'` |             | Si `true`, l'infobulle s'affiche au survol.                      |
+| `selectId`               | `string`                                                                                    | `getRandomId('select')`     |             | Identifiant unique pour le select. Utilisé pour l'accessibilité. |
 
 ## 📡 Évenements
 

src/components/DsfrSelect/DsfrSelect.types.ts

@@ -5,6 +5,7 @@ export type DsfrSelectProps = {
   selectId?: string
   name?: string
   description?: string
+  hint?: string
   modelValue?: DsfrSelectOption
   label?: string
   options?: (DsfrSelectOption | { value: DsfrSelectOption, text: string, disabled?: boolean })[]

src/components/DsfrSelect/DsfrSelect.vue

@@ -18,13 +18,20 @@ const props = withDefaults(defineProps<DsfrSelectProps>(), {
   label: '',
   name: undefined,
   description: undefined,
+  hint: undefined,
   successMessage: '',
   errorMessage: '',
   defaultUnselectedText: 'Sélectionner une option',
 })
 
 defineEmits<{ (e: 'update:modelValue', payload: string | number): void }>()
 
+if (props.description) {
+  console.warn(
+    '[DsfrSelect] : La prop `description` est dépréciée. Veuillez utiliser `hint` à la place.',
+  )
+}
+
 const message = computed(() => {
   return props.errorMessage || props.successMessage
 })
@@ -55,9 +62,9 @@ const messageType = computed(() => {
       </slot>
 
       <span
-        v-if="description"
+        v-if="hint ?? description"
         class="fr-hint-text"
-      >{{ description }}</span>
+      >{{ hint ?? description }}</span>
     </label>
 
     <select