Skip to content

feat(grid): advanced grid controls#6354

Merged
liady merged 27 commits into
masterfrom
feat/grid-advanced-modal
Sep 16, 2024
Merged

feat(grid): advanced grid controls#6354
liady merged 27 commits into
masterfrom
feat/grid-advanced-modal

Conversation

@liady
Copy link
Copy Markdown
Contributor

@liady liady commented Sep 11, 2024

This PR adds advanced grid controls:

  • add inspector modal for advanced controls
  • justify + Align items - as chain controls
  • justify + Align content - as dropdowns
  • adding the ability to unset by clicking on the same button

Monosnap.screencast.2024-09-15.18-31-51.mp4

Reviewers: the main logic is in editor/src/components/inspector/controls/advanced-grid-modal.tsx

Manual Tests:
I hereby swear that:

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Sep 11, 2024

Try me

@relativeci
Copy link
Copy Markdown

relativeci Bot commented Sep 11, 2024

#14226 Bundle Size — 62.64MiB (+0.02%).

04ede4d(current) vs 916e8b9 master#14225(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics  Change 4 changes Regression 1 regression
                 Current
#14226
     Baseline
#14225
Regression  Initial JS 45.76MiB(+0.02%) 45.75MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 22.33% 0%
No change  Chunks 30 30
No change  Assets 33 33
Change  Modules 4386(+0.02%) 4385
No change  Duplicate Modules 523 523
Change  Duplicate Code 31.64%(-0.03%) 31.65%
No change  Packages 472 472
No change  Duplicate Packages 70 70
Bundle size by type  Change 2 changes Regression 1 regression Improvement 1 improvement
                 Current
#14226
     Baseline
#14225
Regression  JS 62.63MiB (+0.02%) 62.62MiB
Improvement  HTML 11.12KiB (-0.32%) 11.16KiB

Bundle analysis reportBranch feat/grid-advanced-modalProject dashboard


Generated by RelativeCIDocumentationReport issue

@liady liady changed the title feat(grid): advanced grid controls (WIP) feat(grid): advanced grid controls Sep 11, 2024
@liady liady mentioned this pull request Sep 11, 2024
2 tasks
@liady liady marked this pull request as ready for review September 12, 2024 07:43
Comment thread editor/src/components/inspector/controls/advanced-grid-modal.tsx Outdated
Comment thread editor/src/components/inspector/controls/advanced-grid-modal.tsx Outdated
Comment thread editor/src/components/inspector/controls/advanced-grid-modal.tsx Outdated
Comment thread editor/src/uuiui/radix-components.tsx Outdated
@balazsbajorics
Copy link
Copy Markdown
Contributor

image clicking on the ... to open this dropdown prints a flushSync warning to the console: image

99% of the time this means that a dispatch was called from a react lifecycle method which is illegal in our dispatch flow. Instead the dispatch should be called from a setTimeout(0) or the fancy new queueMicrotask

Comment thread editor/src/uuiui/radix-components.tsx Outdated
@liady
Copy link
Copy Markdown
Contributor Author

liady commented Sep 12, 2024

image clicking on the ... to open this dropdown prints a flushSync warning to the console: image
99% of the time this means that a dispatch was called from a react lifecycle method which is illegal in our dispatch flow. Instead the dispatch should be called from a setTimeout(0) or the fancy new queueMicrotask

@balazsbajorics this actually happens on master as well (it's unrelated to the advanced grid popup).
Fixed in this PR - #6358

Comment thread editor/src/components/inspector/controls/advanced-grid-modal.tsx Outdated
Comment thread editor/src/components/inspector/controls/advanced-grid-modal.tsx
Comment thread editor/src/components/inspector/controls/advanced-grid-modal.tsx Outdated
@liady liady merged commit c7d1524 into master Sep 16, 2024
@liady liady deleted the feat/grid-advanced-modal branch September 16, 2024 13:42
liady added a commit that referenced this pull request Dec 13, 2024
This PR adds advanced grid controls:
* add inspector modal for advanced controls
* justify + Align items - as chain controls
* justify + Align content - as dropdowns
* adding the ability to unset by clicking on the same button

<video
src="https://github.com/user-attachments/assets/17fc9368-ad77-4802-9f50-faa0c798136a"></video>

Reviewers: the main logic is in
[`editor/src/components/inspector/controls/advanced-grid-modal.tsx`](https://github.com/concrete-utopia/utopia/pull/6354/files#diff-0c658c76e054ebe3b417768607e4f5b50552cef5825e33d0cf694a966a04bc36)

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
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.

6 participants