From e5880af5ae632af5b7c5a2fe1aad97b49dcc5522 Mon Sep 17 00:00:00 2001 From: adamlobler Date: Wed, 27 May 2026 18:49:33 +0200 Subject: [PATCH 1/4] style(ui-dialog): add style prop to dialog to be able to edit the borderradius --- packages/ui-dialog/src/Dialog/index.tsx | 2 +- packages/ui-dialog/src/Dialog/props.ts | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/ui-dialog/src/Dialog/index.tsx b/packages/ui-dialog/src/Dialog/index.tsx index 8fdc15db9f..b9a1504de7 100644 --- a/packages/ui-dialog/src/Dialog/index.tsx +++ b/packages/ui-dialog/src/Dialog/index.tsx @@ -172,7 +172,7 @@ class Dialog extends Component { role === 'dialog' && this.props.shouldContainFocus ? true : undefined } className={this.props.className} // TODO in V2 remove className, there is no usage of it. - style={{ borderRadius: 'inherit' }} // ensure the dialog inherits border radius from View + style={{ borderRadius: 'inherit', ...this.props.style }} ref={this.getRef} > {this.props.children} diff --git a/packages/ui-dialog/src/Dialog/props.ts b/packages/ui-dialog/src/Dialog/props.ts index c18324c2f3..240c66c739 100644 --- a/packages/ui-dialog/src/Dialog/props.ts +++ b/packages/ui-dialog/src/Dialog/props.ts @@ -41,6 +41,11 @@ type DialogOwnProps = { */ as?: AsElementType display?: 'auto' | 'block' | 'inline-block' + /** + * Inline styles applied to the root element. Merged with the default + * `borderRadius: inherit` so consumers can override it. + */ + style?: React.CSSProperties /** * The aria-label to read for screen reader. When specified, it will automatically set role="dialog". */ @@ -77,7 +82,8 @@ const allowedProps: AllowedPropKeys = [ 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'shouldFocusOnOpen', - 'elementRef' + 'elementRef', + 'style' ] export type { DialogProps } From fe073f17900f24a1ce32040b43a1efc2c06f5010 Mon Sep 17 00:00:00 2001 From: adamlobler Date: Wed, 27 May 2026 18:52:29 +0200 Subject: [PATCH 2/4] fix(ui-modal): fixed border radius on modals and added margin to fullscreen variant --- packages/ui-modal/src/Modal/v2/index.tsx | 11 ++--------- packages/ui-modal/src/Modal/v2/props.ts | 2 +- packages/ui-modal/src/Modal/v2/styles.ts | 7 +++---- pnpm-lock.yaml | 8 ++++---- 4 files changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/ui-modal/src/Modal/v2/index.tsx b/packages/ui-modal/src/Modal/v2/index.tsx index 036981dbf7..7ba72cf07b 100644 --- a/packages/ui-modal/src/Modal/v2/index.tsx +++ b/packages/ui-modal/src/Modal/v2/index.tsx @@ -213,13 +213,11 @@ class Modal extends Component { shouldCloseOnDocumentClick, shouldReturnFocus, liveRegion, - size, constrain, as, styles } = this.props - const isFullScreen = size === 'fullscreen' const dialog = ( { liveRegion={liveRegion} onDismiss={onDismiss} css={styles?.modal} + style={{ borderRadius: styles?.borderRadius as string }} ref={this.contentRef} // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667 > @@ -242,13 +241,7 @@ class Modal extends Component { ) return ( - + {dialog} ) diff --git a/packages/ui-modal/src/Modal/v2/props.ts b/packages/ui-modal/src/Modal/v2/props.ts index 78e795f10f..8f1479531b 100644 --- a/packages/ui-modal/src/Modal/v2/props.ts +++ b/packages/ui-modal/src/Modal/v2/props.ts @@ -184,7 +184,7 @@ type ModalProps = ModalOwnProps & OtherHTMLAttributes type ModalStyle = ComponentStyle< - 'modal' | 'constrainContext' | 'joinedHeaderAndBody' + 'modal' | 'constrainContext' | 'joinedHeaderAndBody' | 'borderRadius' > type ModalState = { diff --git a/packages/ui-modal/src/Modal/v2/styles.ts b/packages/ui-modal/src/Modal/v2/styles.ts index 3e3f98499f..af4ca468f0 100644 --- a/packages/ui-modal/src/Modal/v2/styles.ts +++ b/packages/ui-modal/src/Modal/v2/styles.ts @@ -73,9 +73,7 @@ const generateStyle = ( flex: 1, width: '100%', height: '100%', - boxShadow: 'none', - border: 'none', - borderRadius: 0 + margin: componentTheme.fullScreenMargin } } const backgroundStyles = @@ -123,7 +121,8 @@ const generateStyle = ( overflowY: 'auto', maxHeight: '20rem' } - } + }, + borderRadius: componentTheme.borderRadius } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e8429b3949..11a453bf15 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3703,7 +3703,7 @@ importers: version: link:../command-utils '@instructure/instructure-design-tokens': specifier: github:instructure/instructure-design-tokens - version: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08 + version: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/6085eab6b704bbcaf27a1bf6626ae8d092fce4df '@instructure/pkg-utils': specifier: workspace:* version: link:../pkg-utils @@ -6711,8 +6711,8 @@ packages: '@types/node': optional: true - '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08': - resolution: {tarball: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08} + '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/6085eab6b704bbcaf27a1bf6626ae8d092fce4df': + resolution: {tarball: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/6085eab6b704bbcaf27a1bf6626ae8d092fce4df} version: 1.0.0 '@isaacs/cliui@8.0.2': @@ -15459,7 +15459,7 @@ snapshots: optionalDependencies: '@types/node': 22.19.15 - '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08': + '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/6085eab6b704bbcaf27a1bf6626ae8d092fce4df': dependencies: glob: 13.0.6 From 667b57117254e00ab2d0973d1bfc5b1b1f91c841 Mon Sep 17 00:00:00 2001 From: adamlobler Date: Thu, 28 May 2026 10:48:49 +0200 Subject: [PATCH 3/4] chore(ui-dialog): add comment about the inherit border radius --- packages/ui-dialog/src/Dialog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-dialog/src/Dialog/index.tsx b/packages/ui-dialog/src/Dialog/index.tsx index b9a1504de7..9af3471c5c 100644 --- a/packages/ui-dialog/src/Dialog/index.tsx +++ b/packages/ui-dialog/src/Dialog/index.tsx @@ -172,7 +172,7 @@ class Dialog extends Component { role === 'dialog' && this.props.shouldContainFocus ? true : undefined } className={this.props.className} // TODO in V2 remove className, there is no usage of it. - style={{ borderRadius: 'inherit', ...this.props.style }} + style={{ borderRadius: 'inherit', ...this.props.style }} // ensure the dialog inherits border radius from View ref={this.getRef} > {this.props.children} From 7d3d6f048027ae6fe459ce3f1a149bd333557d23 Mon Sep 17 00:00:00 2001 From: adamlobler Date: Thu, 28 May 2026 12:46:52 +0200 Subject: [PATCH 4/4] fix(ui-modal): remove border radius on fullscreen modals on small screens --- packages/ui-modal/src/Modal/v2/index.tsx | 20 +++++++++++++++----- packages/ui-modal/src/Modal/v2/props.ts | 1 + packages/ui-modal/src/Modal/v2/styles.ts | 11 ++++++++--- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/ui-modal/src/Modal/v2/index.tsx b/packages/ui-modal/src/Modal/v2/index.tsx index 7ba72cf07b..8cb2e63dd5 100644 --- a/packages/ui-modal/src/Modal/v2/index.tsx +++ b/packages/ui-modal/src/Modal/v2/index.tsx @@ -84,6 +84,7 @@ class Modal extends Component { transitioning: false, open: props.open ?? false, windowHeight: 99999, + windowWidth: 99999, bodyScrollAriaLabel: undefined } } @@ -99,7 +100,7 @@ class Modal extends Component { componentDidMount() { this.props.makeStyles?.() - window.addEventListener('resize', this.updateHeight) + window.addEventListener('resize', this.updateSize) } componentDidUpdate(prevProps: ModalProps) { @@ -110,11 +111,14 @@ class Modal extends Component { } componentWillUnmount() { - window.removeEventListener('resize', this.updateHeight) + window.removeEventListener('resize', this.updateSize) } - updateHeight = () => { - this.setState({ windowHeight: window.innerHeight }) + updateSize = () => { + this.setState({ + windowHeight: window.innerHeight, + windowWidth: window.innerWidth + }) } get defaultFocusElement() { @@ -215,9 +219,15 @@ class Modal extends Component { liveRegion, constrain, as, + size, styles } = this.props + const isFullScreen = size === 'fullscreen' + const isSmallScreen = this.state.windowWidth < 480 // 30em at 16px base + const borderRadius = + isFullScreen && isSmallScreen ? '0' : (styles?.borderRadius as string) // fullscreen modals on small screens remove border radius so the modal fills edge-to-edge + const dialog = ( { liveRegion={liveRegion} onDismiss={onDismiss} css={styles?.modal} - style={{ borderRadius: styles?.borderRadius as string }} + style={{ borderRadius }} ref={this.contentRef} // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667 > diff --git a/packages/ui-modal/src/Modal/v2/props.ts b/packages/ui-modal/src/Modal/v2/props.ts index 8f1479531b..22e76b4d21 100644 --- a/packages/ui-modal/src/Modal/v2/props.ts +++ b/packages/ui-modal/src/Modal/v2/props.ts @@ -191,6 +191,7 @@ type ModalState = { transitioning: boolean open: boolean windowHeight: number + windowWidth: number /** * The `aria-label` on the Modal's body if it's scrollable. */ diff --git a/packages/ui-modal/src/Modal/v2/styles.ts b/packages/ui-modal/src/Modal/v2/styles.ts index af4ca468f0..5a9329d123 100644 --- a/packages/ui-modal/src/Modal/v2/styles.ts +++ b/packages/ui-modal/src/Modal/v2/styles.ts @@ -71,9 +71,14 @@ const generateStyle = ( }, fullscreen: { flex: 1, - width: '100%', - height: '100%', - margin: componentTheme.fullScreenMargin + margin: componentTheme.fullScreenMargin, + '@media (max-width: 30em)': { + // small breakpoint = 480px + margin: 0, + boxShadow: 'none', + border: 'none', + borderRadius: 0 + } } } const backgroundStyles =