Skip to content

Commit fff77ee

Browse files
laruisslaruiss
authored
Merge pull request #985 from dnum-mi/feat/dsfrSelect-hint
Feat/dsfr select hint
2 parents f4154d4 + 783249d commit fff77ee

File tree

4 files changed

+25
-17
lines changed

4 files changed

+25
-17
lines changed

‎src/components/DsfrNavigation/DsfrNavigationItem.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { render } from '@testing-library/vue'
22
// import '@gouvfr/dsfr/dist/core/core.module.js'
3-
import { useId } from 'vue'
43

54
import DsfrNavigationItem from './DsfrNavigationItem.vue'
65

76
describe('DsfrNavigationItem', () => {
87
it('should render a navigation item', () => {
98
const content = 'Contenu d’un item de menu de navigation'
10-
const id = useId()
9+
const id = 'dsfr-id'
1110
const { getByText } = render(DsfrNavigationItem, {
1211
props: {
1312
id,

‎src/components/DsfrSelect/DsfrSelect.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,20 @@ La liste déroulante fournit une liste d’option parmi lesquelles l’utilisate
1212

1313
## 🛠️ Props
1414

15-
| Nom | Type | Défaut | Obligatoire | Description |
16-
|-------------------------|---------------------------------------------------------------------------------------------|-----------------------------|:-----------:|------------------------------------------------------------------|
17-
| `modelValue` | `string \| number` | | | Valeur associée à l'option sélectionnée. |
18-
| `required` | `boolean` | | | Indique si le select est obligatoire. |
19-
| `disabled` | `boolean` | | | Indique si le select est désactivé. |
20-
| `options` | `(string \| undefined \| { value: string \| undefined, text: string disabled?: boolean})[]` | `[]` | | Options à sélectionner |
21-
| `label` | `string` | `''` | | Texte du label associé au select. |
22-
| `name` | `string` | | | Nom du champ. |
23-
| `description` | `string` | | | Si `true`, l'infobulle s'affiche au survol. |
24-
| `successMessage` | `string` | `''` | | Message de validation à afficher en dessous du select. |
25-
| `errorMessage` | `string` | `''` | | Message d'erreur à afficher en dessous du select. |
26-
| `defaultUnselectedText` | `string` | `'Sélectionner une option'` | | Si `true`, l'infobulle s'affiche au survol. |
27-
| `selectId` | `string` | `getRandomId('select')` | | Identifiant unique pour le select. Utilisé pour l'accessibilité. |
15+
| Nom | Type | Défaut | Obligatoire | Description |
16+
|--------------------------|---------------------------------------------------------------------------------------------|-----------------------------|:-----------:|------------------------------------------------------------------|
17+
| `modelValue` | `string \| number` | | | Valeur associée à l'option sélectionnée. |
18+
| `required` | `boolean` | | | Indique si le select est obligatoire. |
19+
| `disabled` | `boolean` | | | Indique si le select est désactivé. |
20+
| `options` | `(string \| undefined \| { value: string \| undefined, text: string disabled?: boolean})[]` | `[]` | | Options à sélectionner |
21+
| `label` | `string` | `''` | | Texte du label associé au select. |
22+
| `name` | `string` | | | Nom du champ. |
23+
| `description` deprecated | `string` | | | Deprecated, utiliser hint plutôt. |
24+
| `hint` | `string` | | | Texte d'indice pour guider. |
25+
| `successMessage` | `string` | `''` | | Message de validation à afficher en dessous du select. |
26+
| `errorMessage` | `string` | `''` | | Message d'erreur à afficher en dessous du select. |
27+
| `defaultUnselectedText` | `string` | `'Sélectionner une option'` | | Si `true`, l'infobulle s'affiche au survol. |
28+
| `selectId` | `string` | `getRandomId('select')` | | Identifiant unique pour le select. Utilisé pour l'accessibilité. |
2829

2930
## 📡 Évenements
3031

‎src/components/DsfrSelect/DsfrSelect.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export type DsfrSelectProps = {
55
selectId?: string
66
name?: string
77
description?: string
8+
hint?: string
89
modelValue?: DsfrSelectOption
910
label?: string
1011
options?: (DsfrSelectOption | { value: DsfrSelectOption, text: string, disabled?: boolean })[]

‎src/components/DsfrSelect/DsfrSelect.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,20 @@ const props = withDefaults(defineProps<DsfrSelectProps>(), {
1818
label: '',
1919
name: undefined,
2020
description: undefined,
21+
hint: undefined,
2122
successMessage: '',
2223
errorMessage: '',
2324
defaultUnselectedText: 'Sélectionner une option',
2425
})
2526
2627
defineEmits<{ (e: 'update:modelValue', payload: string | number): void }>()
2728
29+
if (props.description) {
30+
console.warn(
31+
'[DsfrSelect] : La prop `description` est dépréciée. Veuillez utiliser `hint` à la place.',
32+
)
33+
}
34+
2835
const message = computed(() => {
2936
return props.errorMessage || props.successMessage
3037
})
@@ -55,9 +62,9 @@ const messageType = computed(() => {
5562
</slot>
5663

5764
<span
58-
v-if="description"
65+
v-if="hint ?? description"
5966
class="fr-hint-text"
60-
>{{ description }}</span>
67+
>{{ hint ?? description }}</span>
6168
</label>
6269

6370
<select

0 commit comments

Comments
 (0)