From 4d45fe6fb52dda3bc9cbe540ea56b5e9e9fe8d90 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Mon, 10 Jul 2017 13:31:26 +0300
Subject: [PATCH] fix(aio): fix tab animations on CodeTabsComponent

In our attempt to remove the material ripple effect from tab labels, we were
killing all `transform`-based animations on other `md-tab-group` elements, such
as animating the content when entering/leaving. (This wasn't an issue on Chrome,
because it didn't respect our `!important` flag.)
This commit fixes it by properly hiding the ripple effect (using a feature
introduced in angular/material2@e4789c7b8) and allowing other animations to
execute normally.

Fixes #17998
---
 aio/src/app/embedded/code/code-tabs.component.spec.ts | 7 +++++++
 aio/src/app/embedded/code/code-tabs.component.ts      | 4 ++--
 aio/src/styles/2-modules/_code.scss                   | 5 -----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/aio/src/app/embedded/code/code-tabs.component.spec.ts b/aio/src/app/embedded/code/code-tabs.component.spec.ts
index adfc2f82f4..bfc7a145ec 100644
--- a/aio/src/app/embedded/code/code-tabs.component.spec.ts
+++ b/aio/src/app/embedded/code/code-tabs.component.spec.ts
@@ -83,6 +83,13 @@ describe('CodeTabsComponent', () => {
 
       expect(classes).toEqual(['foo-class', 'bar-class']);
     });
+
+    it('should disable ripple effect on tab labels', () => {
+      createComponent();
+      const tabsGroupComponent = codeTabsDe.query(By.directive(MdTabGroup)).componentInstance;
+
+      expect(tabsGroupComponent.disableRipple).toBe(true);
+    });
   });
 
   describe('(tab content)', () => {
diff --git a/aio/src/app/embedded/code/code-tabs.component.ts b/aio/src/app/embedded/code/code-tabs.component.ts
index d6935478ae..ef7b3b6c4b 100644
--- a/aio/src/app/embedded/code/code-tabs.component.ts
+++ b/aio/src/app/embedded/code/code-tabs.component.ts
@@ -21,7 +21,7 @@ export interface TabInfo {
 @Component({
   selector: 'code-tabs',
   template: `
-    <md-tab-group class="code-tab-group">
+    <md-tab-group class="code-tab-group" disableRipple>
       <md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
         <ng-template md-tab-label>
           <span class="{{ tab.class }}">{{ tab.title }}</span>
@@ -66,8 +66,8 @@ export class CodeTabsComponent implements OnInit {
     for (let i = 0; i < codeExamples.length; i++) {
       const codeExample = codeExamples.item(i);
       const tab = {
-        code: codeExample.innerHTML,
         class: codeExample.getAttribute('class'),
+        code: codeExample.innerHTML,
         language: codeExample.getAttribute('language'),
         linenums: this.getLinenums(codeExample),
         path: codeExample.getAttribute('path') || '',
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 9aad34653e..1f7054779d 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -112,11 +112,6 @@ aio-code pre {
 }
 
 
-// REMOVE RIPPLE EFFECT FROM MATERIAL TABS
-code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-body-content {
-  transform: none !important;
-}
-
 [role="tabpanel"] {
     transition: none;
 }