Components inside components

This is a thread dedicated to discussing how we should compose components in the library / how we should encourage library users to do the same.

Case study: ButtonGroup component. Inspiration: https://www.futurelearn.com/pattern-library.

Expanding here in more detail soon…

[peterszerzo]

Looking at all the conversations we have had so far, it seems that we’re starting to agree on the following (adding my own thoughts here and there, but we should discuss all of this):

• explicitly using components within components is a preferred way to write API’s: <Tabs><Tab></Tab></Tabs> instead of <Tabs tabItems={[item1Data, item2Data]} />. Use React.Children.map and purchase several muffins for @Angarsk8.
• refrain from using class names for styling the internals of a component (use props set on glamorous components instead). Sometimes this is necessary, and that’s ok, just use the prefix ‘co_’.
• parent components sometimes need to override their children’s styles, like ButtonGroup does. In this case, we can add a class name like co_bgel to the children in the render method of the parent (see https://codepen.io/peterszerzo/pen/VMXQKO?editors=1010), and override using said class name. Class names prefixed by co_ will not cause styling conflicts with each other as they are all scoped, so we can keep them short and snappy.

[peterszerzo]

Me too, I think it’s the best way to go. I suggest prefixing them with co_ or something.