From eafe11cbe9363f4fc157d92136b9f6a8470a6a5b Mon Sep 17 00:00:00 2001
From: Vanessa Schmitt <vschmitt@google.com>
Date: Thu, 18 Jul 2019 10:50:14 -0700
Subject: [PATCH] style(mdc chips) Fix clashing input and remove classes

We have slightly different styles for the MDC versions of
mat-chip-remove and mat-chip-input. Projects that import
all angular material css are also getting the non-mdc chips
css, which is applying the non-mdc styles to these elements.

Add -mdc to mat-chip-remove and mat-chip-input classes in the
mdc module to differentiate them. All the other mdc chip
classes already contain -mdc for the same reason.
---
 src/material-experimental/mdc-chips/chip-icons.ts       | 3 ++-
 src/material-experimental/mdc-chips/chip-input.ts       | 2 +-
 src/material-experimental/mdc-chips/chip-remove.spec.ts | 4 ++--
 src/material-experimental/mdc-chips/chips.scss          | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/material-experimental/mdc-chips/chip-icons.ts b/src/material-experimental/mdc-chips/chip-icons.ts
index b2b5fbc36952..8fd6cb2b1a92 100644
--- a/src/material-experimental/mdc-chips/chip-icons.ts
+++ b/src/material-experimental/mdc-chips/chip-icons.ts
@@ -93,7 +93,8 @@ const _MatChipRemoveMixinBase:
   selector: '[matChipRemove]',
   inputs: ['disabled', 'tabIndex'],
   host: {
-    'class': 'mat-chip-remove mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
+    'class':
+      'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
     '[tabIndex]': 'tabIndex',
     'role': 'button',
     '(click)': 'interaction.next($event)',
diff --git a/src/material-experimental/mdc-chips/chip-input.ts b/src/material-experimental/mdc-chips/chip-input.ts
index 8edfce5ca609..8ad231ca98e4 100644
--- a/src/material-experimental/mdc-chips/chip-input.ts
+++ b/src/material-experimental/mdc-chips/chip-input.ts
@@ -34,7 +34,7 @@ let nextUniqueId = 0;
   selector: 'input[matChipInputFor]',
   exportAs: 'matChipInput, matChipInputFor',
   host: {
-    'class': 'mat-chip-input mat-input-element',
+    'class': 'mat-mdc-chip-input mat-input-element',
     '(keydown)': '_keydown($event)',
     '(blur)': '_blur()',
     '(focus)': '_focus()',
diff --git a/src/material-experimental/mdc-chips/chip-remove.spec.ts b/src/material-experimental/mdc-chips/chip-remove.spec.ts
index a75be569280a..646292b16c97 100644
--- a/src/material-experimental/mdc-chips/chip-remove.spec.ts
+++ b/src/material-experimental/mdc-chips/chip-remove.spec.ts
@@ -31,10 +31,10 @@ describe('Chip Remove', () => {
   }));
 
   describe('basic behavior', () => {
-    it('should apply the `mat-chip-remove` CSS class', () => {
+    it('should apply the `mat-mdc-chip-remove` CSS class', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 
-      expect(buttonElement.classList).toContain('mat-chip-remove');
+      expect(buttonElement.classList).toContain('mat-mdc-chip-remove');
     });
 
     it('should start MDC exit animation on click', () => {
diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
index 07553ca642d9..b1d665ed2359 100644
--- a/src/material-experimental/mdc-chips/chips.scss
+++ b/src/material-experimental/mdc-chips/chips.scss
@@ -52,6 +52,6 @@
 // Add styles for the matChipInputFor input element.
 $mat-chip-input-width: 150px;
 
-input.mat-chip-input {
+input.mat-mdc-chip-input {
   flex: 1 0 $mat-chip-input-width;
 }