chore(chips): split out trailing icon styles

PiperOrigin-RevId: 530736697
material-components · May 9, 2023 · 095355d · 095355d
1 parent ec47f9b
commit 095355d
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 38 deletions.
diff --git a/chips/filter-chip.ts b/chips/filter-chip.ts
@@ -10,6 +10,7 @@ import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
 import {FilterChip} from './lib/filter-chip.js';
 import {styles} from './lib/filter-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
+import {styles as trailingIconStyles} from './lib/trailing-icon-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -25,5 +26,6 @@ declare global {
  */
 @customElement('md-filter-chip')
 export class MdFilterChip extends FilterChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles =
+      [sharedStyles, elevatedStyles, trailingIconStyles, styles];
 }
diff --git a/chips/lib/_filter-chip.scss b/chips/lib/_filter-chip.scss
@@ -135,41 +135,4 @@
   .selected:active .icon {
     color: var(--_selected-pressed-leading-icon-color);
   }
-
-  .icon.trailing {
-    color: var(--_trailing-icon-color);
-  }
-
-  :hover .icon.trailing {
-    color: var(--_hover-trailing-icon-color);
-  }
-
-  :focus .icon.trailing {
-    color: var(--_focus-trailing-icon-color);
-  }
-
-  :active .icon.trailing {
-    color: var(--_pressed-trailing-icon-color);
-  }
-
-  .disabled .icon.trailing {
-    color: var(--_disabled-trailing-icon-color);
-    opacity: var(--_disabled-trailing-icon-opacity);
-  }
-
-  .selected .icon.trailing {
-    color: var(--_selected-trailing-icon-color);
-  }
-
-  .selected:hover .icon.trailing {
-    color: var(--_selected-hover-trailing-icon-color);
-  }
-
-  .selected:focus .icon.trailing {
-    color: var(--_selected-focus-trailing-icon-color);
-  }
-
-  .selected:active .icon.trailing {
-    color: var(--_selected-pressed-trailing-icon-color);
-  }
 }
diff --git a/chips/lib/_trailing-icon.scss b/chips/lib/_trailing-icon.scss
@@ -0,0 +1,43 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  .trailing .icon {
+    color: var(--_trailing-icon-color);
+  }
+
+  :hover .trailing .icon {
+    color: var(--_hover-trailing-icon-color);
+  }
+
+  :focus .trailing .icon {
+    color: var(--_focus-trailing-icon-color);
+  }
+
+  :active .trailing .icon {
+    color: var(--_pressed-trailing-icon-color);
+  }
+
+  .disabled .trailing .icon {
+    color: var(--_disabled-trailing-icon-color);
+    opacity: var(--_disabled-trailing-icon-opacity);
+  }
+
+  .selected .trailing .icon {
+    color: var(--_selected-trailing-icon-color);
+  }
+
+  .selected:hover .trailing .icon {
+    color: var(--_selected-hover-trailing-icon-color);
+  }
+
+  .selected:focus .trailing .icon {
+    color: var(--_selected-focus-trailing-icon-color);
+  }
+
+  .selected:active .trailing .icon {
+    color: var(--_selected-pressed-trailing-icon-color);
+  }
+}
diff --git a/chips/lib/trailing-icon-styles.scss b/chips/lib/trailing-icon-styles.scss
@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './trailing-icon';
+// go/keep-sorted end
+
+@include trailing-icon.styles;