Box component "as" / "tag" prop not working as intended

https://github.com/grommet/grommet/blob/bcde5d660f50359d8e46e33dcfe3bbc8968471ef/src/js/components/Box/Box.js#L75

it looks like the Box component is not using the as prop as it should. it looks to still be relying on the tag component to actually apply the styles.

using as causes the box component to become the unstyled version of itself.

examples:

when using tag it works as intended, however in the docs it says this prop is deprecated. it looks like in the code it is not used as it should be.

examples:

[josiahdahl]

@ShimiSun @mirshko I ran into this issue today and found the explanation in an issue in the styled-components repo. https://github.com/styled-components/styled-components/issues/1981#issuecomment-419287003

Here’s the diagram from that issue

                          -> (which classes are rendered as a result)

Foo = styled.div``        -> .Foo
Bar = styled(Foo)``       -> .Bar (flat-combined styles of Foo + Bar)

<Bar as="h1" />           -> .Bar (flat-combined styles of Foo + Bar)

Foo = styled.div``        -> .Foo
Bar = () => <Foo />       -> () => .Foo
Baz = styled(Bar)``       -> .Baz .Foo (each set of styles is separate due to the custom component)

<Baz as="h1" />           -> .Baz (only the topmost styles remain since the custom component is switched out)

The way the Box component is rendered follows the second path, which I’ve simplified below, as well as a minimal example to replicate the issue.

https://github.com/grommet/grommet/blob/master/src/js/components/Box/StyledBox.js#L540
const StyledBox = styled.div`
  {props => props.prop1};
  ...
`;

// https://github.com/grommet/grommet/blob/master/src/js/components/Box/Box.js, render method
const Box = (as) => (
  <StyledBox as={as} />
);

// Custom Component
const MyBox = styled(Box)`
  border: 5px solid #f00;
};

// Broken - the `as` prop is swallowed by `styled-components` and not passed to `StyledBox`
const MyPage = () => (
  <MyBox as="header">Hello World!</MyBox>
);

// Works - The `tag` prop is not swallowed by `styled-components` and is passed 
// to `StyledBox`as the `as` prop
const MyPage2 = () => (
  <MyBox tag="header">Hello World!</MyBox>
);

The easiest solution I see is to use the tag prop for now, since I’m not experienced enough with the Grommet code base to recommend a more in-depth fix. Based on the responses from the issue in the styled-components repo, they’re not interested in fixing it, it’s a low priority, or it’s just how the library is supposed to work, all of which are their prerogative.

[CopyJosh]

I’m wondering if we should just add a note to the Box documentation for as saying that if Box is being extended with styled-components forwardedAs should be used instead

That might be worth noting, but it would have to be added to all components that use the as prop (I think*), of which there are quite a few I think.

I would actually love to see a tutorial added to the getting started with Grommet docs that explained in a best practice how to extend theming and use styled-components in general with Grommet. I know I would personally benefit greatly if someone were willing to contribute such a thing. That could include things like using this forwardAs prop.