From b1ee4e4437627f971534a61ebb1cb7bc36b2eb7c Mon Sep 17 00:00:00 2001 From: Toppanto Bence Date: Wed, 17 Jun 2026 17:05:30 +0200 Subject: [PATCH] fix(ui-dialog): allow consumers to override inherited border-radius MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dialog forced `border-radius: inherit` via an inline style so that content like Menu and DateInput could inherit a wrapping View's radius. Inline styles (and an equivalent emotion `css` rule) cannot be overridden by a consumer's own `css` prop, so components like Modal could not set their own border-radius. Wrap the `inherit` rule in an `@layer` cascade layer instead. Unlayered consumer styles always win over layered ones regardless of specificity or source order, so an explicit border-radius from Modal takes effect while the inherit fallback still applies when no radius is provided. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/ui-dialog/src/Dialog/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ui-dialog/src/Dialog/index.tsx b/packages/ui-dialog/src/Dialog/index.tsx index 74754fddb5..05ebf9bb17 100644 --- a/packages/ui-dialog/src/Dialog/index.tsx +++ b/packages/ui-dialog/src/Dialog/index.tsx @@ -23,6 +23,7 @@ */ import { Component } from 'react' +import { css } from '@emotion/react' import { omitProps, getElementType } from '@instructure/ui-react-utils' import { findDOMNode, requestAnimationFrame } from '@instructure/ui-dom-utils' @@ -173,7 +174,11 @@ 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 + css={css` + @layer dialogBase { + & { border-radius: inherit; } + } + `} //making sure it inherits from containers if nothing is specified from outside and use the outside specifiers if they are present, e.g.:modal ref={this.getRef} > {this.props.children}