feat: add per-icon hover motion map and keyframes - #4944
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4944 +/- ##
=======================================
Coverage 97.66% 97.66%
=======================================
Files 958 959 +1
Lines 31326 31342 +16
Branches 11573 11577 +4
=======================================
+ Hits 30594 30610 +16
- Misses 686 725 +39
+ Partials 46 7 -39 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
mxschll
changed the title
mxschll
changed the title
| ]; | ||
|
|
||
| function getIcon(iconName, content) { | ||
| // Dash-animated icons (see hover-motion.scss) carry pathLength/stroke-dash* |
There was a problem hiding this comment.
The default optimization merges SVG paths and strips attributes which now are required for animating single parts of an icon. We need to keep these when present in Cloudscape SVGs.
| > svg { | ||
| // Exposed for hover motion that compensates stroke width while scaling | ||
| // parts (see hover-motion.scss). | ||
| --awsui-internal-style-icon-stroke-width: calc(#{$stroke} / #{$scaleFactor}); |
There was a problem hiding this comment.
Exposed, so the var can be re-used in hover-motion.scss and animations can adapt to different stroke widths of icons. E.g. VR uses thicker stroke width for icons than One Theme, and animations must adapt accordingly (VR does not get animations, but still, this keeps things flexible)
e67bd59 to
5f9a930
Compare
| 'y2', | ||
| 'width', | ||
| 'height', | ||
| 'overflow', |
There was a problem hiding this comment.
These attributes are a requirement for some SVG animations to work. E.g. a moving part should be able to move "out" of a box without showing outside of it, hence we require "overflow: hidden" on parts of an SVG.
| // stylelint-disable @cloudscape-design/no-implicit-descendant | ||
|
|
||
| $_ease-out: ease-out; | ||
| $_ease-symmetric: cubic-bezier(0.33, 0, 0.67, 1); |
There was a problem hiding this comment.
Simplified to use native ease-in-out
Pull request was converted to draft
| class: 'className', | ||
| 'stroke-dasharray': 'strokeDasharray', | ||
| 'stroke-dashoffset': 'strokeDashoffset', | ||
| }; |
There was a problem hiding this comment.
SVGs get transformed to components. We need to rename attributes to jsx compatible names, otherwise we'll get these errors:
Invalid DOM property `%s`. Did you mean `%s`?%s\" \"stroke-dasharray\" \"strokeDasharray\" \"\\n in path\\n in svg
2 participants
Description
Adds more icon-specific motions and updates some of the existing ones. Icon motion is not enabled yet, so this PR does not introduce any visual changes except some anti aliasing because SVG strokes have been split up. Hence the failing regression tests.
Also adds necessary icon-part tags to three icons as a follow up to #4919
Related links, issue #, if available:
b9VcPdMJ5zRnHow has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.