From f9f8f7aeb4e2715cce1ec08adbff6de729311468 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= Date: Mon, 26 Aug 2024 16:14:51 +0200 Subject: [PATCH] Simplified auto flow options (#6259) ## Problem When `Row dense` is set on then `Auto flow` dropdown, the dropdown shows `Dense` as the selected option. ## Cause It turns out that `gridAutoFlow: 'row dense'` makes its way to the style prop just fine. However, in the DOM `row-dense` is turned into `dense` (so the end product is `grid-auto-flow: dense`). This is not a Utopia-specific problem, it's reproducible in CodeSandbox as well: https://codesandbox.io/p/sandbox/muddy-glitter-djhdvv?file=%2Fsrc%2FApp.tsx%3A15%2C38. We suspect that `row` and `row dense` means the same thing, so the browser omits `row` from `row dense` to keep things simple. ## Fix In order the make the `Auto flow` dropdown non-confusing (even though it's technically correct as it is as long as the style prop is concerned), this PR removes the `row dense` option, and only keeps `dense` ### 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 --- editor/src/components/inspector/flex-section.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx index 2b636c3ba667..71cdf23ff8c0 100644 --- a/editor/src/components/inspector/flex-section.tsx +++ b/editor/src/components/inspector/flex-section.tsx @@ -857,10 +857,18 @@ const unsetSelectOption = regularRadixSelectOption({ placeholder: true, }) +// `row dense` is omitted from here, because it turns out that the when it's +// written to the DOM, it's turned into `dense`. This surfaced as a bug, because +// even though `row dense` was set in the style prop, the DOM walker put `dense` +// into the specialSizeMeasurements entry for `grid-auto-flow`. We suspect that +// `row` is implicit in `dense`, and the browser omits the `row` to keep things +// simple +const RESTRICTED_GRID_AUTO_FLOW_VALUES: GridAutoFlow[] = ['dense', 'row', 'column', 'column dense'] + const autoflowOptions = [ unsetSelectOption, separatorRadixSelectOption(), - ...GridAutoFlowValues.map(selectOption), + ...RESTRICTED_GRID_AUTO_FLOW_VALUES.map(selectOption), ] const AutoFlowControl = React.memo(() => {