Search Input alignment + border
ChristianKienle opened this issue · 4 comments
I know this is a pure design issue but have you considered using a different alignment for the search input component and other border styles? Currently it looks like this:
The menu items are not aligned with the input element. If you look at various search controls that already exist you will notice that most of them align those controls to that they have the same x-/leading-edge-value (I looked at element-ui, the address input field in chrome and Apple spotlight as a reference).
Also, the popover body has a top border when shown and is aligned in a way that it is directly below the border of the input element which causes the border to be double the height than usual. Here is what I suggest:
To me this feels more clear. Changes:
- menu items are aligned with input
- borders are adjusted so that the component does not feel like two different things but more like a unified control.
- removed the focus outline from the input field because I think that the whole search input component more or less has the focus. The input field still has the focus of course but in reality, once the auto popover is shown it does no longer behave like a focused input field. For example the down arrow no longer jumps to the end of the input field but selects the next menu item. We could maybe draw the typical blue outline around the whole component (input + popover body) though.
Btw.: The "misalignment" is also present in related components (combobox, …).
Opinions?
This is something we've gone over before. Its small details that from a design side are easy to incorporate, but from a dev side can cause some issues depending on the technology or browser. Theres also the issue of not completely aligning with GD and how they implement the spacing system across components, they use a slightly different unit for form elements. Im all for aligning things to make it look more thought out and put together visually. I would reach out to @saad-mo to make sure this is ok from his point of view.
I agree this approach makes the overall component look better. The current search component uses the popover and menu components which come with a rounded border by default. We can definitely explore this idea if it goes not take us away from Global Design as Leo mentioned. We can discuss more in our next dev call.
Has this been discussed further or is there a opportunity to still talk about it in the next call?