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(editor): update correct breakpoint value #6724

Merged
merged 3 commits into from
Dec 16, 2024

Conversation

liady
Copy link
Contributor

@liady liady commented Dec 13, 2024

This PR adds the functionality of updating the correct breakpoint value in Tailwind (lg-, md-, etc) according to the current Scene size.

Details:

  • We're checking the current Scene size to see if the element has some variant for this prop that matches it (we're choosing the best one if there are several), and updating only this value
  • If there are no variants or none matching, we update the default value (no breakpoint)
  • We're currently updating the value per-breakpoint only if it was defined per-breakpoint in the first place (for example via the code editor, with prefix)
  • The main change is building a map of each property to the modifiers that are currenty affecting it - (getPropertiesToAppliedModifiersMap()) - so that the property updating methods (that already exist in tailwind-class-list-utils.ts) could use this information to understand which variant they need to update or remove (instead of always changing the default one as it was until now).

Example:
(Note - in this PR the controls are not indicated in green, this is left for future design decisions)

tw-aware-controllers.mp4

Manual Tests:
I hereby swear that:

  • I opened a hydrogen project and it loaded
  • I could navigate to various routes in Play mode

Choose a reason for hiding this comment

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

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts:42

  • Ensure that the new behavior of updating classes based on the current scene size and modifiers is covered by tests.
runUpdateClassList = (
Copy link
Contributor

github-actions bot commented Dec 13, 2024

Try me

Copy link

relativeci bot commented Dec 13, 2024

#15430 Bundle Size — 58.22MiB (~+0.01%).

613d5d6(current) vs d1d46c1 master#15427(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics  Change 2 changes Regression 1 regression
                 Current
#15430
     Baseline
#15427
Regression  Initial JS 41.19MiB(~+0.01%) 41.19MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 18.26% 18.14%
No change  Chunks 20 20
No change  Assets 22 22
No change  Modules 4191 4191
No change  Duplicate Modules 213 213
No change  Duplicate Code 27.24% 27.24%
No change  Packages 477 477
No change  Duplicate Packages 70 70
Bundle size by type  Change 2 changes Regression 1 regression Improvement 1 improvement
                 Current
#15430
     Baseline
#15427
Regression  JS 58.22MiB (~+0.01%) 58.21MiB
Improvement  HTML 9.4KiB (-0.21%) 9.42KiB

Bundle analysis reportBranch feat/update-breakpoint-valueProject dashboard


Generated by RelativeCIDocumentationReport issue

@liady liady merged commit 5e3adee into master Dec 16, 2024
14 checks passed
@liady liady deleted the feat/update-breakpoint-value branch December 16, 2024 14:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants