feat(Label): added toggletip props in label #1107
Conversation
JsGarneau
changed the title
|
Storybook for this build: https://ds.equisoft.io/pr-1107/ |
|
Webapp for this build: https://ds.equisoft.io/pr-1107/webapp/ |
There was a problem hiding this comment.
Quelques petits commentaire pour bien aligner le label et le toggleTip
Dans le StyledLabel du fichier label.tsx, remplace le line-height pour toujours avoir 1.5rem.
const StyledLabel = styled.label<{isMobile: boolean}>`
...
line-height: 1.5rem;
...
`;
Dans le StyledDiv du fichier FieldContainer.tsx remplace le --spacing-half du margin-bottom par --spacing-quarter.
> :nth-child(${({ hasLabel, hasHint, valid }) => (hasLabel ? 1 : 0) + (hasHint ? 1 : 0) + (!valid ? 1 : 0)}) {
margin-bottom: var(--spacing-quarter);
}`
| import { Tooltip, TooltipProps } from '../tooltip/tooltip'; | ||
| import { useTranslation } from '../../i18n/use-translation'; | ||
|
|
||
| const StyledDiv = styled.div` | ||
| align-items: center; | ||
| align-items: end; |
There was a problem hiding this comment.
Le toggleTip n'est pas vraiment centré avec le label.
Garde le center du align-items:.
Je vais te donner quelques changements pour que la vie soit belle, que le toggleTip soit là ou non.
There was a problem hiding this comment.
Ajoutes un gap: var(--spacing-half);
Ça va permettre de ne pas avoir les margin pour le tooltip et toggleTip.
Tu vas pouvoir supprimer const StyledTooltip et const StyledToggletip et utiliser directement le tooltip et toggletip sans les styler.
| @@ -28,13 +30,18 @@ const StyledTooltip = styled(Tooltip)` | |||
| margin-left: calc(var(--spacing-1x) * 1.5); | |||
| `; | |||
|
|
|||
| const StyledToggletip = styled(Toggletip)` | |||
| margin-left: calc(var(--spacing-half) * 1.5); | |||
There was a problem hiding this comment.
Tu peux supprimer ici et même celui du tooltip.
Le gap, que je te fais ajouter dans le StyledDiv plus haut vient ajouter l'espace nécessaire entre les éléments.
(voir commentaire dans le StyledDiv: #1107 (comment))
* feat(Label): added toggletip props in label * fix(Inputs): css tweaks on toggletip
Normalement dans une autre PR on pourrait retirer les
tooltips