fix(#2912): BreakpointProvider: recalculate breakpoint handler and matched breakpoints if breakpoints are updated

[zbrownell]

Closes: https://github.com/adobe/react-spectrum/issues/2912

✅ Pull Request Checklist:

• [x] Included link to corresponding React Spectrum GitHub Issue.
• [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• [x] Filled out test instructions.
• [ ] Updated documentation (if it already exists for this component).
• [x] Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

1. Sync branch (build, start storybook, etc)
2. Open http://localhost:9003/?path=/story/provider--breakpoints-updated in a new browser
3. You will see increment and decrement buttons that allow you to adjust the current Provider breakpoints
4. You will see the corresponding boxes appear/disappear as their respective responsive styles change

🧢 Your Project:

Adobe | Admin Console

[zbrownell]

@snowystinger Updated the changes and overhauled the storybook (probably looks pretty familiar). Let me know if there is anything else you see that looks awry and I'll try to respond ASAP. Thanks! 😄

[snowystinger]

Ok, I looked into it some more, and for whatever reason, useResizeObserver is sometimes invoked for containerRef size changes even when getBoundClientRect returns the same value each time (resizing of iframe, instead of container), I assume it has something to do with divs being display block, but I don't actually know.

this causes new breakpoints to be calculated, which seem to be incorrect sometimes

I'll keep looking tomorrow if I have time, otherwise you can reach out to @LFDanLu and he can help you out while I'm OOO

[LFDanLu]

Been playing around with the example and I was able to stop the childBreakpoints from updating by providing a height to the div container (noticed the height of the div container would change when resizing the iframe, not sure why). However, the responsive View now updates upon iframe resizing even if the childBreakpoints aren't updating...

EDIT: Actually, that might actually be the correct behavior the window width is what is used for the breakpoint comparisons. @zbrownell Perhaps you could explain to me what exactly is the expected story behavior here? Perhaps TestContainerQueryContent's onResize is also supposed to be called on window resize so the childBreakpoints can be updated accordingly?

[zbrownell]

@LFDanLu The resize: horizontal style is interpreted/applied (implemented) differently across browsers. So, in Firefox (for instance), you'll only be able to resize horizontally (x-axis), but in Chrome, if it's resizable at all, it goes in both directions (and gets smaller than the minimum size, too).

[zbrownell]

@LFDanLu I seem to remember fixing a bug in my local implementation of this code. Let me take a minute to apply that branch, review, and see if I can't sort this out. It was supposed to be a clear/easy way to see/test that changes to provider breakpoints were being applied/used down the DOM (specifically, that matched breakpoints wouldn't remain stale when provider breakpoints were changed). But, it may need to become a little closer to the production code I had planned on using...

...also, I noticed the flickering behavior on resizing. For me, it eventually sorted out (never got it to "stick" on the wrong setting). I didn't notice it until later on, though. So, I'm guessing one of the later changes I applied (refactoring for different storybook UI), or an upstream change in origin/master could be the culprit. I should have some time later this afternoon or tomorrow morning to dig in further

[snowystinger]

closing as stale Also, possibly relevant but container queries are now available in all browsers https://caniuse.com/css-container-queries