With the initial responsive container implementation, it didn't track fixed Box sizes correctly.

What does this PR do?

This moves the container-type CSS style from a wrapping div to the actual StyledBox div and uses the forwarded ref to track the size of the StyledBox. This size is used to set the breakpoint value provided in the ResponsiveContext at this level as well as the @container query for adjusting various edge sizes such for responsive breakpoint behavior.

The generated CSS class names on Box components changed due to the addition of the potential container-type style even when it doesn't add the style. I tried a few ways to avoid having it change the actual CSS class name although it still causes the name to be different.

Note: The Box test for as being a function was giving a warning (thrown as an exception) because refs in that case apparently have no effect. Anytime we use useForwardedRef() it always creates a ref. So if in those situations if there is an as property that is a function it will throw that warning/error if we pass that ref to the styled component with the as property defined. There is no issue if the as is a string. So in Grommet as it exists prior to this PR, the following will fail:

  const ref = useRef(null);
  useEffect(() => console.log("Ref", ref), [ref]);
  return (
    <Grommet theme={hpe}>
      <Box ref={ref} as={(props) => <header className={props.className} />}>
        <Text>Some content</Text>
      </Box>
    </Grommet>
  );

So for any component that is also passed as that is a function, it cannot be passed a ref or internally cause a ref to be passed via useForwardedRef (whether or not the component itself was passed a ref.)

In this responsive container use case we simply won't attempt to useForwardedRef if as is a function and in that case the container can't really be declared responsive="container"

Where should the reviewer start?

Box.js

What testing has been done on this PR?

Storybook and manual responsive containers

How should this be manually tested?

Storybook Layout/Box/Responsive container and

const MyContent = () => {
  const size = React.useContext(ResponsiveContext);
  return (
    <p>
      I am in a <b>{size}</b> container.
    </p>
  );
};

export const FixedSize = () => {
  return (
    <Box responsive="container" border width="300px" pad="medium">
      <MyContent />
    </Box>
  );

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Should this PR be mentioned in the release notes?

Is this change backwards compatible or is it a breaking change?