From 76883cd420a058dfa9c71c887605e890233ff53b Mon Sep 17 00:00:00 2001
From: vdegenne <vdegenne@gmail.com>
Date: Sat, 9 Dec 2023 11:39:31 +0100
Subject: [PATCH] feat(chip): trailing remove icon can now be customized

---
 chips/internal/_trailing-icon.scss  | 2 +-
 chips/internal/filter-chip.ts       | 4 ++--
 chips/internal/multi-action-chip.ts | 9 ---------
 chips/internal/trailing-icons.ts    | 4 ++--
 4 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/chips/internal/_trailing-icon.scss b/chips/internal/_trailing-icon.scss
index 8b7a5c3629..316bf584d9 100644
--- a/chips/internal/_trailing-icon.scss
+++ b/chips/internal/_trailing-icon.scss
@@ -35,7 +35,7 @@
     width: var(--_icon-size);
   }
 
-  [name="trailing-icon"]::slotted(md-icon) {
+  [name="remove-trailing-icon"]::slotted(md-icon) {
      --md-icon-size: var(--_icon-size);
      color: inherit;
   }
diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts
index daf37a149d..ef32cacf18 100644
--- a/chips/internal/filter-chip.ts
+++ b/chips/internal/filter-chip.ts
@@ -22,7 +22,7 @@ import {renderRemoveButton} from './trailing-icons.js';
  */
 export class FilterChip extends MultiActionChip {
   @property({type: Boolean}) elevated = false;
-  @property({type: Boolean, attribute: 'has-trailing'}) hasTrailing = false;
+  @property({type: Boolean}) removable = false;
   @property({type: Boolean, reflect: true}) selected = false;
 
   /**
@@ -84,7 +84,7 @@ export class FilterChip extends MultiActionChip {
   }
 
   protected override renderTrailingAction(focusListener: EventListener) {
-    if (this.hasTrailing) {
+    if (this.removable) {
       return renderRemoveButton({
         focusListener,
         ariaLabel: this.ariaLabelRemove,
diff --git a/chips/internal/multi-action-chip.ts b/chips/internal/multi-action-chip.ts
index 6819d5ee06..21310c82db 100644
--- a/chips/internal/multi-action-chip.ts
+++ b/chips/internal/multi-action-chip.ts
@@ -42,15 +42,6 @@ export abstract class MultiActionChip extends Chip {
   protected abstract readonly primaryAction: HTMLElement | null;
   protected abstract readonly trailingAction: HTMLElement | null;
 
-  /**
-   * Getter used to determine if the user provided a trailing icon or not.
-   */
-  get hasSlottedTrailingIcon() {
-     const slot = this.shadowRoot.querySelector('slot[name="trailing-icon"]') as HTMLSlotElement;
-     // Default slot is not counted as one element.
-     return slot.assignedElements().length > 0;
-  }
-
   constructor() {
     super();
     this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this);
diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
index b8ceb99766..14dc5f174e 100644
--- a/chips/internal/trailing-icons.ts
+++ b/chips/internal/trailing-icons.ts
@@ -34,7 +34,7 @@ export function renderRemoveButton({
       @focus=${focusListener}>
       <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple ?disabled=${disabled}></md-ripple>
-      <slot name="trailing-icon" class="trailing icon">
+      <slot name="remove-trailing-icon" class="trailing icon">
         <svg viewBox="0 96 960 960" aria-hidden="true">
           <path
             d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
@@ -46,7 +46,7 @@ export function renderRemoveButton({
 }
 
 function handleRemoveClick(this: MultiActionChip, event: Event) {
-  if (this.disabled || this.hasSlottedTrailingIcon) {
+  if (this.disabled) {
     return;
   }