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

* alignment and whitespace * fix padding in append example
umbraco · Jan 30, 2023 · 3a86f01 · 3a86f01
1 parent 61e6716
commit 3a86f01
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/packages/uui-icon/lib/uui-icon.element.ts b/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);
+ }
  `,
  ];
 

diff --git a/packages/uui-input/lib/uui-input.story.ts b/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