Improved Documentation on Customising Components

[bobbyshaw]

Is your feature request related to a problem? Please describe.
There has been an (understandable) decision made that consumers of components in this library cannot modify the look and feel of components.

This isn't immediately obvious from a developer experience point of view. I am new to the react ecosystem and battled to understand why I could not adjust the styling of the Panel component to have a larger margin bottom to make way for a fixed bottom bar with a saved button in using a styled component variant (it's possible to do with props).

After some effort and further research, I came across the reason why and adjusted to wrapping the Panel in a Box.

I have outstanding questions about what I should do when I do need a design for my BigCommerce app that isn't supported by the current system. At this point, I believe I would have to fall back to creating a component from scratch.

Describe the solution, feature, or improvement you'd like
I think it would be useful to have further documentation in the design guidelines and/or developer documentation about the (in)ability to modify style of components. And perhaps some guidance on what to do when you've tried to use the available components but none meet your use case.

Additional context

[chanceaclark]

Hey @bobbyshaw! Thank you for your feedback!

A little background on the matter... we did make the decision to restrict consumers of providing their own stylings and classes so we can have design consistency throughout our components. Alongside that, we opted-in for a configuration-based approach in which the consumer provides a config, and we'll render the component with proper stylings for you. The EXCEPTION is our utility components (Box, Flex, Grid, and Popover components).

Our goal is to have most/all the components that an app needs, but there will most-likely be a need for customization which our utility components are there for. For your example, the bottom save bar is a valid example of what I would use a utility component for.

We recently targeted this sort of documentation, along with general documentation, as something we need to tackle so it is on our radar.

Also, this is how I would build out that bottom bar:
https://codesandbox.io/s/distracted-moon-j8x3v?file=/src/index.tsx

[bobbyshaw]

Hi @chanceaclark, nice to meet you. Thanks for getting back to me so quickly.

That all makes a lot of sense to me. I look forward to seeing this library continue to develop :)

Also, this is how I would build out that bottom bar:

Oh wow, thanks! That's helpful to see.