PayGreen/paygreen-ui v0.8.6

Nouveaux icons, formulaires plus stylés, tableaux et fix divers

on GitHub

Par @fanya3 dans :

• #139
• #138
• #140

Et @OliviaGometz dans :

• #134
• #141

Icons

Feat : ajout de 12 nouveaux Icons. 🎉

• BedIcon
• BrushIcon
• CameraIcon
• CircuitIcon
• ConsoleIcon
• CopyIcon
• EyedropperIcon
• PaletteIcon
• PlugIcon
• TrashIcon
• UploadIcon
• WidgetIcon

Largeur des champs

• Feat : ajout d'un booléen hasStaticWidth au DaSelect, DaInput, DaTextarea pour avoir la possibilité de forcer la largeur du champ à 100% dans son parent.
• Feat : ajout du booléen sur le FormControl pour bien gérer le cas où un DaHelp suit un champ avec un hasStaticWidth : il suffit de faire passer cette props sur le FormControl pour qu'elle s'applique aux enfants. Si vous intégrez des champs dans un FormControl, vous pouvez donc vous contenter de passer cette props au FormControl et pas au champ visé. 👌

Options dans les DaSelect et Select

• Feat : gestion des <optgroup> dans les DaSelect et Select. Autrefois, on ne pouvait remplir les select qu'avec une liste d'options, mais désormais il est possible d'envoyer ceci :

<DaSelect
    defaultValue=""
    options={[
        {
            value: '',
            text: 'Choose your option...',
            disabled: true,
        },
        {
            optgroup: 'First group',
            values: [
                {
                    value: 'first',
                    text: 'First option',
                },
                {
                    value: 'second',
                    text: 'Second option',
                },
                {
                    value: 'third',
                    text: 'Third option',
                },
            ],
        },
        {
            optgroup: 'Second group',
            values: [
                {
                    value: 'first 2',
                    text: 'First option',
                },
                {
                    value: 'second 2',
                    text: 'Second option',
                    disabled: true,
                },
                {
                    value: 'third 2',
                    text: 'Third option',
                },
            ],
        },
    ]}
/>

Ajout d'icons dans les DaInput et DaSelect

• Feat : ajout d'une props icon dans les DaInput, DaSelect (et DatePicker via son DaInput). Les tailles et couleurs sont gérées automatiquement par les composants parents, y'a juste à glisser l'icon de son choix et pof ça marche ! 👓

DaTable mobile

• Fix : sur mobile, les DaTableRow ne s'ouvrent plus au hover, mais au clic. Concrètement, ça ne change rien pour l'utilisateur par rapport à avant (un clic à l'extérieur ferme la row), mais permet de mieux gérer les clics sur des boutons contenus dans les DaTableRow (cela évite qu'elles se ferment inopinément, par exemple).

Fix divers

• Fix : retrait de la props disabled sur le DaHelp. Vous pouvez faire un coup de clean pour la virer vu qu'elle n'est plus prise en charge, mais ce changement est rétro-compatible (pas de bug visuel en cas d'oubli, ça ne se verra juste pas).
• Fix : amélioration des padding-right sur le DaSelect (les contenus trop longs ne sont plus mangés par la flèche à droite, en isRounded ou non).
• Fix : ⚠️ les select sur Chrome sont désopacifiés lorsqu'ils sont en disabled (merci Chrome 🖕). Pour fixer ce problème, un correctif a été apporté dans le style (global.js), donc pour ne pas avoir le bug sur vos projets vous devez impérativement le copier dans vos resets CSS :

    select {
        opacity: 1;
    }

⚠️ Ce fix est à répercuter dans tous vos projets. 🔼

• Refacto : le DropDown n'est plus encapsulé par un <span> inutile.
• Fix : les DaTableCell gèrent mieux les labels et contenus longs sur mobile. 💪