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

material-components · Dec 9, 2023 · 76883cd · 76883cd
1 parent 2a4db32
commit 76883cd
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }