feat(chip): trailing remove icon can now be customized

material-components · Dec 12, 2023 · 49a6be1 · 49a6be1
1 parent 76883cd
commit 49a6be1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/chips/internal/_trailing-icon.scss b/chips/internal/_trailing-icon.scss
@@ -35,11 +35,6 @@
     width: var(--_icon-size);
   }
 
-  [name="remove-trailing-icon"]::slotted(md-icon) {
-     --md-icon-size: var(--_icon-size);
-     color: inherit;
-  }
-
   :where(:hover) .trailing.icon {
     color: var(--_hover-trailing-icon-color);
   }

diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts
@@ -87,6 +87,7 @@ export abstract class Chip extends LitElement {
       <div class="container ${classMap(this.getContainerClasses())}">
         ${this.renderContainerContent()}
       </div>
+      <slot></slot>
     `;
   }
 

diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
@@ -9,7 +9,7 @@ import '../../ripple/ripple.js';
 
 import {html, nothing} from 'lit';
 
-import {MultiActionChip} from './multi-action-chip.js';
+import {Chip} from './chip.js';
 
 interface RemoveButtonProperties {
   ariaLabel: string;
@@ -34,18 +34,20 @@ export function renderRemoveButton({
       @focus=${focusListener}>
       <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple ?disabled=${disabled}></md-ripple>
-      <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" />
-        </svg>
-      </slot>
+      <span class="trailing icon">
+        <slot name="remove-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" />
+          </svg>
+        </slot>
+      </span>
       <span class="touch"></span>
     </button>
   `;
 }
 
-function handleRemoveClick(this: MultiActionChip, event: Event) {
+function handleRemoveClick(this: Chip, event: Event) {
   if (this.disabled) {
     return;
   }