search

seb-oss / design-library

Design Library is a set of individual styles and components, that when combined make delightful, intuitive designs and shape a consistent SEB user experience.
http://designlibrary.sebgroup.com
14 stars 1 forks source link

Height on form components (mobile and desktop) #16

Open ulde01 opened 5 years ago

ulde01 commented 5 years ago

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

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:

hjalmers commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

Status update 2019-01-30

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

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 commented 5 years ago

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

yousifalraheem commented 5 years ago

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. image

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

(check box 40px, input 44px) image

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 commented 5 years ago

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 commented 5 years ago

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:

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