feat(OverflowMenu): allow breakpoint on container width

[thatblindgeye]

What: Closes #7376

Breakpoint on container example

Additional issues:

[patternfly-build]

Preview: https://patternfly-react-pr-7913.surge.sh

A11y report: https://patternfly-react-pr-7913-a11y.surge.sh

[thatblindgeye]

@mcoker Ah that's a good point about the flex containers! I can update things to allow specifying a specific element to observe rather than only the overflow menu itself

[thatblindgeye]

@mcoker Ah that's a fair point. I had based this proposed solution on the issue title "Breakpoint relative to parent/container width", and the "Exactly the same as it is now but relative to container width" bit (emphasis mine). That said, what you described also makes sense so I would also be interested in what others think as well. @jmsansan since you had opened the original issue, what are your thoughts based on the comment above and the current implementation proposed?

[mcoker]

@thatblindgeye just thinking out loud a bit:

I wonder if it might make sense to support 2 things to basically manage the behavior.

1. A thing to watch the size of
2. A threshold to compare against the thing's size that triggers the overflow menu

Right now using breakpoint, the thing is the window size. The threshold are our global breakpoint values.

With the update in this PR, the thing can be some container. The threshold is still our breakpoint system.

What I was thinking in my comment above just updates the threshold to be the size of the overflow menu container.

I'm wondering if it might make sense to use what's in this PR, and extend breakpoint to support any sort of threshold, and so it could accept...

1. one of the breakpoints (like it does now)
2. a container ref, and that container's size would be the threshold. this could be:

• the overflow container (to support my idea above)
• some flex/grid child that is the parent of the overflow menu, where the thing we're watching the size of is that flex/grid child's flex/grid parent.
  • In a layout like

    flex parent (thing we watch the size of)
      flex child
        [inputs and things]
      flex child (threshold)
        overflow menu  
    

3. a custom value

• in the layout above from the 2nd bullet, maybe you want to trigger the overflow menu when its parent flex child element is 50% of the width of the flex parent. In that case it would be like containerRef={{overflow menu's parent flex child}} and breakpoint={{flex parent width / 2}}

[thatblindgeye]

@nicolethoen @tlabaj pushed updates based on the last version of the PR, adding tests and making suggested changes.

@mcoker based on the conversation in the PR and what was discussed when we sat down to go over some local code I had wanted to show, were there any updates you wanted to see in this PR? Or would a followup issue to potentially extend the component's functionality make sense?