fix(chips): misaligned trailing action ripple

PiperOrigin-RevId: 538841541
material-components · Jun 8, 2023 · 9c0336a · 9c0336a
1 parent 938bf38
commit 9c0336a
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 → chips/lib/trailing-icons.ts b/chips/lib/trailing-actions.ts → 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>