Skip to content

Commit b7687ff

Browse files
authored
Grid resize: remove shorthand, serialize other longhand when not auto (#6581)
**Problem:** If a grid is configured with the `gridTemplate` shorthand, resizing the grid does not handle that correctly. **Fix:** This PR handles `gridTemplate` shorthands during template changes via the canvas. **An incremental PR will do the same for the inspector template editing**. For example, if a grid is configured as follows: `gridTemplate: 1fr 2fr / 3fr 4fr`, changing its first column to `3.5fr` will result in the following style: ``` gridTemplateColumns: '3.5fr 4fr', gridTemplateRows: '1fr 2fr' ``` If a grid has a shorthand with an axis being the default (a single `auto` keyword), for example `gridTemplate: auto / 3fr 4fr`, the same change as above will result in: ``` gridTemplateColumns: '3.5fr 4fr', ``` Fixes #6580
1 parent 2bd05c0 commit b7687ff

File tree

4 files changed

+429
-35
lines changed

4 files changed

+429
-35
lines changed

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

+9
Original file line numberDiff line numberDiff line change
@@ -788,3 +788,12 @@ export function findOriginalGrid(
788788

789789
return findOriginalGrid(metadata, parentPath)
790790
}
791+
792+
// Returns whether the given dimensions are made of just one item, being a CSS keyword with value "auto".
793+
export function isJustAutoGridDimension(dimensions: GridDimension[]): boolean {
794+
return (
795+
dimensions.length === 1 &&
796+
dimensions[0].type === 'KEYWORD' &&
797+
dimensions[0].value.value === 'auto'
798+
)
799+
}

0 commit comments

Comments
 (0)