fix(chip): styling discrepancies

Author: SisIvanova

src/components/chip/chip.ts

@@ -1,12 +1,13 @@
 import { LitElement, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { type Ref, createRef, ref } from 'lit/directives/ref.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeybindings } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import type { StyleVariant } from '../types.js';
 import { styles } from './themes/chip.base.css.js';
@@ -84,6 +85,18 @@ export default class IgcChipComponent extends EventEmitterMixin<
   @property({ reflect: true })
   public variant!: StyleVariant;
 
+  @queryAssignedElements({ slot: 'prefix' })
+  protected prefixes!: Array<HTMLElement>;
+
+  @queryAssignedElements({ slot: 'start' })
+  protected contentStart!: Array<HTMLElement>;
+
+  @queryAssignedElements({ slot: 'suffix' })
+  protected suffixes!: Array<HTMLElement>;
+
+  @queryAssignedElements({ slot: 'end' })
+  protected contentEnd!: Array<HTMLElement>;
+
   constructor() {
     super();
 
@@ -120,7 +133,12 @@ export default class IgcChipComponent extends EventEmitterMixin<
         aria-disabled="${this.disabled ? 'true' : 'false'}"
         @click=${this.handleSelect}
       >
-        <span part="prefix">
+        <span
+          part="prefix"
+          .hidden=${isEmpty(this.prefixes) &&
+          isEmpty(this.contentStart) &&
+          !this.selected}
+        >
           ${this.selectable && this.selected
             ? html`<slot name="select">
                 <igc-icon name="selected" collection="default"></igc-icon>
@@ -130,7 +148,12 @@ export default class IgcChipComponent extends EventEmitterMixin<
           <slot name="prefix"></slot>
         </span>
         <slot></slot>
-        <span part="suffix">
+        <span
+          part="suffix"
+          .hidden=${isEmpty(this.suffixes) &&
+          isEmpty(this.contentEnd) &&
+          !this.removable}
+        >
           <slot name="end"></slot>
           <slot name="suffix"></slot>
           ${this.removable && !this.disabled

src/components/chip/themes/shared/chip.bootstrap.scss

@@ -13,57 +13,22 @@ $theme: $bootstrap;
     }
 }
 
-:host([variant='primary']) button,
-:host([variant='primary']) button:focus,
-:host([variant='primary']) button:hover,
-:host([selected][variant='primary']) button:not([disabled]) {
-    color: contrast-color(primary, 700);
-}
-
 :host([variant='primary']) button:focus {
     outline: rem(2px) solid color(primary, 200);
 }
 
-:host([variant='info']) button,
-:host([variant='info']) button:focus,
-:host([variant='info']) button:hover,
-:host([selected][variant='info']) button:not([disabled]) {
-    color: contrast-color(info, 700);
-}
-
 :host([variant='info']) button:focus {
     outline: rem(2px) solid color(info, 200);
 }
 
-:host([variant='success']) button,
-:host([variant='success']) button:focus,
-:host([variant='success']) button:hover,
-:host([selected][variant='success']) button:not([disabled]) {
-    color: contrast-color(success, 700);
-}
-
 :host([variant='success']) button:focus {
     outline: rem(2px) solid color(success, 200);
 }
 
-:host([variant='warning']) button,
-:host([variant='warning']) button:focus,
-:host([variant='warning']) button:hover,
-:host([selected][variant='warning']) button:not([disabled]) {
-    color: contrast-color(warn, 700);
-}
-
 :host([variant='warning']) button:focus {
     outline: rem(2px) solid color(warn, 200);
 }
 
-:host([variant='danger']) button,
-:host([variant='danger']) button:focus,
-:host([variant='danger']) button:hover,
-:host([selected][variant='danger']) button:not([disabled]) {
-    color: contrast-color(error, 700);
-}
-
 :host([variant='danger']) button:focus {
     outline: rem(2px) solid color(error, 200);
 }

src/components/chip/themes/shared/chip.common.scss

@@ -30,10 +30,6 @@ $theme: $material;
         color: var-get($theme, 'disabled-text-color');
     }
 
-    igc-icon {
-        --component-size: var(--chip-size);
-    }
-
     ::slotted(*) {
         --default-size: var(--chip-size);
     }
@@ -45,4 +41,9 @@ $theme: $material;
     ::slotted(igc-circular-progress) {
         --diameter: #{sizable(rem(14px), rem(18px), rem(24px))};
     }
+
+    igc-icon,
+    ::slotted(igc-icon) {
+        --size: #{sizable(rem(18px), rem(18px), rem(24px))};
+    }
 }

src/components/chip/themes/shared/chip.indigo.scss

@@ -23,7 +23,8 @@ $theme: $indigo;
         border-color: var-get($theme, 'disabled-border-color');
     }
 
-    igc-icon {
+    igc-icon,
+    ::slotted(igc-icon) {
         --size: #{sizable(rem(14px), rem(14px), rem(16px))};
     }
 }