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
  Convert Combobox to a Compound Component (and promotion?) #1669
• SearchForm - class component, planned to be refactored
  [EPIC] SearchForm #1506

PREVIEW:

• Color Picker - planned to be refactored
  [EPIC] Color Picker #1852
• Select - class component, planned to be refactored
  Convert Select to a Compound Component #1932
• SidePanel - planned to be refactored to compound component
  Promote & Convert Side Panel into a Compound Component #1316

MAIN:

• Avatar - converting to use creteComponent function
  Rebuild Avatar component #1738
• Checkbox - converting to compound component
  Convert Checkbox into a Compound Component #1195
• Color Picker - planned to be refactored
  [EPIC] Color Picker #1852
• FormField - class component, planned to be replaced
  Promote Form Field (Preview) and replace the one in Main #1934
• Radio - converting to compound component
  Convert Radio into a Compound Component #1196
• Select - planned to be refactored
  Convert Select to a Compound Component #1932
• SidePanel - planned to be replaced
  Promote & Convert Side Panel into a Compound Component #1316
• Switch - converting to compound component
  Convert Switch into Compound Component #1774
• Tooltip - converting to compound component
  Convert Tooltip to a 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

[alanbsmith]

Closing. We're moving away from style-props in favor of static styling.