feat(Common): added gradient border and pulse animation#7926
Conversation
|
Preview: https://pf-pr-7926.surge.sh A11y report: https://pf-pr-7926-a11y.surge.sh |
srambach
left a comment
srambach
left a comment
There was a problem hiding this comment.
Besides the duration variable, are we going to turn it off for pf-m-no-motion or change/stop it for prefers-reduced-motion?
| 0 0 var(--#{$pf-global}--pulse--BoxShadow--Spread) oklch(50% 0.134 242.749deg), | ||
| 0 0 var(--#{$pf-global}--pulse--BoxShadow--Spread) oklch(45.9% 0.187 3.815deg), | ||
| 0 0 var(--#{$pf-global}--pulse--BoxShadow--Spread) oklch(45.9% 0.187 3.815deg); | ||
| animation: #{$pf-global}-pulse 2s infinite ease-in-out; |
There was a problem hiding this comment.
I would consider making the duration a variable.
mcoker
left a comment
mcoker
left a comment
There was a problem hiding this comment.
I think it's fine as-is. Updates I think we could make at some point:
- The
:focus/:focus-withinstyles I mentioned - Semantic names for these classes named after their role instead of how they look
- vars for the colors and parts that can be customized
- Sarah's comments about no/reduced motion and if there are existing vars we can use
wdyt @thatblindgeye want to update anything or add these to the follow-up issue to do later? patternfly/pf-roadmap#269
| &:focus, | ||
| &:focus-within { |
There was a problem hiding this comment.
I don't think you need these? I believe they were in the POC initially to fire on focus, but this animation turn on/off by toggling the class.
thatblindgeye
force-pushed
the
iss7915_borderGlowwing
branch
from
bc0aae5 to
8d93a46
Compare
|
@srambach @mcoker made some updates per above:
The rest I think would be good for a followup, the class/var naming and the addition of any vars for the gradient border colors/values (wasn't too sure really what to name them or whether to lump the entire linear-gradients in a single var or each color value/stop % its own var) |
mcoker
left a comment
mcoker
left a comment
There was a problem hiding this comment.
LGTM just a couple of super small nits on the class naming after running it by @lboehling
| // stylelink-enable declaration-no-important | ||
| } | ||
|
|
||
| .#{$pf-prefix}m-gradient-border { |
There was a problem hiding this comment.
I chatted with @lboehling about this and she recommended .pf-m-ai-trigger or .pf-m-ai-indicator since this is a style that indicates it will trigger some sort of AI action (like pulls up an assistant chat or something).
| inherits: false; | ||
| } | ||
|
|
||
| .#{$pf-prefix}m-pulse { |
There was a problem hiding this comment.
Ran this by @lboehling too and she was on board with .pf-m-thinking since this indicates the AI is working/processing.
thatblindgeye
force-pushed
the
iss7915_borderGlowwing
branch
from
c2ce0d3 to
d80656d
Compare
|
🎉 This PR is included in version 6.5.0-prerelease.9 🎉 The release is available on: Your semantic-release bot 📦🚀 |
4 participants
Closes #7915