Skip to content

Commit

Permalink
Parse and show grid area name for repeats in the inspector (#6456)
Browse files Browse the repository at this point in the history 
**Problem:**

Area names are not correctly supported in the inspector for `repeat`
dimensions.

**Fix:**

Parse correctly area names for `repeat` entries, and show them in the
inspector. Also, use the indexes (e.g. `1 → 3`) as a title for those
labels.

Fixes #6455
  • Loading branch information
@ruggi
ruggi authored Oct 3, 2024
1 parent d69ec28 commit b7c7f9e
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 53 deletions.
8 changes: 6 additions & 2 deletions editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -653,9 +653,13 @@ function alterGridTemplateDimensions(params: {
if (before.length + after.length === 0) {
return null
}
return gridCSSRepeat(dim.times, [...before, ...after])
return gridCSSRepeat(dim.times, [...before, ...after], dim.areaName)
case 'REPLACE':
return gridCSSRepeat(dim.times, [...before, params.patch.newValue, ...after])
return gridCSSRepeat(
dim.times,
[...before, params.patch.newValue, ...after],
dim.areaName,
)
default:
assertNever(params.patch)
}
Expand Down
4 changes: 3 additions & 1 deletion editor/src/components/editor/store/store-deep-equality-instances.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2023,11 +2023,13 @@ export const GridDimensionKeepDeepEquality: KeepDeepEqualityCall<GridDimension>
)

export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall<GridCSSRepeat> =
combine2EqualityCalls(
combine3EqualityCalls(
(p) => p.times,
createCallWithTripleEquals(),
(p) => p.value,
arrayDeepEquality(GridDimensionKeepDeepEquality),
(p) => p.areaName,
NullableStringKeepDeepEquality,
gridCSSRepeat,
)

Expand Down
94 changes: 59 additions & 35 deletions editor/src/components/inspector/common/css-utils.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1827,33 +1827,45 @@ describe('stringifyGridDimension', () => {
it('repeat', async () => {
expect(
stringifyGridDimension(
gridCSSRepeat(3, [
gridCSSKeyword(cssKeyword('auto'), null),
gridCSSKeyword(cssKeyword('min-content'), null),
gridCSSNumber(cssNumber(123, 'px'), null),
]),
gridCSSRepeat(
3,
[
gridCSSKeyword(cssKeyword('auto'), null),
gridCSSKeyword(cssKeyword('min-content'), null),
gridCSSNumber(cssNumber(123, 'px'), null),
],
null,
),
),
).toBe(`repeat(3, auto min-content 123px)`)

expect(
stringifyGridDimension(
gridCSSRepeat(3, [
gridCSSKeyword(cssKeyword('auto'), 'foo'),
gridCSSKeyword(cssKeyword('min-content'), 'bar'),
gridCSSNumber(cssNumber(123, 'px'), null),
]),
gridCSSRepeat(
3,
[
gridCSSKeyword(cssKeyword('auto'), 'foo'),
gridCSSKeyword(cssKeyword('min-content'), 'bar'),
gridCSSNumber(cssNumber(123, 'px'), null),
],
'the-area',
),
),
).toBe(`repeat(3, [foo] auto [bar] min-content 123px)`)

expect(
stringifyGridDimension(
gridCSSRepeat(cssKeyword('auto-fit'), [
gridCSSMinmax(
gridCSSNumber(cssNumber(400, 'px'), null),
gridCSSNumber(cssNumber(1, 'fr'), null),
null,
),
]),
gridCSSRepeat(
cssKeyword('auto-fit'),
[
gridCSSMinmax(
gridCSSNumber(cssNumber(400, 'px'), null),
gridCSSNumber(cssNumber(1, 'fr'), null),
null,
),
],
null,
),
),
).toBe(`repeat(auto-fit, minmax(400px, 1fr))`)
})
Expand Down Expand Up @@ -1898,33 +1910,45 @@ describe('printGridDimensionCSS', () => {
it('repeat', async () => {
expect(
printGridDimensionCSS(
gridCSSRepeat(3, [
gridCSSKeyword(cssKeyword('auto'), null),
gridCSSKeyword(cssKeyword('min-content'), null),
gridCSSNumber(cssNumber(123, 'px'), null),
]),
gridCSSRepeat(
3,
[
gridCSSKeyword(cssKeyword('auto'), null),
gridCSSKeyword(cssKeyword('min-content'), null),
gridCSSNumber(cssNumber(123, 'px'), null),
],
null,
),
),
).toBe(`repeat(3, auto min-content 123px)`)

expect(
printGridDimensionCSS(
gridCSSRepeat(3, [
gridCSSKeyword(cssKeyword('auto'), 'foo'),
gridCSSKeyword(cssKeyword('min-content'), 'bar'),
gridCSSNumber(cssNumber(123, 'px'), null),
]),
gridCSSRepeat(
3,
[
gridCSSKeyword(cssKeyword('auto'), 'foo'),
gridCSSKeyword(cssKeyword('min-content'), 'bar'),
gridCSSNumber(cssNumber(123, 'px'), null),
],
'the-area',
),
),
).toBe(`repeat(3, [foo] auto [bar] min-content 123px)`)
).toBe(`[the-area] repeat(3, [foo] auto [bar] min-content 123px)`)

expect(
printGridDimensionCSS(
gridCSSRepeat(cssKeyword('auto-fit'), [
gridCSSMinmax(
gridCSSNumber(cssNumber(400, 'px'), null),
gridCSSNumber(cssNumber(1, 'fr'), null),
null,
),
]),
gridCSSRepeat(
cssKeyword('auto-fit'),
[
gridCSSMinmax(
gridCSSNumber(cssNumber(400, 'px'), null),
gridCSSNumber(cssNumber(1, 'fr'), null),
null,
),
],
null,
),
),
).toBe(`repeat(auto-fit, minmax(400px, 1fr))`)
})
Expand Down
34 changes: 24 additions & 10 deletions editor/src/components/inspector/common/css-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -598,24 +598,31 @@ export type GridCSSKeyword = BaseGridDimension & {
type BaseGridCSSRepeat = {
type: 'REPEAT'
value: Array<GridDimension>
areaName: null
areaName: string | null
}

function baseGridCSSRepeat(value: Array<GridDimension>): BaseGridCSSRepeat {
function baseGridCSSRepeat(
value: Array<GridDimension>,
areaName: string | null,
): BaseGridCSSRepeat {
return {
type: 'REPEAT',
value: value,
areaName: null,
areaName: areaName,
}
}

type GridCSSRepeatStatic = BaseGridCSSRepeat & {
times: number
}

function gridCSSRepeatStatic(times: number, value: Array<GridDimension>): GridCSSRepeatStatic {
function gridCSSRepeatStatic(
times: number,
value: Array<GridDimension>,
areaName: string | null,
): GridCSSRepeatStatic {
return {
...baseGridCSSRepeat(value),
...baseGridCSSRepeat(value, areaName),
times: times,
}
}
Expand All @@ -627,9 +634,10 @@ type GridCSSRepeatDynamic = BaseGridCSSRepeat & {
function gridCSSRepeatDynamic(
times: CSSKeyword<'auto-fill' | 'auto-fit'>,
value: Array<GridDimension>,
areaName: string | null,
): GridCSSRepeatDynamic {
return {
...baseGridCSSRepeat(value),
...baseGridCSSRepeat(value, areaName),
times: times,
}
}
Expand Down Expand Up @@ -682,11 +690,15 @@ export function gridCSSKeyword(
}
}

export function gridCSSRepeat(times: GridCSSRepeatTimes, value: GridDimension[]): GridCSSRepeat {
export function gridCSSRepeat(
times: GridCSSRepeatTimes,
value: GridDimension[],
areaName: string | null,
): GridCSSRepeat {
if (typeof times === 'number') {
return gridCSSRepeatStatic(times, value)
return gridCSSRepeatStatic(times, value, areaName)
} else {
return gridCSSRepeatDynamic(times, value)
return gridCSSRepeatDynamic(times, value, areaName)
}
}

Expand Down Expand Up @@ -1230,6 +1242,8 @@ export function parseGridChildren(
return left('Invalid grid CSS repeat times.')
}

const areaName = getAreaName()

const values = new csstree.List<csstree.CssNode>().fromArray(
otherChildren.filter(
(c) =>
Expand All @@ -1241,7 +1255,7 @@ export function parseGridChildren(
)
const parsedDimensions = parseGridChildren(values)
if (isRight(parsedDimensions)) {
dimensions.push(gridCSSRepeat(times, parsedDimensions.value))
dimensions.push(gridCSSRepeat(times, parsedDimensions.value, areaName))
} else {
return left('Invalid grid CSS repeat values.')
}
Expand Down
18 changes: 13 additions & 5 deletions editor/src/components/inspector/flex-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,12 +542,20 @@ function AxisDimensionControl({
setIsOpen(isDropdownOpen)
}, [])

const isDynamic = React.useMemo(() => {
return indexFrom !== indexTo
}, [indexFrom, indexTo])

const dynamicIndexTitle = React.useMemo(() => {
return `${indexFrom} → ${indexTo}`
}, [indexFrom, indexTo])

const title = React.useMemo(() => {
if (indexFrom === indexTo) {
return value.areaName ?? indexFrom
if (isDynamic) {
return value.areaName ?? dynamicIndexTitle
}
return value.areaName ?? `${indexFrom} → ${indexTo}`
}, [value, indexFrom, indexTo])
return value.areaName ?? indexFrom
}, [value, indexFrom, isDynamic, dynamicIndexTitle])

const gridExpressionInputFocused = useGridExpressionInputFocused()

Expand All @@ -574,7 +582,7 @@ function AxisDimensionControl({
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
title={value.areaName ?? undefined}
title={isDynamic ? dynamicIndexTitle : undefined}
>
{title}
</Subdued>
Expand Down

0 comments on commit b7c7f9e

Please sign in to comment.