[Banner] Measure contentNode on change rather than window.onResize

[LA1CH3]

WHY are these changes introduced?

Closes #11770

This PR fixes an issue where the blockAlign value was not being properly updated when contentNode.offsetHeight would change. This was because the measurement/calculation would only trigger on window.resize, and would not trigger via other actions (such as a banner having content dynamically added/removed).

WHAT is this pull request doing?

I've fixed this by using ResizeObserver to trigger recalculation whenever contentNode is resized, rather than the current handleResize which is only triggered on window.resize.

How to 🎩

Storybook link
Web w/ snapshot

This includes an example story where the banner content is dynamically changed, resulting in contentNode changes, and triggering the correct blockAlign property applied.

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[sophschneider]

Thanks for fixing this! 🎉

Would you be able to /snapit and do a quick tophat in the admin? Storybook looked good.

Also I noticed there was a flash when expanding the content where there is a render of the new content before the icon is adjusted. Its not blocking but I wonder how we could fix this 🤔
https://github.com/Shopify/polaris/assets/20652326/4d4731ef-63ff-434a-b9f7-6583b8166d23

[LA1CH3]

/snapit

[github-actions]

🫰✨ Thanks @LA1CH3! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240503143333",
"@shopify/polaris": "0.0.0-snapshot-20240503143333",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240503143333",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240503143333"

[LA1CH3]

@sophschneider I see that issue too 🤔 I have switched to use an unwrapped (as in, not wrapped in useCallback) callback ref for contentNode instead of a ResizeObserver and I no longer see the delay. I guess the only downside of this pattern is that the callback ref will run on every re-render, regardless if contentNode size has changed or not. Its probably a relatively inexpensive computation though, so maybe this is acceptable as it avoids layout shift. Thoughts?

You can view the updated storybook link here.

[LA1CH3]

/snapit

[github-actions]

🫰✨ Thanks @LA1CH3! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240503151856",
"@shopify/polaris": "0.0.0-snapshot-20240503151856",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240503151856",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240503151856"

[LA1CH3]

@sophschneider I've included a web + snapshot link in the PR for tophatting in the admin. Lmk what you think about the callback ref approach.

[chloerice]

Works great @LA1CH3!

[chloerice]

Suggested change

	Use callback ref to more accurately detect content changes in Banner
	Fixed `Banner` not accurately detecting content changes

[LA1CH3]

Hey @chloerice so it actually looks like the issue was because when the callback ref was running on initial render, iconNode and dismissIconNode were both undefined- so the blockAlign was just defaulting to its initial value of center.

I think the best way to tackle this in response to any of the elements changing is to use ResizeObserver. I tried this originally and there was/is a very brief delay in the blockAlign property changing; I think this is because the logic runs only after one of the nodes has already resized. I tried testing it again now and sometimes there is a delay, sometimes not. Do you mind testing again and lmk what you think?

[LA1CH3]

Closing in favor of https://github.com/Shopify/polaris-internal/pull/65