Gutenberg: Components: ColorPicker needs better styling when used outside of WordPress

[gziolo]

Describe the bug
Originally reported in https://github.com/WordPress/gutenberg/pull/18013#issuecomment-546818783:

There is some follow-up work required to make this component work properly outside of WordPress:

To reproduce
Steps to reproduce the behavior:

1. Run Storybook: npm run design-system:dev.
2. Go to the ColorPicker section.
3. Use the arrow button to change the type of color format input and observe UI.

Expected behavior
Default styles should be more polished. /cc @enriquesanchez @mapk

[mapk]

Looks like some of these styling issues may be happening within Gutenberg as well.

@enriquesanchez you mind taking a look at this one?

[enriquesanchez]

@gziolo I have a couple of questions:

1. I'm noticing that there are some global styles missing, or at least I'm used to seeing them applied globally to Gutenberg. For example, box-sizing: border-box; does not appear to be included on this component. Are these missing on purpose? Can they be added globally to the components in Storybook?

2. How much can this component be changed?

Aside from the alignment issues, I wonder if we can also make that arrow icon more descriptive of what it does?

I think it'd be much better if we at least showed the current color format so it's a bit more obvious that clicking on it would let you change that. Something like this:

Where Hex appears next to the arrow, and if I were to select RGB:

[gziolo]

1. I'm noticing that there are some global styles missing, or at least I'm used to seeing them applied globally to Gutenberg. For example, box-sizing: border-box; does not appear to be included on this component. Are these missing on purpose? Can they be added globally to the components in Storybook?

I have no idea to be honest. @jasmussen, @karmatosed, @mapk or @melchoyce, might be better suited to answer this question. Do those styles are defined in Gutenberg or WordPress?

How much can this component be changed?

Again, the same group I mentioned will know best. Ideally, they should look similar in Storybook and in Wordpress :)

[jasmussen]

For example, box-sizing: border-box; does not appear to be included on this component.

Arguably, box-sizing: border-box; should be applied everywhere and unset, as opposed to the other way around as is the case in browsers now. Because it is a much more logical way to work with paddings, borders and margins than the default box model.

However the reality is that we are stuck with a world where box-sizing: content-box; is the default. Given this fact, and the fact that we are now increasingly using components outside of WordPress, it's becoming clear that we can no longer develop compnents assuming the box sizing will be border-box. Therefore, any CSS changes you make should re-apply box-sizing: border-box; on a per-component basis, when you know they are necessary.

Again, the same group I mentioned will know best. Ideally, they should look similar in Storybook and in Wordpress :)

Your dropdown assessment is one I would agree with. I say change it if the change makes it better. Only make sure that the change happens for the component globally, i.e. both WP and Storybook.