Component Best Practices
Good components need to be designed well. Taking the time to think of future use cases significantly enhances the components usability.
Sizing and Styling
Generally, it should be the implementation of the component that is responsible for the component's size. There are some exceptions. This means that the width of your component is generally full width and the parent or 'implementor' of the component will control the width.
Examples:
Component Type | What sets size | Comments |
---|---|---|
Page Header Component | Parent | this allows the header |
Button Component | Component | Buttons generally don't take on the shapre of the parent elements. When you need to override a buttons width, you can pass in a class. |
Toggle switch | Component | Generally this type of component woudl not adapt its size to the parent |
Toggle switch Array | Parent | An array of toggles would wrap or flow based on the containing element |
Actions
Context
Last updated