[FIX] updates to smoove workflow animations #43
Conversation
- updated step/card structure - add missing slide-in-left animation (WTF?) - cleanup keyframe names and namespacing - workflow structure cleanup
scss/patterns/steps/keyframes.scss
Outdated
| 0% { | ||
| transform: translateX(0); | ||
| } | ||
| 100% { | ||
| transform: translateX(100%); | ||
| transform: translateX(-50%); |
There was a problem hiding this comment.
no longer requires the calc() to adjust for the card size.
scss/patterns/steps/keyframes.scss
Outdated
| } | ||
| 100% { | ||
| transform: translateX(0); | ||
| transform: translateX(50%); |
There was a problem hiding this comment.
no longer requires the calc() to adjust for the card size.
scss/patterns/steps/keyframes.scss
Outdated
| @keyframes step-slide-in-left { | ||
|
|
||
| // SLIDE IN LEFT | ||
| @keyframes slide-in-left { |
There was a problem hiding this comment.
removed .step name space and step- prefixes
scss/patterns/steps/animations.scss
Outdated
| &.slide-out-left { | ||
| position: absolute; | ||
| animation: 0.3s ease-in-out slide-out-left; | ||
| .card { animation: 0.3s ease-in-out fade-out; } |
There was a problem hiding this comment.
- slide in/outs only effect the step
- fade in/outs only effect the card
scss/patterns/steps/steps.scss
Outdated
| > footer { | ||
| margin: 1.25rem 1.5rem; | ||
| } | ||
| .card { |
There was a problem hiding this comment.
moved all workflow related .step and .card styling here
scss/patterns/workflows.scss
Outdated
| } | ||
| } | ||
| overflow-y: auto; | ||
| overflow-x: hidden; |
There was a problem hiding this comment.
removes horizontal scroll bars on transition animations.
- simplify required classes
| @@ -7,6 +7,7 @@ | |||
| align-items: center; | |||
| justify-content: center; | |||
|
|
|||
| background-color: $white; | |||
There was a problem hiding this comment.
i don't think this was necessary to separate out
There was a problem hiding this comment.
What page might I go to to see the effects of this file? Doesn't seem like it has anything to do with any existing workflows.
There was a problem hiding this comment.
teh workflows page in PDS (https://github.com/WealthBar/peak-design-system/pull/53/files) or the WB demo for artems branch: https://github.com/WealthBar/wealthbar/tree/k192.workflow-animation-demo
There was a problem hiding this comment.
okay, yeah, looks good there!
- remove commented code
| @@ -1,10 +1,16 @@ | |||
| .modal-page { | |||
| .modal-page, | |||
| .workflow-page { | |||
There was a problem hiding this comment.
Are you able to point me in the direction of a workflow that uses this so that I can test?
There was a problem hiding this comment.
check out the compenent in the demo for artem: https://github.com/WealthBar/wealthbar/tree/k192.workflow-animation-demo or this PR https://github.com/WealthBar/wealthbar/pull/1312/files
| @@ -1,25 +1,71 @@ | |||
| .workflow { | |||
There was a problem hiding this comment.
On the beneficiaries workflow, I see that when the content of a step is longer than the browser window and you scroll down, the banner stays with the content instead of sticking to the window. Is that according to design specs?
|
I just want to note that this does seem to be a breaking change. As such make sure nobody bumps WB peak version past this before your WB fix is out. According to SemVer, thaat might mean this need to be 3.0.0. |
Summary
Submitter Checklist:
Reviewer Checklist: