New useEuiContainerQuery hook

[acstll]

Summary

Closes #8963

Introduces the useEuiContainerQuery hook that makes it possible to observe container query changes on a ref.

API

useEuiContainerQuery

useEuiContainerQuery<T extends HTMLElement = HTMLElement>(
  containerCondition: string,
  name?: string
): { ref: MutableRefObject<T | null>, matches: boolean } 

param	type	default value	description
containerCondition	string	undefined	A CSS <container-condition> string, e.g. (width > 400px)
name	string	undefined	Optional container name, e.g. sidebar

Why are we making this change?

As part of an epic to get initial container queries support in the eui library.

Impact to users

🟢 None, this is a new feature.

QA

• Play with the temporary EuiResizableContainer story in Storybook (link) — ideally also run it locally and modify it

Remarks

• The test story will be reverted before merging: 8efe389
• Docs will be added on a separate PR

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[weronikaolejniczak]

I noticed some nits while checking out of curiosity. This is not a full review, I'd wait for @tkajtoch because he has more context. Otherwise code looks good to me but I haven't tested. IMHO good decision on using that polyfill 💪🏻

[acstll]

I refactored the polyfill code into a plain function, added some clean up logic, and it's working nicely… (also left a couple of comments above)

@tkajtoch how would you measure any possible performance impact? (there's a single call to getComputedStyle with no access to props e.g. height, and only calling getPropertyValue which shouldn't cause any trouble) (but I'm not certain)

if this is aligned with what you had in mind originally, I'm glad to wrap it up (add tests, JSDoc, etc.) — let me know what you think 🙂

[tkajtoch]

Changes look good and work as expected. I tested the performance of the added hook and didn't find any bottlenecks. Considering this is a beta hook and it isn't used anywhere, we can optimize when necessary.

Don't forget to revert 8efe389 :D

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 94dc0f1
• Documentation website
• Storybook

History

• 💚 Build #2218 succeeded 624bd0e
• 💚 Build #2213 succeeded e8fe837
• 💚 Build #2161 succeeded f2c03f9
• 💚 Build #2160 succeeded aa52db3
• 💚 Build #2158 succeeded 33d95b0
• 💔 Build #2131 failed 7587bee

cc @acstll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 94dc0f1

History

• 💚 Build #5423 succeeded e8fe837
• 💚 Build #5388 succeeded f2c03f9
• 💚 Build #5387 succeeded aa52db3
• 💔 Build #5362 failed 7587bee
• 💚 Build #5355 succeeded 4e5e43b

cc @acstll