Spike: Define all component to add a style props support

[RayRedGoose]

🔍 Spike / Exploration

All our components should have a common styling API just like they have a common compound component API. It makes API more predictable for users and requires less actions for modification.

What questions would be answered once this spike was completed?

1. What components doesn't support style props now?
2. What components should have a style props support?
3. How do we add a style props support to these components (replace by layout component or spread a styles from boxStylesFn?
4. v8 or v9 changes?

[RayRedGoose]

LABS:

• Combobox - planned to be refactored to compound component #1669
• SearchForm - class component, planned to be refactored #1506

PREVIEW:

• Color Picker - planned to be refactored #1852
• Select - class component, planned to be refactored #1932
• SidePanel - planned to be refactored to compound component #1316

MAIN:

• Avatar - converting to use creteComponent function #1738
• Checkbox - converting to compound component #1195
• Color Picker - planned to be refactored #1852
• FormField - class component, planned to be replaced #1934
• Radio - converting to compound component #1196
• Select - planned to be refactored #1932
• SidePanel - planned to be replaced #1316
• Switch - converting to compound component #1774
• Tooltip - converting to compound component #1936

CAN BE MODIFIED:

• Badge
• SystemIcon
• LoadingDots
• Skeleton
• Table
• TextArea - can use style props (preview already has)
• TextInput - can use style props (preview already has)

[alanbsmith]

Update:

Table, Skeleton, and SystemIcon have been updated already. Below are sandboxes for other components on the list.

• Count Badge refactor
• Loading Dots refactor