Skip to content

Select dropdown: what should always look the same, and what should be adjustable? #148

@lifeiscontent

Description

@lifeiscontent

Hi @bhaveshraja, I'm firming up the dropdown select in our kit and want to lock in the right defaults with you.

For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?

  1. The icon at the end of the closed box. Right now there's a small up-and-down chevron (the stacked arrows pointing both ways) in our secondary grey on the right side of the field. Should that always be that icon, that size and color? Or could some places use a single down chevron, or a different marker?

  2. The check on the chosen row. Inside the open list, the currently selected row shows a small checkmark in our accent blue on the left. Should that always be a checkmark in that color, or adjustable?

  3. The closed box look. The field is a rounded box with a thin divider outline on a soft grey fill, text at 14px. On hover the outline and fill shift a touch; on focus it gets a blue outline and a faint blue glow ring. Should that whole look always be the same, or adjustable depending on where it sits?

  4. The open menu look. The popped-open list has rounded corners, a thin outline, a soft shadow, and a little inner padding. Should that always be the same, or adjustable?

  5. The rows inside. Each row is 14px text, with the hovered/keyboard-focused row picking up a soft grey background. Always that, or adjustable?

  6. The label above the field. The label ("Server type") is 14px in our primary text color, medium weight. Always that, or adjustable?

Anything you mark "always," I'll build in. Anything that's "depends," I'll leave open for the team. Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requested

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions