Paragraph to support "fill" prop

Just an observation on Paragraph.

9/10 times the max-width makes total and complete sense. Then, there’s that one time when you want the paragraph’s width controlled by its parent Box. Currently the only fix is to replace the Paragraph calls with the non-semantic Text component.

Proposed Solution

There is a property, we’ll call it fill for now, which behaves like the box’s fill property, allowing for the values ["horizontal", "vertical", true, false]. The default value of this would be false, and provides the current behavior.

• A value of horizontal will set width to 100%
• A value of vertical will set height to 100%
• A value of true sets both above
• A value of false takes the max-width setting from the paragraph’s definition, along with the other Paragraph defaults

Alternatives

Box+Text

This is probably the cleanest workaround, although it does not satisfy the requirements of a semantic <p> tag in output. <Box as="p"><Text>...content</Text></Box> will give you all of the flex/box support you’d want with an inner text object. The only drawback is the non-semantic <span> added inside the paragraph.

If we opted for this solution, we would want to update the grommet documentation to explain how to do paragraphs that don’t force a maximum width for readability.

Text as=

This is a variant of the above, using the as prop to change Text from its default span to a p tag. It has some drawbacks though, as using Text by itself forgoes grommet’s support for border, animation, background, and others.

Reference

• Reference on behavior of fill in the StyledBox https://github.com/grommet/grommet/blob/master/src/js/components/Box/StyledBox.js#L120
• #1775 we actually talked about this once before. Paragraph has strong opinions on its default width (good!) but no way for someone to create a semantic <p> tag and override the Paragraph in specific instances (bad!). The solution of manually doing <p><Text>...content</Text></p> or <Box><Text>...content</Text></Box> are workarounds.

[jakobo]

Sure. I’ll give it a shot. I think @ericsoderberghp’s true|false solution will work. Just going to enumerate todos here before I open a WIP PR.

[ ] Paragraph true|false [ ] Update docs (new prop) [ ] Storybook story

(Missing anything?)

[ericsoderberghp]

I’m OK with the basic concept of being able to override the max-width for special circumstances.

One other options is to do style={{ maxWidth: 'none' }}. This might be sufficient if the frequency is low enough.

I’m OK with using fill as a property to control this. My inclination is to just support true|false values though.