feat(front): date range field component - #1043
Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces a new composite form field component for capturing a duration (days/hours/minutes) in the frontend, along with the necessary i18n resources and unit tests.
Changes:
- Add
DateRangeFieldcomponent rendering threeNumberFieldinputs (days/hours/minutes) within afieldset. - Register a new
durationi18n namespace and its typed resources. - Add unit tests for the new field component.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| front/src/i18n/locales/en/duration.json | Adds English strings for duration units (days/hours/minutes). |
| front/src/i18n/index.ts | Registers the new duration namespace in the i18n initialization. |
| front/src/i18n/@types/resources.ts | Adds duration to the typed i18n resources map. |
| front/src/components/fields/DateRangeField/DateRangeField.tsx | Implements the composite field UI (days/hours/minutes) using NumberField. |
| front/src/components/fields/DateRangeField/DateRangeField.scss | Styles layout and sizing for the composite field. |
| front/src/components/fields/DateRangeField/tests/DateRangeField.test.tsx | Adds unit tests for rendering, error display, and typing behavior. |
| span { | ||
| font-weight: normal; | ||
| color: var(--color-error); | ||
| } |
There was a problem hiding this comment.
il faudrait peut-être cibler une classe directement non ?
De plus je pense qu'il faudrait qu'on voit comment mieux gérer l'emplacement des erreurs 🤔
Qu'en penses-tu ?
Voici ce qu'il y a actuellement :
There was a problem hiding this comment.
Je ne sais pas trop comment gérer l'emplacement car je fais des row-reverse pour bien correspondre à la maquette, et donc quand l'erreur s'affiche, ça nous rajoute une div
<div class="ds-input"><label for="_r_0_" class="ds-label-input">days<span aria-hidden="true">*</span></label><input class="ds-number-input-atom" id="_r_0_" aria-invalid="true" required="" min="0" max="21" type="number" name="duration.days" aria-describedby="_r_0_-error"><div class="ds-input-error-message" role="alert"><span id="_r_0_-error">requiredDays</span></div></div>
Faudrait-il revoir l'affichage du flex quand une erreur s'affiche et mettre tout en colonne ?
Je ne sais pas ce que t'en penses, je n'ai pas vraiment d'idées
There was a problem hiding this comment.
Faire un composant DurationInput en utilisant les atomes NumberInputAtom et LabelInput.
Gérer le react hook form (comme dans le composant Field) directement dans le composant DurationField.
Aligner en colonne en dessous des inputs les erreurs (composant ErrorMessageInput) lié via un id à chaque input. (génération d'id via useId et personalisation de celui-ci avec un modifier pour chaque input days, hours et minutes)
| return ( | ||
| <fieldset className={parentClassName}> | ||
| <legend className="ds-date-range-field__legend"> | ||
| <legend className={`${parentClassName}__legend`}> |
There was a problem hiding this comment.
duration-field classname_legend
Ce que tu peux faire c'est avoir une constante default classname que tu réutilises dans le getClassname, maiss aussi comme base pour tes classname dans le composant
There was a problem hiding this comment.
Pourtant dans le scss en faisant &__legend ça fonctionne bien et dans mon navigateur j'ai bien duration-field__legend en className, ou alors je n'ai pas bien compris ce que tu veux dire par "l'utilisateur rajoute une classname"
Introduces a new composite form field component for capturing a duration (days/hours/minutes) in the frontend, along with the necessary i18n resources and unit tests.
Changes:
Add DateRangeField component rendering three NumberField inputs (days/hours/minutes) within a fieldset.
Register a new duration i18n namespace and its typed resources.
Add unit tests for the new field component.