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

feat: linear gradient transition hint syntax #46219

Conversation

intergalacticspacehighway
Copy link
Contributor

@intergalacticspacehighway intergalacticspacehighway commented Aug 26, 2024

Summary:

  • Adds support for color transition hint syntax in linear gradients. e.g. linear-gradient(red, 20%, green).
  • Simplified color stops parsing.
  • The processColorTransitionHint is put into native code so it can support platform colors.
  • Follows CSS spec (Refer transition hint section) and implementation is referred from blink engine source.

Changelog:

[GENERAL] [ADDED] - Linear gradient color transition hint syntax support.

Test Plan:

Added testcase in processBackgroundImage-test.ts and example in LinearGradientExample.js

Screenshot 2024-12-27 at 11 22 15 AM

Thoughts

Linear gradient fully supports CSS syntax with percentage value color stop positions and this PR adds transition hint support so can we remove experimental status from it?

px support can be done but we'll need to move color stop fixup algorithm from JS to native as we'll need view dimensions to support mixing percentage and px values. I guess we can hold that until new CSS parser?

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Aug 26, 2024
@intergalacticspacehighway intergalacticspacehighway marked this pull request as draft August 26, 2024 23:03
@intergalacticspacehighway intergalacticspacehighway force-pushed the linear-gradient-transition-hints branch 2 times, most recently from 9e2c636 to e73db98 Compare December 26, 2024 21:01
@intergalacticspacehighway intergalacticspacehighway marked this pull request as ready for review December 26, 2024 22:34
@intergalacticspacehighway intergalacticspacehighway force-pushed the linear-gradient-transition-hints branch from d57598c to e67bf9b Compare December 30, 2024 06:00
@intergalacticspacehighway
Copy link
Contributor Author

Closed in favor of #48410

This one has some bad merge history and some merge restrictions are getting triggered.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants