Bring horizontal dropdown input states to spec

[carljbowman]

Horizontal: Sizing / Radius

Alignment has more nuance based on the block type. e.g Hat Block vs Default Block

Sizing: Default / Focus

Once the user makes selection from the menu the block will update.

• Horizontal: The icon switches to the newly selected option
• Vertical: The string switches to the newly selected option.

Color: Default / Focus

Input: Desktop / Device

[tmickel]

@carljbowman Can we get an SVG for the icon in the button (if that's finalized)?

[tmickel]

Merged for horizontal - backlogging for vertical/future design determination on the button state.

[tmickel]

@carljbowman:
I recommend we drop this as it's tremendously technically difficult to pull off the animated stroke as it was done for the text inputs. To do so essentially requires the reproduction and floating of HTML/CSS for the entire clickable field on top of the SVG. That's what we did for the text inputs - since it was already needed for typing. We could also add an animated stroke on the SVG, but it won't match the look of the text inputs, since SVG can only stroke on the center of the path (in CSS we are doing outside the path).

Here is my latest implementation with color changing:

Horizontal, before:

Horizontal, after:

Vertical droppable, before:

Vertical droppable, after:

Vertical undroppable, before:

Vertical undroppable, after: