fix(buttons): border transition update#7096
Conversation
|
Preview: https://patternfly-pr-7096.surge.sh A11y report: https://patternfly-pr-7096-a11y.surge.sh |
| // Secondary | ||
| --#{$button}--m-secondary--Color: var(--pf-t--global--text--color--brand--default); | ||
| --#{$button}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default); | ||
| --#{$button}--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); |
There was a problem hiding this comment.
Nice 👍. Instead of reassigning css vars, I suggest using a base transition duration for buttons, like:
...
--#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
}
.button {
transition-duration: var(--#{$button}--TransitionDuration);
We're working to pivot away from reassigning css variables as this approach affects performance implications and using prop: val; definitions are more readable in devtools.
There was a problem hiding this comment.
We're working to pivot away from reassigning css variables as this approach affects performance implications and using prop: val; definitions are more readable in devtools.
We can talk about this as a team and see when/if it makes sense to do that. It's always something we can do as a non-breaking follow-up once we have a strategy for it 👍
fixes #7036