Fix prepending icons and vertical alignment (#1104)

* fix prepending icons and vertical alignment

* fix styling around icons and line height for ref items

* fix icon in table by fixing empty label for checkbox

Author: nielslyngsoe

packages/uui-base/lib/mixins/LabelMixin.ts

@@ -65,7 +65,7 @@ export const LabelMixin = <T extends Constructor<LitElement>>(
           : ''}
         <slot
           class="label"
-          style=${this._labelSlotHasContent ? '' : 'visibility: hidden'}
+          style=${this._labelSlotHasContent ? '' : 'display: none'}
           name=${labelSlotName ? labelSlotName : ''}
           @slotchange=${this.labelSlotChanged}></slot>
       `;

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

@@ -256,6 +256,10 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
       .label {
         display: block;
       }
+
+      span.label:empty {
+        display: none;
+      }
     `,
   ];
 }

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

@@ -478,7 +478,8 @@ export class UUIInputElement extends UUIFormControlMixin(
 
       input {
         font-family: inherit;
-        padding: var(--uui-size-1) var(--uui-size-space-3);
+        padding: 1px var(--uui-size-space-3) var(--uui-size-1)
+          var(--uui-size-space-3);
         font-size: inherit;
         color: inherit;
         border-radius: var(--uui-border-radius);
@@ -502,6 +503,13 @@ export class UUIInputElement extends UUIFormControlMixin(
         border: none;
       }
 
+      slot[name='prepend'],
+      slot[name='append'] {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+      }
+
       ::slotted(uui-input),
       ::slotted(uui-input-lock) {
         height: 100%;

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

@@ -138,6 +138,15 @@ export const PrependAndAppend: Story = {
 };
 
 export const PrependIcon: Story = {
+  args: {
+    'prepend slot': html`<uui-icon
+      name="search"
+      slot="prepend"
+      style="padding-left:var(--uui-size-space-2)"></uui-icon>`,
+  },
+};
+
+export const PrependIconInDiv: Story = {
   args: {
     'prepend slot': html`<div slot="prepend">
       <uui-icon name="search"></uui-icon>

packages/uui-ref-node/lib/uui-ref-node.element.ts

@@ -183,9 +183,8 @@ export class UUIRefNodeElement extends UUIRefElement {
         display: flex;
         flex-grow: 1;
         align-items: center;
-        justify-content: center;
         line-height: 1.2em;
-        padding: calc(var(--uui-size-2));
+        padding: calc(var(--uui-size-3));
       }
 
       #open-part {
@@ -211,10 +210,12 @@ export class UUIRefNodeElement extends UUIRefElement {
         justify-content: center;
         height: 100%;
         padding-left: var(--uui-size-2);
+        margin-top: 1px;
       }
 
       #detail {
         opacity: 0.6;
+        line-height: 1.2em;
       }
 
       :host([selectable]) #open-part {

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

@@ -69,6 +69,7 @@ export class UUIRefElement extends SelectOnlyMixin(
         justify-content: space-between;
         align-items: center;
         width: 100%;
+        font-size: var(--uui-font-size);
 
         box-sizing: border-box;
         border-radius: var(--uui-border-radius);

packages/uui-table/lib/uui-table-advanced-example.ts

@@ -199,7 +199,7 @@ export class UUITableWithSelectionExampleElement extends LitElement {
       @selected=${() => this._selectRowHandler(item)}
       @deselected=${() => this._deselectRowHandler(item)}>
       <uui-table-cell>
-        <uui-icon name="wand" style="font-size: 20px;"></uui-icon>
+        <uui-icon name="wand"></uui-icon>
         <uui-checkbox
           @click=${(e: MouseEvent) => e.stopPropagation()}
           @change=${(event: Event) => this._selectHandler(event, item)}