Make GridItem into a prop on Grid instead of a separate component

It’d be easier to use Grid if we didn’t need to import 2 components, and could instead use pass a prop <Grid item>. Coming from MaterialUI it is easier to consume this way. Also, it’s more legible since the syntax highlighting is more contrasting with the Grid tag surrounding it.

[fandy]

@with-heart, those are some great reasons. It’s not a huge annoyance to import them separately, and I can quickly see myself getting used to it. The pros you listed also make it sound like a more flexible solution in the long term.

I come from MaterialUI and notice the difference in API design in ChakraUI. For example, I like that the library is minimal and doesn’t include AppBar, instead opting for recipes (although documentation on those can be improved).

[with-heart]

I understand that importing multiple components rather than baking all functionality for each “module” into a single component is a stylistic choice we’ve made, but we feel that it pays off in terms of the amount of flexibility and extensibility it gives in how end users can utilize these components. On top of that, an api that relies on which prop is passed to a component to determine the functionality of that component has a number of technical hurdles (the big one that comes to mind is correct types), none of which are impossible to overcome but lead to imo particularly dirty component implementations.

imo an api like this would lead to semantic confusion. In your above example, you’re rendering a Grid component which at a glance would suggest enables display: grid, but the item prop means that it’s not actually a grid. So why call it a grid?

The last thing that comes to mind which is related to the above comment about extensibility is that we allow users to create/extend components using the chakra factory function, which this change would make less flexible:

// How do we tell this we actually want to extend grid-as-item and not grid-as-grid?
const CoolGridItem = chakra(Grid, { baseStyle: { bg: 'red.900', color: 'white' }})

I definitely hear your concern here and can tell you that I’ve heard similar feedback from co-workers around Modal, but it seems to have been a temporary discomfort and after using it a few times, it becomes second nature of which components to import to build a modal.

Especially after having already established this as the Chakra api style for the past year+, this is just not a realistic request for us to consider. I hope you understand and will still consider using Chakra! We believe the flexibility and extensibility of the multi-component api is worth the trade-off in convenience.