Adapt button height to the input element height

Where did you reproduce this issue?
On figma we have only 1 type of buttons https://www.figma.com/file/r8uq72Q9weTMVsNUFZKEYH/D9-Theme-Master?node-i... in terms of its size.

@kostyashupenko This issue is reproduce in search I attached the screen shot for the reference.

@DuneBL After enabled the masquerade module reproduce this issue same issue is also reproduce in search box the screen shot attached in #4
Here is the patch for the review also attached the screen shot for the reference.

This issue also shows up on the advanced search page. A week or so ago I talked to designer @jwitkowski79, and she approved the change.

+++ b/css/src/components/button.css
@@ -27,6 +27,7 @@
+  min-height: 54px;

You'll want to use min-height: var(--sp3); here. See css/src/base/variables.css

@mherchel Thank you for the feedback.
Covered the point in #8.

normally you don't need to set min-height for all existing buttons. If some of buttons should be bigger -> provide a modifier in css, then provide specific class from hooks to your button.
But anyway code should be added after design

Committed! I tested this out in all browsers, and it looks good.

I made two changes:

1) increased the horizontal padding to 27px
2) moved the rule so it passes linting.

Thanks!

Mm.. i have to re-open this issue, since one little bug was found.
This commit shows vertical paddings were removed for buttons, which means button-links now has wrong vertical alignment.

This is markup to get links:

<a class="button">Link</a>
<a class="button button--primary">Link</a>

So vertical paddings should be re-corrected.

Hi @kostyashupenko,
I have checked this, yes there is vertical padding added for the button.
To fix the issue we need to add the padding-top 16px but this is the possible variable right now we have --sp0-75: calc(0.75 * var(--sp)); which is equal to 13.5 px

Updated the screenshots when padding-top=16px & padding-top= 13.5px. Please have a look and let me know can we add a new variable ?

16px:

13.5px:

@kostyashupenko I checked this across various browsers. Where are you seeing this?

The answer too #17 is in a.button

Updated patches. Note that the interdiff doesn't include adding back in the config changes.

disregard the prev patches. They were intended for another issue!

The easiest route here is to set display: inline-flex; and align-items: center. And at that point we won't have to worry about if we have different sized versions of the button, or need to create a new variable.

My thought in #21 doesn't work in IE11

Updated. Uses line height to center the text.

There's some weird inconsistencies between a.button and input.button across browsers. I'm taking that into account by using at-supports.

Committed. Thanks!