Make the height of auro-select the same as auro-input

AlaskaAirlines / auro-select

Combo custom element containing pre-defined trigger options with menu in the dropdown panel

https://auro.alaskaair.com/components/auro/select

Apache License 2.0

2 stars 0 forks source link

Make the height of auro-select the same as auro-input #81

Closed DZwell closed 2 years ago

DZwell commented 2 years ago

Is your feature request related to a problem? Please describe.

When using auro-select as part of a form, the height discrepancy between the two is jarring.

Describe the solution you'd like

Can we add a prop to pass in a custom size?

Describe alternatives you've considered

I could probably dig in to the shadow root and modify the underlying elements but that seems less than ideal.

Additional context

Here's a screenshot of the mockup we're working against:

Here's what it looks like in our UI:

You can see that the actual height of the element itself is the same as auro-input, but the bordered part of the select is less than that:

braven112 commented 2 years ago

@leeejune let's double check this tomorrow and see what the correct height should be for these so they work well together.

braven112 commented 2 years ago

I would recommend adding a label to select and then we'll need to address this issue #71 so that input and select can work together better.

We'll also reach out to the designer so we can sync on how to handle these going forward.

leeejune commented 2 years ago

Two things are missing:

The label animation

The label should shift up when the dropdown is triggered/filled for label=true, placeholder=false
There should be options for when:
- label=true, placeholder=true (does not need animation)
- label=true, placeholder=false (need animation)
- label=false, placeholder=true (missing this option, need animation) @jason-capsule42 after our discussion and I found that there are no accessibility requirements for having a label on dropdown.

Spacing

The dropdown without either a label or placeholder should have larger spacing to have the same height as when there is both a label and placeholder text. See image below for correct UI, and refer to the blueprint for exact design tokens.

These things will fix issue #71 and the issue in the auro-dropdown repo #121.

braven112 commented 2 years ago

During refinement we noticed that it is 66px and it should be 58px including the border.

AC: Validate that combobox, select, input and datepicker all are exactly the same height. We should be able to validate on this page once we are done with this issue. https://auro-examples.vercel.app/form-heights

blackfalcon commented 2 years ago

Recatorigized this as a bug as the height consistency between elements needs to be fixed. No new feature to be added.