feat(MoneyInput): Ajoute un money-input qui formate la valeur entrée en fonction de la langue #118
Conversation
maxime-gendron
changed the title
| const InputWrapper = styled.div<{language: Language}>` | ||
| input { | ||
| text-align: ${({ language }) => language === 'en' ? 'left' : 'right'}; | ||
| width: 128px; |
There was a problem hiding this comment.
Est-ce qu'on veut vraiment avoir une largeur fix?
There was a problem hiding this comment.
J'ai regardé avec @maboilard et idéalement on aurait un min-width et si la valeur entrée excède cette largeur l'input s'adapte. Je vais regarder ce que je peux faire pour ça. J'avais essayé l'autre fois et c'était weird avec text-input.
There was a problem hiding this comment.
J'ai réussi à figure out une solution pour que la largeur de l'input devienne dynamique en haut d'un certain nombre de caractères. J'ai donc ramené la largeur par défaut comme sur les maquettes (116px).
There was a problem hiding this comment.
hum pas certain que ce soit le comportement qu'on veut avoir.
Il se passerait quoi si l'input devient plus grand que son container?
Je ne sais pas si c'est la bonne solution, mais est-ce que la largeur pourrait être une props ? ou est-ce qu'on pourrait définir le nombre de chiffres qui est sensé s'afficher dans l'input et la largeur serait défini par ça?
Avoir un champ qui s'élargie selon son contenu n'est pas top selon moi.
There was a problem hiding this comment.
Je verrais 3 solutions possibles:
- Soit j'expose un prop
widthen laissant la valeur par défaut à116px. Le principal downside de cette solution est qu'il y a des bonnes chances que le user qui set sa largeur lui même ne respect pas notre 8px grid. - Soit je laisse l'input à largeur dynamique, mais je limite sa largeur maximale à 100% de sont container.
- Soit je met une largeur fixe.
Qu'est-ce qui serait mieux selon toi?
There was a problem hiding this comment.
On pourrait faire des presets de largeur. Par exemple:
- "small": 116px;
- "medium": 132px;
- "large": 148px;
- "100%": 100%;
On met small par defaut. De cette manière on garde quand même un certain contrôle sur les largeurs.
There was a problem hiding this comment.
Ça aurait du sens pour moi, faut voir ce que @jni- en pense.
There was a problem hiding this comment.
si y'a un 100% pour laisser le controle au container, pourquoi pas. Tant qu'à y aller avec les noms, j'irais p-t pour small, medium, large, stretch ou de quoi du genre.
Par contre ideallement ca fitterait avec le reste. Si j'ai un formulaire vertical avec 5 champs, est-ce que les autre input (pas money) vont être de la même largeur? Si non, ca manque un peu d'unité dans le design system je trouve. Mais si je peux mettre 100% et décider la largeur de tous les inputs avec le container, alors c,est un moindre mal
There was a problem hiding this comment.
J'ai regardé ça avec @maboilard et on met ça fix à 132px.
There was a problem hiding this comment.
Si jamais on veut changer pour ce input dans Dabench plutôt que notre copie, faudrait que vous repassiez sur les maquettes de Dabench. On avait 232px en desktop/tablette, et le champ s'ajustait à la taille de l'écran en mobile (~100%)
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
f623153 to
f9cdbcd
Compare
| nextDisplayValue = roundedValue.toString(); | ||
| } else { | ||
| const mask: RegExp = precision > 0 ? /[^0-9.,]/g : /[^0-9]/g; | ||
| nextDisplayValue = rawValue.replace(mask, ''); |
There was a problem hiding this comment.
ca serait pas mieux de le repartir comme un number? parce que la le rounding arrivera pasdans ce cas-ci
There was a problem hiding this comment.
La value est formattée onBlur avec updateFormattedValue(), donc au final la valeur devient un nombre. Je laisserais ça comme ça pour laisser le user entrer un peu ce qu'il veut et on handle la valeur par la suite.
There was a problem hiding this comment.
Ca peut etre OK de dire "si tu mets d'la scrap tanpis", mais juste faire attention à ne pas avoir au fil du temps tout le temps plein d'edge case. Ce genre de truc fait que partout ailleurs tout le monde doit géré la scrap qui n'a pas été gérée en amont, personne va venir revoir ici pour le réglé à la source (trust me lol). C'est pas that bad, juste un petit smell basé sur l'expérience lol
Aussi, ca peut clashé pour l'utilisateur d'avoir 2 facon de le géré selon si le component "give up" ou non :P
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
f9cdbcd to
a0ab4cb
Compare
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
07a1fb2 to
3ab495a
Compare
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
3ab495a to
da71e4d
Compare
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
da71e4d to
209e3e4
Compare
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
d803fc9 to
fa5ebdb
Compare
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
fc201b7 to
24dd1c6
Compare
| setHasFocus(true); | ||
| } | ||
|
|
||
| const getRoundedValue = (val: string): number | null => { |
There was a problem hiding this comment.
function à place de const pour être pareil. peut-etre aussi parseAndRound ou formatValue ou de quoi du genre pour dire que la différence avec roundValue c'est que ca prend une str
maxime-gendron
force-pushed
the
dev/DE-67
branch
from
f1e901f to
19c6168
Compare
PR Description
Ce component a été initialement créé dans le repo de Dabench (lien). J'ai adapté le component aux besoins du Design System, donc il y à certaines différences avec le currency-input de Dabench.
La principale fonctionnalité de ce component est de formater les valeurs entrées selon la langue définie dans les props. Par exemple:
Pour la largeur de l'input, j'ai regardé avec @maboilard et on change la valeur de 116px des maquettes pour 128px. Les styles mobiles ne sont pas fait, car ce component est basé sur text-input. Un PR sera fait pour mettre les styles mobiles sur tous les inputs.
New component checklist
storybookpackage.