fix: Add whitespace when appending/prepending icon in uui-input (#408)

* alignment and whitespace

* fix padding in append example

Author: nathanwoulfe

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

@@ -26,6 +26,14 @@ export class UUIIconElement extends LitElement {
       ::slotted(svg) {
         fill: var(--uui-icon-color, currentColor);
       }
+
+      :host-context(div[slot='prepend']) {
+        margin-left: var(--uui-size-2, 6px);
+      }
+
+      :host-context(div[slot='append']) {
+        margin-right: var(--uui-size-2, 6px);
+      }
     `,
   ];
 

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

@@ -138,6 +138,42 @@ export const PrependAndAppend: Story = props =>
     </uui-input>
   `;
 
+export const PrependIcon: Story = props =>
+  html` <uui-input
+    .disabled=${props.disabled}
+    .readonly=${props.readonly}
+    .error=${props.error}
+    .label=${props.label}
+    .type=${props.type}
+    .name=${props.name}
+    .placeholder=${props.placeholder}
+    .value=${props.value}>
+    <div slot="prepend">
+      <uui-icon-registry-essential>
+        <uui-icon name="search"></uui-icon>
+      </uui-icon-registry-essential>
+    </div>
+  </uui-input>`;
+
+export const AppendIcon: Story = props =>
+  html` <uui-input
+    .disabled=${props.disabled}
+    .readonly=${props.readonly}
+    .error=${props.error}
+    .label=${props.label}
+    .type=${props.type}
+    .name=${props.name}
+    .placeholder=${props.placeholder}
+    .value=${props.value}>
+    <div
+      slot="append"
+      style="background:#f3f3f3; padding-left:var(--uui-size-2, 6px)">
+      <uui-icon-registry-essential>
+        <uui-icon name="delete"></uui-icon>
+      </uui-icon-registry-essential>
+    </div>
+  </uui-input>`;
+
 export const MultipleInputs: Story = props =>
   html`
     <uui-input