fix(Tile): recalculate tile rect height on component did mount

[dakahn]

Closes #9187

Adds a resize observer to Tile that recalculates the rect height to account for tiles initially rendered as hidden (like in a set of tabs)

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 2250284

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/614ddea67b8b480008df2766

😎 Browse the preview: https://deploy-preview-9593--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 2250284

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/614ddea6a2c3040007cf051b

😎 Browse the preview: https://deploy-preview-9593--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 2250284

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/614ddea6ca1aac00087e1a1c

😎 Browse the preview: https://deploy-preview-9593--carbon-components-react.netlify.app

[sstrubberg]

Getting a CORS error in deploy preview.

This reminds me exactly of a PR i just recently spent way too much time debugging. I think it's Storybook acting up. I ended up removing the Storybook Actions Add-on for Button so it would work.

Also, looks like tests are failing.

[joshblack]

Just a small note with the id change.

A question that I don't know if we considered, why do we need to calculate the height of the "above the fold" content in the first place? Can't we just only render the above the fold content until the tile is expanded and then render the rest of the content? 🤔

[dakahn]

Just a small note with the id change.

A question that I don't know if we considered, why do we need to calculate the height of the "above the fold" content in the first place? Can't we just only render the above the fold content until the tile is expanded and then render the rest of the content?

That makes sense to me @joshblack -- should I open a ticket for a minor tile refactor?

[joshblack]

@dakahn sounds great to me!

[dakahn]

@joshblack wrapped the resizeObserver work in before/after each blocks and scoped it to the expandable tile tests, but it doesn't seem to be firing off properly

[joshblack]

@dakahn I think it'll need to be global instead of window, potentially, since it's saying ResizeObserver is undefined and so it's not resolving it from the global scope

[dakahn]

Hmmm -- @joshblack something funnier is going on I don't understand. If I lift up window.ResizeOBserver = .... globally it works (like I would expect), but if I wrap it in beforeEach it breaks, but maybe beforeEach has to be inside a describe block?

[joshblack]

@dakahn yeah, I'd make sure that it's inside of the describe block for sure 👍 (let me know if I'm misunderstanding!)

[joshblack]

@dakahn just pushed up a fix that should cover it

[sstrubberg]

Still getting CORS errors on deploy preview.

[sstrubberg]

Looks like the CORS errors are only present on Netlify's deploy preview. They work perfectly locally and in prod.