Skip to content

Commit

Permalink
Border radius control adds overflow hidden (#4272)
Browse files Browse the repository at this point in the history 
* Adds overflow hidden when setting border radius

* Simplify
  • Loading branch information
@gbalint
gbalint authored Oct 2, 2023
1 parent 6e077c3 commit 7dc2077
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 14 deletions.
65 changes: 51 additions & 14 deletions ...mponents/canvas/canvas-strategies/strategies/set-border-radius-strategy.spec.browser2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
import { CircularHandleTestId } from '../../controls/select-mode/border-radius-control'
import {
mouseClickAtPoint,
mouseDoubleClickAtPoint,
mouseDragFromPointToPoint,
mouseDragFromPointWithDelta,
mouseEnterAtPoint,
Expand Down Expand Up @@ -187,7 +186,8 @@ describe('set border radius strategy', () => {
codeForDragTest(`borderTopLeftRadius: '24px',
borderTopRightRadius: '15px',
borderBottomRightRadius: '16px',
borderBottomLeftRadius: '17px'`),
borderBottomLeftRadius: '17px',
overflow: 'hidden'`),
)
})

Expand All @@ -202,7 +202,7 @@ describe('set border radius strategy', () => {

await doDragTest(editor, 'tl', 400, emptyModifiers)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '${expectedBorderRadius}px'`),
codeForDragTest(`borderRadius: '${expectedBorderRadius}px', overflow: 'hidden'`),
)
})

Expand All @@ -213,7 +213,7 @@ describe('set border radius strategy', () => {
)
await doDragTest(editor, 'tl', -20, emptyModifiers)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '0px'`),
codeForDragTest(`borderRadius: '0px', overflow: 'hidden'`),
)
})

Expand All @@ -240,7 +240,7 @@ describe('set border radius strategy', () => {
await doDragTest(editor, 'tl', 400, emptyModifiers)

expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '200px'`),
codeForDragTest(`borderRadius: '200px', overflow: 'hidden'`),
)

await resizeElement(
Expand All @@ -267,6 +267,7 @@ describe('set border radius strategy', () => {
width: 300,
height: 100,
borderRadius: '40px',
overflow: 'hidden',
}}
/>
</div>`),
Expand All @@ -280,7 +281,7 @@ describe('set border radius strategy', () => {
)
await doDragTest(editor, 'tl', 10, emptyModifiers)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '22px'`),
codeForDragTest(`borderRadius: '22px', overflow: 'hidden'`),
)
})

Expand All @@ -292,7 +293,7 @@ describe('set border radius strategy', () => {
)
await doDragTest(editor, 'tl', 10, emptyModifiers)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '24px'`),
codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
)
})

Expand All @@ -303,7 +304,7 @@ describe('set border radius strategy', () => {
)
await doDragTest(editor, 'tr', 10, emptyModifiers)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '24px'`),
codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
)
})

Expand All @@ -314,7 +315,7 @@ describe('set border radius strategy', () => {
)
await doDragTest(editor, 'bl', 10, emptyModifiers)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '24px'`),
codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
)
})

Expand All @@ -325,7 +326,7 @@ describe('set border radius strategy', () => {
)
await doDragTest(editor, 'br', 10, emptyModifiers)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`borderRadius: '24px'`),
codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
)
})
})
Expand All @@ -341,7 +342,8 @@ describe('set border radius strategy', () => {
codeForDragTest(`borderTopLeftRadius: '24px',
borderTopRightRadius: '14px',
borderBottomRightRadius: '14px',
borderBottomLeftRadius: '14px',`),
borderBottomLeftRadius: '14px',
overflow: 'hidden'`),
)
})

Expand All @@ -355,7 +357,8 @@ describe('set border radius strategy', () => {
codeForDragTest(`borderTopLeftRadius: '14px',
borderTopRightRadius: '24px',
borderBottomRightRadius: '14px',
borderBottomLeftRadius: '14px',`),
borderBottomLeftRadius: '14px',
overflow: 'hidden'`),
)
})

Expand All @@ -369,7 +372,8 @@ describe('set border radius strategy', () => {
codeForDragTest(`borderTopLeftRadius: '14px',
borderTopRightRadius: '14px',
borderBottomRightRadius: '14px',
borderBottomLeftRadius: '24px',`),
borderBottomLeftRadius: '24px',
overflow: 'hidden'`),
)
})

Expand All @@ -383,10 +387,43 @@ describe('set border radius strategy', () => {
codeForDragTest(`borderTopLeftRadius: '14px',
borderTopRightRadius: '14px',
borderBottomRightRadius: '24px',
borderBottomLeftRadius: '14px',`),
borderBottomLeftRadius: '14px',
overflow: 'hidden'`),
)
})
})

describe('Overflow property handling', () => {
it('does not overwrite existing overflow property', async () => {
const editor = await renderTestEditorWithCode(
codeForDragTest(`borderRadius: '14px', overflow: 'visible',`),
'await-first-dom-report',
)
await doDragTest(editor, 'tl', 10, cmdModifier)
expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
codeForDragTest(`overflow: 'visible',
borderTopLeftRadius: '24px',
borderTopRightRadius: '14px',
borderBottomRightRadius: '14px',
borderBottomLeftRadius: '14px'`),
)
})

it('shows toast message', async () => {
const editor = await renderTestEditorWithCode(
codeForDragTest(`borderRadius: '14px',`),
'await-first-dom-report',
)
await doDragTest(editor, 'tl', 10, cmdModifier)
expect(editor.getEditorState().editor.toasts).toHaveLength(1)
expect(editor.getEditorState().editor.toasts[0]).toEqual({
id: 'property-added',
level: 'NOTICE',
message: 'Element now hides overflowing content',
persistent: false,
})
})
})
})

function codeForDragTest(borderRadius: string): string {
Expand Down
34 changes: 34 additions & 0 deletions editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
isJSXElement,
jsxElementName,
jsxElementNameEquals,
modifiableAttributeIsAttributeNotFound,
} from '../../../../core/shared/element-template'
import type { CanvasPoint, CanvasVector, Size } from '../../../../core/shared/math-utils'
import {
Expand Down Expand Up @@ -69,6 +70,11 @@ import {
import type { InteractionSession } from '../interaction-state'
import { deleteProperties } from '../../commands/delete-properties-command'
import { allElemsEqual } from '../../../../core/shared/array-utils'
import * as PP from '../../../../core/shared/property-path'
import { withUnderlyingTarget } from '../../../editor/store/editor-state'
import type { ProjectContentTreeRoot } from '../../../assets'
import { getModifiableJSXAttributeAtPath } from '../../../../core/shared/jsx-attributes'
import { showToastCommand } from '../../commands/show-toast-command'

export const SetBorderRadiusStrategyId = 'SET_BORDER_RADIUS_STRATEGY'

Expand Down Expand Up @@ -149,6 +155,7 @@ export const setBorderRadiusStrategy: CanvasStrategyFactory = (
strategyApplicationResult([
setCursorCommand(CSSCursor.Radius),
...commands(selectedElement),
...getAddOverflowHiddenCommands(selectedElement, canvasState.projectContents),
setElementsToRerenderCommand(selectedElements),
]),
}
Expand Down Expand Up @@ -586,3 +593,30 @@ const setShorthandStylePropertyCommand =
]),
setProperty('always', target, StyleProp('borderRadius'), value),
]

function getAddOverflowHiddenCommands(
target: ElementPath,
projectContents: ProjectContentTreeRoot,
): Array<CanvasCommand> {
const overflowProp = PP.create('style', 'overflow')

const propertyExists = withUnderlyingTarget(target, projectContents, false, (_, element) => {
if (isJSXElement(element)) {
return foldEither(
() => false,
(value) => !modifiableAttributeIsAttributeNotFound(value),
getModifiableJSXAttributeAtPath(element.props, overflowProp),
)
} else {
return false
}
})

if (propertyExists) {
return []
}
return [
showToastCommand('Element now hides overflowing content', 'NOTICE', 'property-added'),
setProperty('always', target, overflowProp, 'hidden'),
]
}

0 comments on commit 7dc2077

Please sign in to comment.