Skip to content

Commit

Permalink
Simplified auto flow options (#6259)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
bkrmendy authored Aug 26, 2024
1 parent cac3d9c commit f9f8f7a
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion editor/src/components/inspector/flex-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down

0 comments on commit f9f8f7a

Please sign in to comment.