fix(tabs): group alignment propagating to nested groups (angular#19037)

The selector that applies the alignment to the tab header was too broad which meant that it was applying to any nested tab groups. Fixes angular#19035.
karanpopat · Apr 20, 2020 · 5224ac2 · 5224ac2
1 parent 1cf4048
commit 5224ac2
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -144,16 +144,18 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 // Structural styles for the element that wraps the paginated header items.
-@mixin mat-mdc-paginated-tab-header-item-wrapper {
+@mixin mat-mdc-paginated-tab-header-item-wrapper($parent) {
   display: flex;
   flex: 1 0 auto;
 
+  // We need to set the parent here explicitly, in order to prevent the alignment
+  // from any parent tab groups from propagating down to the children when nesting.
   // Note that these are used as inputs so they shouldn't be changed to `mat-mdc-`.
-  [mat-align-tabs='center'] & {
+  [mat-align-tabs='center'] > #{$parent} & {
     justify-content: center;
   }
 
-  [mat-align-tabs='end'] & {
+  [mat-align-tabs='end'] > #{$parent} & {
     justify-content: flex-end;
   }
 }

diff --git a/src/material-experimental/mdc-tabs/tab-header.scss b/src/material-experimental/mdc-tabs/tab-header.scss
@@ -17,5 +17,5 @@
 }
 
 .mat-mdc-tab-labels {
-  @include mat-mdc-paginated-tab-header-item-wrapper;
+  @include mat-mdc-paginated-tab-header-item-wrapper('.mat-mdc-tab-header');
 }
diff --git a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.scss b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.scss
@@ -6,7 +6,7 @@
 @include mat-mdc-paginated-tab-header;
 
 .mat-mdc-tab-links {
-  @include mat-mdc-paginated-tab-header-item-wrapper;
+  @include mat-mdc-paginated-tab-header-item-wrapper('.mat-mdc-tab-link-container');
 }
 
 .mat-mdc-tab-link-container {

diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
@@ -138,14 +138,16 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 // Structural styles for the element that wraps the paginated header items.
-@mixin paginated-tab-header-item-wrapper {
+@mixin paginated-tab-header-item-wrapper($parent) {
   display: flex;
 
-  [mat-align-tabs='center'] & {
+  // We need to set the parent here explicitly, in order to prevent the alignment
+  // from any parent tab groups from propagating down to the children when nesting.
+  [mat-align-tabs='center'] > #{$parent} & {
     justify-content: center;
   }
 
-  [mat-align-tabs='end'] & {
+  [mat-align-tabs='end'] > #{$parent} & {
     justify-content: flex-end;
   }
 }

diff --git a/src/material/tabs/tab-header.scss b/src/material/tabs/tab-header.scss
@@ -8,7 +8,7 @@
 }
 
 .mat-tab-labels {
-  @include paginated-tab-header-item-wrapper;
+  @include paginated-tab-header-item-wrapper('.mat-tab-header');
 }
 
 .mat-tab-label-container {

diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.scss b/src/material/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -4,7 +4,7 @@
 @include paginated-tab-header;
 
 .mat-tab-links {
-  @include paginated-tab-header-item-wrapper;
+  @include paginated-tab-header-item-wrapper('.mat-tab-link-container');
 }
 
 .mat-ink-bar {