Fix animations #408
Fix animations #408
Conversation
|
✅ Deploy Preview for outlinejs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
New dependencies detected. Learn more about Socket for GitHub ↗︎
|
|
I'm not sure we want to force animations into core components as not every project may want them. Holding for review by Jake. |
There was a problem hiding this comment.
This update should happen as a separate request/PR.
And if adding .env.local, it should be at teh top with the other .env-local version.
| @@ -61,6 +61,7 @@ | |||
| "reset:install": "yarn install", | |||
| "restart": "yarn reset && yarn start", | |||
| "start": "yarn storybook dev -p ${npm_package_storybook_port}", | |||
| "start:local": "yarn storybook dev -p 7777", | |||
There was a problem hiding this comment.
This should not be included. You can change the port number in your package.json for an individual project with "sbport": 6099, You can update that as you like, and commit to your project repo.
| transition-property: color, text-decoration; | ||
| transition-timing-function: ease-in; | ||
| transition-duration: 300ms; |
There was a problem hiding this comment.
In order to generalize this enough for Outline, these three CSS rules will need to have CSS Variables in places matching the pattern of other in the component that allow for them to be customized, and turned off by default.
| transition-property: color, background-color, border-color, | ||
| text-decoration-color, fill, stroke, outline, outline-color; | ||
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | ||
| text-decoration-color, fill, stroke, outline, outline-color, box-shadow; | ||
| transition-timing-function: ease-in; |
There was a problem hiding this comment.
In order to generalize this enough for Outline, these three CSS rules will need to have CSS Variables in places matching the pattern of other in the component that allow for them to be customized, and turned off by default.
There was a problem hiding this comment.
We should find a way this can also be optional by default. Modal might be the one component where the animations might be logical by default, but in most cases, we should code it such that it is an optional, yet easy configuration.
|
TODO
|
Description
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
Fixes # (issue)
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Checklist