fix: Allow uui-button to fit in less tall contexts (#236)

* removing top and bottom padding factor, always vertically aligned.

* remove top bottom factor

Author: nielslyngsoe

packages/uui-button/lib/uui-button.element.ts

@@ -58,10 +58,8 @@ export class UUIButtonElement extends FormControlMixin(
         margin-left: calc(var(--uui-button-merge-border-left, 0) * -1px);
         --uui-button-padding-left-factor: 3;
         --uui-button-padding-right-factor: 3;
-        --uui-button-padding-top-factor: 1;
-        --uui-button-padding-bottom-factor: 1;
 
-        height: var(--uui-button-height, auto);
+        height: var(--uui-button-height, var(--uui-size-11));
         max-height: 100%;
         cursor: pointer;
 
@@ -124,10 +122,10 @@ export class UUIButtonElement extends FormControlMixin(
         );
         cursor: pointer;
 
-        padding: calc(calc(8 / 15 * 1em) * var(--uui-button-padding-top-factor))
-          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))
-          calc(calc(8 / 15 * 1em) * var(--uui-button-padding-bottom-factor))
+        padding: 0
+          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor)) 0
           calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));
+
         vertical-align: middle;
         box-shadow: none;
       }

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -289,7 +289,7 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
       label="clear"
       slot="append"
       compact
-      style="height: 100%; --uui-button-padding-top-factor: 0; --uui-button-padding-bottom-factor: 0;">
+      style="height: 100%;">
       <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
     </uui-button>`;
   };

packages/uui-input-lock/lib/uui-input-lock.element.ts

@@ -20,8 +20,6 @@ export class UUIInputLockElement extends UUIInputElement {
       #lock {
         height: 100%;
 
-        --uui-button-padding-top-factor: 0;
-        --uui-button-padding-bottom-factor: 0;
         --uui-button-padding-left-factor: 0.75;
         --uui-button-padding-right-factor: 0.75;
         font-size: 12px;

packages/uui-input-password/lib/uui-input-password.element.ts

@@ -66,7 +66,6 @@ export class UUIInputPasswordElement extends UUIInputElement {
     return html`<uui-button
       .disabled=${this.disabled}
       @click=${this._onPasswordToggle}
-      style="--uui-button-padding-top-factor: 0; --uui-button-padding-bottom-factor: 0"
       compact
       label="${this.passwordType === 'password'
         ? 'Show password'

packages/uui-input/lib/uui-input.element.ts

@@ -53,6 +53,8 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
         );
         border: var(--uui-input-border-width, 1px) solid
           var(--uui-input-border-color, var(--uui-color-border));
+
+        --uui-button-height: 100%;
       }
       :host(:hover) {
         border-color: var(

stories/scaffolding/app-header/app-header.example.ts

@@ -21,8 +21,6 @@ export class UUIAppHeaderExample extends LitElement {
       }
 
       #logo {
-        --uui-button-padding-top-factor: 1;
-        --uui-button-padding-bottom-factor: 0.5;
         margin-right: var(--uui-size-space-2);
       }