Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(animations): provide warnings for non-animatable CSS properties #45212

Closed
wants to merge 11 commits into from
Closed

feat(animations): provide warnings for non-animatable CSS properties #45212

wants to merge 11 commits into from

Conversation

dario-piotrowicz
Copy link
Contributor

@dario-piotrowicz dario-piotrowicz commented Feb 27, 2022 •
edited

warn developers when they are trying to animate non-animatable CSS
properties so that can more easily understand why something is not being
animated as they would expect it to

resolves #27577

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

Issue

Issue Number: #27577

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

  • @jessicajaniuk 🙂
  • I believe this is a proper solution for issue #27577, but that's just my opinion, please check the issue out and let me know what you think 🙂
  • I could have included this functionality in the unsupported properties warnings, I just wanted to keep them separate to provide better information for the developer (as in, having different warnings for when they provide wrong CSS properties and for when they provide valid CSS properties which cannot be animated), I can of course change that if you believe it's not the right solution

@pullapprove pullapprove bot requested review from dylhunn and jelbourn Feb 27, 2022
@dario-piotrowicz dario-piotrowicz force-pushed the warn-for-non-animatable-props branch from 041ef5c to f646f41 Compare Feb 27, 2022
@ngbot ngbot bot added this to the Backlog milestone Feb 28, 2022
@jessicajaniuk jessicajaniuk self-requested a review Feb 28, 2022
@dario-piotrowicz dario-piotrowicz force-pushed the warn-for-non-animatable-props branch from f646f41 to 2376a29 Compare Feb 28, 2022
AndrewKushnir
AndrewKushnir reviewed Mar 2, 2022
View changes
packages/animations/browser/src/dsl/animation_ast_builder.ts Outdated Show resolved Hide resolved
packages/animations/browser/src/dsl/animation_ast_builder.ts Outdated Show resolved Hide resolved
packages/animations/browser/src/render/web_animations/web_animations_driver.ts
@@ -19,6 +19,11 @@ export class WebAnimationsDriver implements AnimationDriver {
return validateStyleProperty(prop);
Copy link
Contributor

@AndrewKushnir AndrewKushnir Mar 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should consider (in a followup) whether we should make the validateStyleProperty a dev-mode-only check as well. Otherwise, there is an inconsistency between validateStyleProperty (which works in both prod and dev modes) and validateAnimatableStyleProperty (that actually works only in dev mode). I think dropping the validateStyleProperty in prod mode makes sense and would help remove some payload size (+ add some extra runtime perf benefits, since we'd need to execute less logic).

Copy link
Contributor Author

@dario-piotrowicz dario-piotrowicz Mar 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes sounds like a good idea 🙂👍

(I'd be happy to take that on! 😁)

Copy link
Contributor

@AndrewKushnir AndrewKushnir Mar 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, thanks @dario-piotrowicz 👍 That'd be a change in behavior that we should be able to land in the next major (v14).

packages/animations/browser/src/render/animation_driver.ts Outdated Show resolved Hide resolved
@dario-piotrowicz dario-piotrowicz force-pushed the warn-for-non-animatable-props branch from 2376a29 to 7d8053b Compare Mar 3, 2022
@dario-piotrowicz dario-piotrowicz force-pushed the warn-for-non-animatable-props branch from fb4aac9 to bd04a93 Compare Mar 6, 2022
@jessicajaniuk jessicajaniuk added the target: major label Mar 9, 2022
jessicajaniuk
jessicajaniuk approved these changes Mar 9, 2022
View changes
Copy link
Contributor

@jessicajaniuk jessicajaniuk left a comment •
edited

LGTM 🍪

Thanks for your work on this, Dario!

reviewed-for: public-api, fw-animations, fw-testing, size-tracking

packages/animations/browser/src/render/web_animations/animatable_props_set.ts Show resolved Hide resolved
@pullapprove pullapprove bot requested a review from jessicajaniuk Mar 9, 2022
@jessicajaniuk jessicajaniuk removed their request for review Mar 9, 2022
@pullapprove pullapprove bot requested a review from atscott Mar 9, 2022
atscott
atscott approved these changes Mar 9, 2022
View changes
Copy link
Contributor

@atscott atscott left a comment

LGTM with a couple nits

reviewed-for: public-api, size-tracking

packages/animations/browser/src/dsl/animation_ast_builder.ts Outdated Show resolved Hide resolved
packages/animations/browser/src/dsl/animation_ast_builder.ts Outdated Show resolved Hide resolved
@pullapprove pullapprove bot requested a review from alxhub Mar 9, 2022
@dario-piotrowicz dario-piotrowicz force-pushed the warn-for-non-animatable-props branch from 9ddaf66 to 2a14282 Compare Mar 9, 2022
dylhunn
dylhunn approved these changes Mar 9, 2022
View changes
Copy link
Contributor

@dylhunn dylhunn left a comment

reviewed-for: public-api

@pullapprove pullapprove bot requested a review from jessicajaniuk Mar 9, 2022
@dario-piotrowicz dario-piotrowicz force-pushed the warn-for-non-animatable-props branch from a33a36d to 2a14282 Compare Mar 9, 2022
AndrewKushnir
AndrewKushnir approved these changes Mar 10, 2022
View changes
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

@dario-piotrowicz looks great, just left one comment to see if we can improve the error message. Thank you.

packages/animations/browser/src/warning_helpers.ts Outdated Show resolved Hide resolved
@pullapprove pullapprove bot requested a review from dylhunn Mar 10, 2022
@dario-piotrowicz
feat(animations): provide warnings for non-animatable CSS properties
c3ba344 
warn developers when they are trying to animate non-animatable CSS
properties so that can more easily understand why something is not being
animated as they would expect it to

resolves angular#27577
@AndrewKushnir AndrewKushnir added the action: presubmit label Mar 15, 2022
@AndrewKushnir
Copy link
Contributor

@AndrewKushnir AndrewKushnir commented Mar 15, 2022

Presubmit.

AndrewKushnir
AndrewKushnir approved these changes Mar 15, 2022
View changes
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Reviewed-for: public-api, size-tracking

@AndrewKushnir AndrewKushnir added action: merge action: merge-assistance and removed action: presubmit labels Mar 18, 2022
@AndrewKushnir
Copy link
Contributor

@AndrewKushnir AndrewKushnir commented Mar 18, 2022

Merge-assistance: I can't remove extra reviewers from the list, but the PR is approved and ready for merge.

@jessicajaniuk jessicajaniuk removed the action: merge-assistance label Mar 18, 2022
@jessicajaniuk
Copy link
Contributor

@jessicajaniuk jessicajaniuk commented Mar 18, 2022

@AndrewKushnir I was able to remove them. So I removed the merge-assistance label. Not sure why it let me and not you.

@alxhub
Copy link
Contributor

@alxhub alxhub commented Mar 21, 2022

This PR was merged into the repository by commit 79d334b.

@alxhub alxhub closed this in 79d334b Mar 21, 2022
@dario-piotrowicz dario-piotrowicz deleted the warn-for-non-animatable-props branch Mar 21, 2022
PiyushAgrawal1243 pushed a commit to PiyushAgrawal1243/angular that referenced this issue Mar 30, 2022
@dario-piotrowicz @PiyushAgrawal1243
feat(animations): provide warnings for non-animatable CSS properties (a 1�7
e4006a6 
…ngular#45212)

warn developers when they are trying to animate non-animatable CSS
properties so that can more easily understand why something is not being
animated as they would expect it to

resolves angular#27577

PR Close angular#45212
josmar-crwdstffng pushed a commit to josmar-crwdstffng/angular that referenced this issue Apr 8, 2022
@dario-piotrowicz @josmar-crwdstffng
feat(animations): provide warnings for non-animatable CSS properties (a 1�7
d622645 
…ngular#45212)

warn developers when they are trying to animate non-animatable CSS
properties so that can more easily understand why something is not being
animated as they would expect it to

resolves angular#27577

PR Close angular#45212
dario-piotrowicz added a commit to dario-piotrowicz/angular that referenced this issue Apr 9, 2022
@dario-piotrowicz
feat(animations): make validateStyleProperty check dev-mode only
0328dd3 
make the validateStyleProperty check dev-mode only so that it is
consistent with the validateAnimatableStyleProperty check introduced in
PR angular#45212

besides consistency this change also reduces the payload size and
increases performance (since less logic is executed)

original conversation: angular#45212 (comment)
@dario-piotrowicz dario-piotrowicz mentioned this pull request Apr 9, 2022
Closed
14 tasks
dario-piotrowicz added a commit to dario-piotrowicz/angular that referenced this issue Apr 9, 2022
@dario-piotrowicz
feat(animations): make validateStyleProperty check dev-mode only
a5c54b0 
make the validateStyleProperty check dev-mode only so that it is
consistent with the validateAnimatableStyleProperty check introduced in
PR angular#45212

besides consistency this change also reduces the payload size and
increases performance (since less logic is executed)

original conversation: angular#45212 (comment)
dario-piotrowicz added a commit to dario-piotrowicz/angular that referenced this issue Apr 9, 2022
@dario-piotrowicz
feat(animations): make validateStyleProperty check dev-mode only
e73a440 
make the validateStyleProperty check dev-mode only so that it is
consistent with the validateAnimatableStyleProperty check introduced in
PR angular#45212

besides consistency this change also reduces the payload size and
increases performance (since less logic is executed)

original conversation: angular#45212 (comment)
dario-piotrowicz added a commit to dario-piotrowicz/angular that referenced this issue Apr 9, 2022
@dario-piotrowicz
refactor(animations): apply full ngDevMode check in animatable prop v 1�7
62c4039 
…alidation

in the `validateAnimatableStyleProperty` function use the more complete
check for the ngDevMode as it seems to be the preferred version
(see: angular#45212 (comment))
dario-piotrowicz added a commit to dario-piotrowicz/angular that referenced this issue Apr 9, 2022
@dario-piotrowicz
feat(animations): make validateStyleProperty check dev-mode only
c709637 
make the validateStyleProperty check dev-mode only so that it is
consistent with the validateAnimatableStyleProperty check introduced in
PR angular#45212

besides consistency this change also reduces the payload size and
increases performance (since less logic is executed)

original conversation: angular#45212 (comment)
dario-piotrowicz added a commit to dario-piotrowicz/angular that referenced this issue Apr 9, 2022
@dario-piotrowicz
refactor(animations): apply full ngDevMode check in animatable prop v 1�7
2f8f3c9 
…alidation

in the `validateAnimatableStyleProperty` function use the more complete
check for the ngDevMode as it seems to be the preferred version
(see: angular#45212 (comment))
dario-piotrowicz added a commit to dario-piotrowicz/angular that referenced this issue Apr 9, 2022
@dario-piotrowicz
refactor(animations): use full ngDevMode check in animatable prop val 1�7
7d51458 
…idation

in the `validateAnimatableStyleProperty` function use the more complete
check for the ngDevMode as it seems to be the preferred version
(see: angular#45212 (comment))
jessicajaniuk pushed a commit that referenced this issue Apr 11, 2022
@dario-piotrowicz @jessicajaniuk
feat(animations): make validateStyleProperty check dev-mode only (#45570
a6fa37b 
)

make the validateStyleProperty check dev-mode only so that it is
consistent with the validateAnimatableStyleProperty check introduced in
PR #45212

besides consistency this change also reduces the payload size and
increases performance (since less logic is executed)

original conversation: #45212 (comment)

PR Close #45570
jessicajaniuk pushed a commit that referenced this issue Apr 11, 2022
@dario-piotrowicz @jessicajaniuk
refactor(animations): use full ngDevMode check in animatable prop val 1�7
9572bb2 
…idation (#45570)

in the `validateAnimatableStyleProperty` function use the more complete
check for the ngDevMode as it seems to be the preferred version
(see: #45212 (comment))

PR Close #45570
@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Apr 21, 2022

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 21, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@atscott atscott

@dylhunn dylhunn

@AndrewKushnir AndrewKushnir

@jessicajaniuk jessicajaniuk

Assignees
No one assigned
Labels
action: merge comp: animations target: major
Projects
None yet
Milestone
Backlog
Development

Successfully merging this pull request may close these issues.

Can't set display during animation
6 participants
@dario-piotrowicz @AndrewKushnir @jessicajaniuk @alxhub @atscott @dylhunn