Refactor Button Component with New Variants and Props #772
Conversation
pplancq
added
agent-slash
pplancq
added this to the Slash 2.0.0 - Remplacer les classmodifiers par des variants milestone
pplancq
force-pushed
the
feature/slash-button
branch
from
bf061fe to
bace0b6
Compare
| min-width: 10rem; | ||
| padding: 0.8rem 1.2rem; | ||
| border: 0; | ||
| --button-padding-h: #{common.px-to-rem(16)}; |
There was a problem hiding this comment.
question: je me demande si utiliser ces mixins c'est malin si on se dit qu'a terme on vire sass ?
There was a problem hiding this comment.
effectivement c'est une question à débattre, sass or not sass, perso je serais d'avis, au moins dans un premier temps faire en sorte que sass ne soit pas require pour les consommateur de la lib.
après à voir si tous ce que l'on peux faire en sass est possible en css, certaine mixins peuvent surement être remplacer par des class utilitaires, mais je reste je sais pas trop.
pplancq
force-pushed
the
feature/slash-button
branch
from
6b3538d to
16d1064
Compare
pplancq
force-pushed
the
feature/slash-button
branch
from
16d1064 to
482485e
Compare
| ) => ( | ||
| <button | ||
| type="button" | ||
| className={classNames( |
There was a problem hiding this comment.
+1 pour virer le classModifier
je ne suis pas fan de cette notion de classModifier alors que le className fait déjà très bien le travail et évite de devoir aller voir la doc pour savoir comment surcharger le css d'un composant
There was a problem hiding this comment.
C'est l'objectif principale de la v2 de slash.
BREAKING CHANGE: **button**, removed universes variant; use custom class if needed BREAKING CHANGE: **button**, removed hasIconLeft/hasIconRight; CSS auto-detects use of SVG or glyphicon BREAKING CHANGE: **button**, variant reverse is now renamed to secondary BREAKING CHANGE: **button**, variant success is now renamed to validated BREAKING CHANGE: **button**, removed disabled variant; now use button's disabled prop BREAKING CHANGE: **button**, removed circle variant
…on button component BREAKING CHANGE: **button**, prop `className` no longer removes default style BREAKING CHANGE: **button**, prop `classModifier` is removed; use props `variant`, `size`, `leftIcon`, and `rightIcon` instead
pplancq
force-pushed
the
feature/slash-button
branch
from
482485e to
e4d1851
Compare
|
|
Lorsqu'il y a des breaking change impliqué par une PR, il faudrait que cette PR mette à jour tout de suite le guide de Migration, ca évitera de le faire au dernier moment avant la livraison de la nouvelle version. Je vois qu'ici il n'y a que le guide de migration depuis le premier toolkit. Le MIGRATION.md peut être initialisé grâce à cette PR. |
Yes pas faux j'ai complément zapper le guide de migration, je le fais des que possible |
Description:
This PR introduces significant changes to the button component, including a restyle with the new-look Slash DS and the introduction of variant props instead of classModifier. The following breaking changes are included:
Breaking Changes:
Restyle Button with New-Look Slash DS
universesvariant; use custom class if needed.hasIconLeft/hasIconRight; CSS now auto-detects use of SVG or glyphicon.reversevariant tosecondary.successvariant tovalidated.disabledvariant; now use button'sdisabledprop.circlevariant.Introduction of Variant Props
classNameno longer removes default style.classModifier; use propsvariant,size,leftIcon, andrightIconinstead.Additional Information:
For the CSS part, I have introduced the use of CSS variables for colors, fonts, etc., as well as mixins to provide various shortcuts for creating our CSS classes. All these modifications are open to discussion and may lead to the drafting of an ADR on CSS best practices.
Screanshot: