Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fill container percentage values #4291

Merged
merged 4 commits into from
Oct 3, 2023
Merged

Fill container percentage values #4291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7134a72
round percent values in adjust-css-length-command
bkrmendy Oct 2, 2023
e65a871
only classifiy 100% as fill container
bkrmendy Oct 2, 2023
aafb9d6
tests
bkrmendy Oct 2, 2023
78b3c94
better test name
bkrmendy Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions ...nvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1338,6 +1338,64 @@ export var storyboard = (
const resizeControl = getResizeControl(renderResult, EdgePositionBottomRight)
expect(resizeControl).toBeNull()
})
it('percent values are rounded to 2 decimal places after resizing', async () => {
const renderResult = await renderTestEditorWithCode(
makeTestProjectCodeWithSnippet(`
<div
style={{
backgroundColor: '#aaaaaa33',
position: 'absolute',
left: 92,
top: 162,
width: 430,
height: 378,
}}
data-uid='aaa'
>
<div
style={{
backgroundColor: '#aaaaaa33',
width: '100%',
height: '100%',
contain: 'layout',
}}
data-uid='bbb'
/>
</div>
`),
'await-first-dom-report',
)

const target = EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/bbb`)

await renderResult.dispatch([selectComponents([target], false)], true)
await resizeElement(renderResult, { x: -10, y: -10 }, EdgePositionBottomRight, emptyModifiers)
expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
makeTestProjectCodeWithSnippet(`
<div
style={{
backgroundColor: '#aaaaaa33',
position: 'absolute',
left: 92,
top: 162,
width: 430,
height: 378,
}}
data-uid='aaa'
>
<div
style={{
backgroundColor: '#aaaaaa33',
width: '97.67%',
height: '97.35%',
contain: 'layout',
}}
data-uid='bbb'
/>
</div>
`),
)
})
describe('snap lines', () => {
it('horizontal snap lines are shown when resizing a multiselection', async () => {
const editor = await renderTestEditorWithCode(
Expand Down
3 changes: 2 additions & 1 deletion editor/src/components/canvas/commands/adjust-css-length-command.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
setJSXValuesAtPaths,
unsetJSXValuesAtPaths,
} from '../../../core/shared/jsx-attributes'
import { roundTo } from '../../../core/shared/math-utils'
import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
import * as PP from '../../../core/shared/property-path'
import type { DerivedState, EditorState } from '../../editor/store/editor-state'
Expand Down Expand Up @@ -359,7 +360,7 @@ function updatePercentageValueByPixel(
const currentValuePercent = currentValue.value
const offsetInPercent = (byValue / parentDimensionPx) * 100
const newValueCssNumber: CSSNumber = {
value: currentValuePercent + offsetInPercent,
value: roundTo(currentValuePercent + offsetInPercent, 2),
unit: currentValue.unit,
}
const newValue = printCSSNumber(newValueCssNumber, null)
Expand Down
2 changes: 1 addition & 1 deletion editor/src/components/inspector/inspector-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -622,7 +622,7 @@ export function detectFillHugFixedState(
const isGroupLike = treatElementAsGroupLike(metadata, elementPath)

const parsed = defaultEither(null, parseCSSLengthPercent(simpleAttribute))
if (parsed != null && parsed.unit === '%') {
if (parsed != null && parsed.unit === '%' && parsed.value === 100) {
const valueWithType: FixedHugFill = { type: isGroupLike ? 'hug-group' : 'fill', value: parsed }
return { fixedHugFill: valueWithType, controlStatus: 'simple' }
}
Expand Down
47 changes: 47 additions & 0 deletions editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,53 @@ describe('Fixed / Fill / Hug control', () => {
absoluteProjectWithInjectedStyle(`width: '100%', height: '100%'`),
)
})

it('detects fill container on a static element', async () => {
const editor = await renderTestEditorWithCode(
makeTestProjectCodeWithSnippet(`
<div
style={{
backgroundColor: '#aaaaaa33',
width: '100%',
height: '100%',
contain: 'layout',
}}
data-uid='thediv'
/>
`),
'await-first-dom-report',
)

await selectComponentsForTest(editor, [
EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`),
])

expect(editor.renderedDOM.getAllByText(FillContainerLabel).length).toEqual(2)
})

it('percent values that are not 100% are not classified as fill container', async () => {
const editor = await renderTestEditorWithCode(
makeTestProjectCodeWithSnippet(`
<div
style={{
backgroundColor: '#aaaaaa33',
width: '90%',
height: '90%',
contain: 'layout',
}}
data-uid='thediv'
/>
`),
'await-first-dom-report',
)

await selectComponentsForTest(editor, [
EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`),
])

expect(editor.renderedDOM.queryAllByText(FillContainerLabel).length).toEqual(0)
expect(editor.renderedDOM.getAllByText(FixedLabel).length).toEqual(2)
})
})

describe('hug contents', () => {
Expand Down