Proposal - consistent use of Compound Components pattern

[burakukula]

Discussed in https://github.com/contentful/forma-36/discussions/1172

^{Originally posted by thebesson August 9, 2021}

The problem

It came up in several proposals so far, to use Compound Component Pattern. This pattern is currently (v3) used in a Workbench component. Would be good to align on the usage of this pattern, document it in code style guides and refactor v4 components accordingly.

The proposed solution

This pattern is commonly used in UI libraries, for example, semantic-ui-react or ant-design. We even use it (inconsistently) in our codebase.

Components with Compound Components pattern

• Workbench
• Modal Let me know if I missed any

Components, that could benefit from this pattern

• Accordion
• Dropdown There is an ongoing proposal for refactoring, see hre.
• EditorToolbar
• EntityList
• Grid
• List
• Table
• Tabs

Looked through our components, some are very simple, but have those "child" components with ComponentName, ComponentNamePanel, ComponentNameContainer, ComponentNameItem - so the naming almost "asks" to be refactored to compound component pattern, this way the user only needs to import one component and use it and components in its properties. Others would actually benefit from taking advantage of shared context, like in Tabs and Accordion, for example. We could make those components uncontrolled by default, so there is no need to write onSelect functions every time.

Open questions

• Should we refactor all components to this pattern?

Please, share your thoughts on this approach, if we should use it or not, pros and cons.

Breaking changes

v4

[burakukula]

Transferred from the discussion as a reminder to adjust all the components to follow this pattern. Some of the components are still not following it, like Skeleton

[github-actions[bot]]

Marking issue as stale since there was no acitivty for 30 days

[denkristoffer]

Opened Skeleton PR here: #2169

[denkristoffer]

I've gone through our v4 components and see no more components that need this pattern. If you notice any that could benefit from it, please let me know and we can reopen this issue.