fix(core): chip alignment (#259)

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

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/core/src/components/chip/chip.scss b/packages/core/src/components/chip/chip.scss
@@ -15,6 +15,7 @@ $border-radius: 100px;
 
 :host {
   display: inline-flex;
+  width: fit-content;
   position: relative;
   align-items: center;
   border-radius: $border-radius;
@@ -29,6 +30,11 @@ $border-radius: 100px;
     margin-right: $tiny-space;
   }
 
+  .hidden {
+    width: 0px;
+    margin-right: 0px;
+  }
+
   margin-left: $tiny-space;
 
   .close-button-container {

diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
@@ -111,9 +111,14 @@ export class Chip {
             : {}
         }
       >
-        {this.icon ? (
-          <ix-icon class={'with-icon'} name={this.icon} size={'24'} />
-        ) : null}
+        <ix-icon
+          class={{
+            'with-icon': true,
+            hidden: this.icon === undefined || this.icon === '',
+          }}
+          name={this.icon}
+          size={'24'}
+        />
         <span class="slot-container">
           <slot></slot>
         </span>