v11.18
Retrait des styles inline sur les champs
(fix partiel de #194)
Les champs ne posent plus de style inline à base de labelRatio
/valueRatio
(et disableInlineSizing
pour le désactiver). A la place, deux variables CSS sont définies globalement, --field-label-width
et --field-value-width
, initialisées à 33%
et 67%
pour conserver l'existant par défaut, qui sont utilisées dans le CSS pour définir les largeurs dans les champs. Par conséquent, toute la mise en page des champs est désormais gérée en CSS, ce qui devrait largement faciliter sa personnalisation (à défaut de proposer d'autres mises en page par défaut, pour l'instant).
Il reste possible de spécifier de manière "inline" labelWidth
et valueWidth
sur Form
et Field
, à la place de labelRatio
et valueRatio
(ce sont donc plus des ratios mais simplement la valeur des deux variables CSS, donc vous pouvez y mettre ce que vous voulez). Ce n'est donc plus la manière recommandée de gérer la mise en page (puisqu'il est possible de tout faire en CSS maintenant), mais cela permet une mise à jour simple de l'existant. Pour émuler le comportement de disableInlineSizing
, vous pouvez simplement affecter auto
aux deux variables par exemple.
(Ces propriétés vont simplement poser les variables en style inline sur le <form>
ou le <div>
principal du Field
)
TL:DR breaking changes :
labelRatio: x
=>labelWidth: "x%"
, etvalueWidth: "(100 - x)%"
sivalueRatio
n'était pas renseigné (valueRatio
était calculé automatiquement avant, mais on ne peut plus le faire puisqu'on n'utilise plus nécessairement un pourcentage)valueRatio: x
=>valueWidth: "x%"
disableInlineSizing: true
=>labelWidth: "auto", valueWidth: "auto"
react-transition-group
=> react-transition-state
Focus n'utilise plus react-transition-group
qui n'est plus maintenu et ne sera jamais mis à jour pour React 19 (la lib est incompatible), mais une autre librairie plus flexible qui elle sera compatible. Cela ne change rien à l'utilisation (c'est utilisé pour les dialogs et les popins), mais cela devrait retirer un warning en console.