fix: get app content out of shadow DOM altogether #2488
Conversation
| @@ -166,6 +132,28 @@ export type UiShellContentProps = { | |||
| }; | |||
| } & UiShellNavComponentProps; | |||
|
|
|||
| const appWindowStyles = { | |||
| border: "1px solid red", | |||
There was a problem hiding this comment.
Was this meant to be in here?
There was a problem hiding this comment.
doh, test code, will remove
| elementToStyle.style.setProperty("position", "absolute"); | ||
| elementToStyle.style.setProperty("top", `${boundingRect.y}px`); | ||
| elementToStyle.style.setProperty("left", `${boundingRect.x}px`); | ||
| elementToStyle.style.setProperty("width", `${boundingRect.width}px`); | ||
| elementToStyle.style.setProperty("height", `${boundingRect.height}px`); |
There was a problem hiding this comment.
I may be missing something real obvious, but why are we inlining these styles on the element instead of using className or emotion or something?
There was a problem hiding this comment.
We're handed a raw HTMLDivElement, so there's not really a good way to do a generated class or emotion or whatnot. Additionally the values are computed, so it would be constantly changing. This is the "good enough" solution IMO.
| [hasStandardAppContentPadding, odysseyDesignTokens], | ||
| ); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
Do we need to debounce this? Is this going to run everytime the browser invokes the animate state during a resize in progress?
There was a problem hiding this comment.
Good thought. That (debounce) is the purpose of the requestAnimationFrame / cancelAnimationFrame below on L205-206
There was a problem hiding this comment.
Thanks. I read more about this after seeing your reply. Interesting that requestAnimationFrame handles this in a performant way.
benschell-okta
dismissed stale reviews from KevinGhadyani-Okta and chrispulsinelli-okta
via
a90f80d
REPLACE_WITH_JIRA_TICKET_NUMBER
Summary
Testing & Screenshots