fix(core): pill alignment (#255)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jan 13, 2023 · 1e0fa2f · 1e0fa2f
1 parent ac01bd4
commit 1e0fa2f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/core/src/components/pill/pill.scss b/packages/core/src/components/pill/pill.scss
@@ -16,6 +16,7 @@ $chip-height: 1.25rem;
 
 :host {
   display: inline-flex;
+  width: fit-content;
   position: relative;
   align-items: center;
   justify-content: center;
@@ -42,4 +43,9 @@ $chip-height: 1.25rem;
   .slot {
     @include ellipsis;
   }
+
+  .hidden {
+    width: 0px;
+    margin-right: 0px;
+  }
 }
diff --git a/packages/core/src/components/pill/pill.tsx b/packages/core/src/components/pill/pill.tsx
@@ -72,9 +72,14 @@ export class Pill {
         }
         title={this.el.textContent}
       >
-        {this.icon ? (
-          <ix-icon class={'with-icon'} name={this.icon} size={'16'} />
-        ) : null}
+        <ix-icon
+          class={{
+            'with-icon': true,
+            hidden: this.icon === undefined || this.icon === '',
+          }}
+          name={this.icon}
+          size={'16'}
+        />
         <div class="slot">
           <slot></slot>
         </div>