From 024f65c3765e55c944e609fa5233d2f21fe7fdbc Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Mon, 18 Nov 2024 15:27:28 +0200
Subject: [PATCH 1/2] fix(chip): styling discrepancies

---
 src/components/chip/chip.ts                   | 29 +++++++++++++--
 .../chip/themes/shared/chip.bootstrap.scss    | 35 -------------------
 .../chip/themes/shared/chip.common.scss       |  9 ++---
 .../chip/themes/shared/chip.indigo.scss       |  3 +-
 4 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
index 17f77725d..d8b5639ef 100644
--- a/src/components/chip/chip.ts
+++ b/src/components/chip/chip.ts
@@ -1,5 +1,5 @@
 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';
@@ -7,6 +7,7 @@ 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
diff --git a/src/components/chip/themes/shared/chip.bootstrap.scss b/src/components/chip/themes/shared/chip.bootstrap.scss
index a85b1a0af..f7f088fca 100644
--- a/src/components/chip/themes/shared/chip.bootstrap.scss
+++ b/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);
 }
diff --git a/src/components/chip/themes/shared/chip.common.scss b/src/components/chip/themes/shared/chip.common.scss
index 1c3fbff92..89eb36487 100644
--- a/src/components/chip/themes/shared/chip.common.scss
+++ b/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))};
+    }
 }
diff --git a/src/components/chip/themes/shared/chip.indigo.scss b/src/components/chip/themes/shared/chip.indigo.scss
index 6fdc4a562..84803401c 100644
--- a/src/components/chip/themes/shared/chip.indigo.scss
+++ b/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))};
     }
 }

From edd70423cadaa6e9cb855c4ba65620ac6cdf2823 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Wed, 20 Nov 2024 10:55:46 +0200
Subject: [PATCH 2/2] fix(chip): revert icon size changes

---
 src/components/chip/themes/shared/chip.common.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/chip/themes/shared/chip.common.scss b/src/components/chip/themes/shared/chip.common.scss
index 89eb36487..57d9c0d71 100644
--- a/src/components/chip/themes/shared/chip.common.scss
+++ b/src/components/chip/themes/shared/chip.common.scss
@@ -30,6 +30,11 @@ $theme: $material;
         color: var-get($theme, 'disabled-text-color');
     }
 
+    igc-icon,
+    ::slotted(igc-icon) {
+        --component-size: var(--chip-size);
+    }
+
     ::slotted(*) {
         --default-size: var(--chip-size);
     }
@@ -41,9 +46,4 @@ $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))};
-    }
 }