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

Handle Spans In Pin Outlines #6644

Merged
merged 3 commits into from
Nov 19, 2024
Merged

Conversation

seanparsons
Copy link
Contributor

Problem:
If a part of a grid item's CSS includes a span value like span 2, then the pin outlines end up in unusual places.

Cause:
When constructing the containing block which governs from where the outlines start and end, the grid column/row start/end properties are converted to simpler values using gridPositionToValue, which turns span 2 into 2.

Fix:
Using some existing code for turning the position values into CSS values, the containing block bounds now result in the CSS values that they started with if those exist.

Commit Details:

  • Extracted out the printPin function.
  • Implemented nullHandlingPrintPin as a thin wrapper around printPin.
  • GridElementContainingBlock now uses nullHandlingPrintPin instead of gridPositionToValue to build the grid column/row start/end values.

Manual Tests:
I hereby swear that:

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

- Extracted out the `printPin` function.
- Implemented `nullHandlingPrintPin` as a thin wrapper around `printPin`.
- `GridElementContainingBlock` now uses `nullHandlingPrintPin` instead of
  `gridPositionToValue` to build the grid column/row start/end values.
Copy link
Contributor

github-actions bot commented Nov 14, 2024

Try me

Copy link

relativeci bot commented Nov 14, 2024

#15183 Bundle Size — 58.09MiB (~+0.01%).

73b29db(current) vs d1d46c1 master#15182(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics  Change 2 changes Regression 1 regression
                 Current
#15183
     Baseline
#15182
Regression  Initial JS 41.07MiB(~+0.01%) 41.06MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 18.15% 18.03%
No change  Chunks 20 20
No change  Assets 22 22
No change  Modules 4170 4170
No change  Duplicate Modules 213 213
No change  Duplicate Code 27.29% 27.29%
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
#15183
     Baseline
#15182
Regression  JS 58.08MiB (~+0.01%) 58.08MiB
Improvement  HTML 7.37KiB (-0.25%) 7.39KiB

Bundle analysis reportBranch fix/handle-spans-in-pin-outlinesProject dashboard


Generated by RelativeCIDocumentationReport issue

@seanparsons seanparsons merged commit d1c1e6e into master Nov 19, 2024
14 checks passed
@seanparsons seanparsons deleted the fix/handle-spans-in-pin-outlines branch November 19, 2024 16:07
liady pushed a commit that referenced this pull request Dec 13, 2024
- Extracted out the `printPin` function.
- Implemented `nullHandlingPrintPin` as a thin wrapper around
`printPin`.
- `GridElementContainingBlock` now uses `nullHandlingPrintPin` instead
of `gridPositionToValue` to build the grid column/row start/end values.
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.

2 participants