[RFC] <Dropdown> should expose a leaner API for styling

[sahariko]

What we have now

At the moment, our <Dropdown> component supports a extraStyles prop which is passed pretty directly into the underlying react-select component.

Why is it problematic?

• Creates coupling between the API we give consumers and our implementation.
• Makes the component too extendable - consumers can change and potentially mess up our basic styling.
• Unfocused API, which makes controlling specific properties of the component more difficult than it needs to be. For example, let's say a user wants to control the menu's width; consider the 2 following examples:

<Dropdown
    extraStyles={(baseStyles) => ({ ...baseStyles, menu: (base) => ({ ...base, width: 300 }) })}
/>

<Dropdown menuWidth={300} />

Suggestion

We can create a leaner, more focused (and perhaps intuitive?) API, by giving specific props that affect only the aspects of the component we want to.

[orrgottlieb]

@sahariko I like to idea of a more direct API - this will help us migrate (if needed) in the future and will allow us to make sure the look and feel of the component.

I think we need to make sure that this is not too limiting. we can ask in a survey (to the apps community) on how the usage. None the less we should add a description in a story on how to use the extraStyles prop. as it is not clear today

[sahariko]

Sounds good to me, and as an initial solution we can look for common use cases (menu width, etc.).

Also, good call on the documentation, I'll open an issue for that 🙂