From 9c0336aa12405bd3a926109d2ae29a418bb97e03 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Thu, 8 Jun 2023 11:21:47 -0700
Subject: [PATCH] fix(chips): misaligned trailing action ripple

PiperOrigin-RevId: 538841541
---
 chips/lib/_trailing-icon.scss                        | 5 ++---
 chips/lib/filter-chip.ts                             | 2 +-
 chips/lib/input-chip.ts                              | 2 +-
 chips/lib/{trailing-actions.ts => trailing-icons.ts} | 2 +-
 4 files changed, 5 insertions(+), 6 deletions(-)
 rename chips/lib/{trailing-actions.ts => trailing-icons.ts} (96%)

diff --git a/chips/lib/_trailing-icon.scss b/chips/lib/_trailing-icon.scss
index 7c9f63698c..5a5cf85645 100644
--- a/chips/lib/_trailing-icon.scss
+++ b/chips/lib/_trailing-icon.scss
@@ -9,7 +9,8 @@
 
 @mixin styles() {
   .trailing.action {
-    display: flex;
+    align-items: center;
+    justify-content: center;
     padding: 0 8px;
 
     // Note: the trailing action's shape only follows the trailing end of the
@@ -29,8 +30,6 @@
   .trailing.action md-ripple {
     border-radius: 50%;
     height: calc(4 / 3 * var(--_icon-size)); // 24px default
-    inset: 50% 0 0 50%;
-    transform: translateX(-50%) translateY(-50%);
     width: calc(4 / 3 * var(--_icon-size)); // 24px default
   }
 
diff --git a/chips/lib/filter-chip.ts b/chips/lib/filter-chip.ts
index 45e41fcef1..bcf17b2f11 100644
--- a/chips/lib/filter-chip.ts
+++ b/chips/lib/filter-chip.ts
@@ -12,7 +12,7 @@ import {property, query} from 'lit/decorators.js';
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 
 import {MultiActionChip} from './multi-action-chip.js';
-import {renderRemoveButton} from './trailing-actions.js';
+import {renderRemoveButton} from './trailing-icons.js';
 
 /**
  * A filter chip component.
diff --git a/chips/lib/input-chip.ts b/chips/lib/input-chip.ts
index 0a0fb52759..a93ffc30fc 100644
--- a/chips/lib/input-chip.ts
+++ b/chips/lib/input-chip.ts
@@ -10,7 +10,7 @@ import {property, query} from 'lit/decorators.js';
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 
 import {MultiActionChip} from './multi-action-chip.js';
-import {renderRemoveButton} from './trailing-actions.js';
+import {renderRemoveButton} from './trailing-icons.js';
 
 /**
  * An input chip component.
diff --git a/chips/lib/trailing-actions.ts b/chips/lib/trailing-icons.ts
similarity index 96%
rename from chips/lib/trailing-actions.ts
rename to chips/lib/trailing-icons.ts
index 6ab20af0d6..bbe1194f9e 100644
--- a/chips/lib/trailing-actions.ts
+++ b/chips/lib/trailing-icons.ts
@@ -15,7 +15,7 @@ import {Chip} from './chip.js';
 export function renderRemoveButton({disabled}: {disabled: boolean}) {
   return html`
     <button class="trailing action"
-      ?disabled=${disabled ?? false}
+      ?disabled=${disabled}
       @click=${handleRemoveClick}
     >
       <md-focus-ring></md-focus-ring>