Height on form components (mobile and desktop)

[ulde01]

Q: Increase the height of input fields and medium buttons to 44 px. First, explore contexts. Are there any consequences?

A: Design change 2019-01-30

• Form components (Input Field, Drop Down, Medium Button, Segmented Control and Stepper) all have the same height: 44 px
• This applies to both desktop and mobile

The reasoning for this is that when labels got bigger, the form components follow in size to harmonise and match. Also, the mobile click area needed to be bigger so we want them to be the same size, to simplify and have fewer options (=easier to do it right).

See:

• Vanilla Updated height on Input Field, Drop Down, Medium Button, Segmented Control and Stepper vanilla-pattern-library#5
• Bootstrap Updated height on Input Field, Drop Down, Medium Button, Segmented Control and Stepper bootstrap#83
• React https://github.sebank.se/DesignLibrary/ReactComponents/issues/43

[hjalmers]

Personally I think it makes sense to support different sizes but I'm against making the smallest size 44px but perhaps normal/default could be increased.

Currently in bootstrap we use the following:

small 31px
normal (default) 40px
large 48px

This applies to input fields, dropdowns, buttons and everything you can use in a form and all components that use these components internally like the datepicker which uses buttons internally, tables etc.

Why not use even numbers?
Well when I and Panos fiddled around with it a bit we found that the most important thing was the padding in relation to font size and it's not always as easy as specifying a fixed height. Padding + font sizes gives a certain height and it ensures that buttons can wrap (i.e. be more than one row tall).

[ghost]

@hjalmers The 44 px is only for the medium (default) button. The small (that in Design Library is 32 px not 31) and the large button will be as is. For desktop. For tablet and mobile only the medium (default) one should be used. The clickable area on mobile should always be at least 44 px right?

[ulde01]

Status update 2019-01-30

This issue was reviewed today in Design Working Group. We decided the following change:

• Form components (input field, drop down, medium buttons) for both desktop and mobile all have the same height: 44 px

The reasoning for this change is that when labels got bigger, the form components follow in size to harmonise and match. Also, the mobile click area needed to be bigger so we want them to be the same size to simplify and have fewer options (and easier to do it right).

I will create new issues for this matter and add it to our developers repos.

/Ulrika, Design Management

[ulde01]

Added to
https://github.sebank.se/DesignLibrary/vanilla-pattern-library/issues/49

[yousifalraheem]

Hi, I just wanted to follow up on this since Check boxes and radio buttons are not included in this sizing standard. There are a lot of times when we put a checkbox side by side with an input field to be enabled based on the state of the checkbox. Since the design library guidelines states that the checkbox height is 40px and the input height is 44px there will always be a misalignment between the two form elements. Of course the fix is to pass a custom class that would fix it, but I was wondering if this is something that you guys have considered.

The expected behavior should be aligned like this (both 44px):

(check box 40px, input 44px)

But since there is a difference between the heights of the two form elements, not only they look weird but when it's toggled in there will be a little bit of a jump (4px) after the input field appears.

Same behavior would also happen with Radio buttons

[conandx]

Yes @yousifalraheem You are correct. When we did the update of input fields we agreed that we need to updated the related form-components also.... but we never had the time!
We'll bump the issue and try do do this as soon as possible! - BRB! :)

[ulde01]

We ran out of time last round but now we are back. Thank you @yousifalraheem - keep giving us feedback!

Recap: The following form components were all made 44px high previously:

• Input Field, Drop Down, Medium Button, Segmented Control and Stepper

Now we also want to add these components to the 44 px height list:

• Check boxes
• Radio buttons
• Stepper: design description is updated
• Segmented control: design description is updated