feat(material/tabs): add align in MatTabsConfig

users can align tabs label via config now rather than adding `mat-tab-align` property on each tab group fixes #29685
angular · Sep 23, 2024 · 0021fc8 · 0021fc8
1 parent 7c9bf99
commit 0021fc8
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 0 deletions.
diff --git a/src/material/tabs/tab-config.ts b/src/material/tabs/tab-config.ts
@@ -39,6 +39,9 @@ export interface MatTabsConfig {
 
   /** Whether tabs should be stretched to fill the header. */
   stretchTabs?: boolean;
+
+  /** Alignment for the tabs label. */
+  alignTabs?: 'start' | 'center' | 'end';
 }
 
 /** Injection token that can be used to provide the default options the tabs module. */

diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts
@@ -1187,6 +1187,75 @@ describe('MatTabNavBar with a default config', () => {
   });
 });
 
+describe('MatTabGroup labels aligned with a config', () => {
+  it('should work with start align', () => {
+    const fixture = TestBed.configureTestingModule({
+      imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig],
+      providers: [
+        {
+          provide: MAT_TABS_CONFIG,
+          useValue: {alignTabs: 'start'},
+        },
+      ],
+    }).createComponent(TabsWithAlignConfig);
+    fixture.detectChanges();
+
+    const tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="start"]');
+    expect(tabElement).toBeTruthy();
+  });
+
+  it('should work with center align', () => {
+    const fixture = TestBed.configureTestingModule({
+      imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig],
+      providers: [
+        {
+          provide: MAT_TABS_CONFIG,
+          useValue: {alignTabs: 'center'},
+        },
+      ],
+    }).createComponent(TabsWithAlignConfig);
+    fixture.detectChanges();
+
+    const tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="center"]');
+    expect(tabElement).toBeTruthy();
+  });
+
+  it('should work with end align', () => {
+    const fixture = TestBed.configureTestingModule({
+      imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig],
+      providers: [
+        {
+          provide: MAT_TABS_CONFIG,
+          useValue: {alignTabs: 'end'},
+        },
+      ],
+    }).createComponent(TabsWithAlignConfig);
+    fixture.detectChanges();
+
+    const tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="end"]');
+    expect(tabElement).toBeTruthy();
+  });
+
+  it('should not add align if default config doesnt set align', () => {
+    const fixture = TestBed.configureTestingModule({
+      imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig],
+    }).createComponent(TabsWithAlignConfig);
+    fixture.detectChanges();
+
+    let tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="start"]');
+    expect(tabElement).toBeFalsy();
+
+    tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="center"]');
+    expect(tabElement).toBeFalsy();
+
+    tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="end"]');
+    expect(tabElement).toBeFalsy();
+
+    tabElement = fixture.nativeElement.querySelector('.mat-mdc-tab-group');
+    expect(tabElement).toBeTruthy();
+  });
+});
+
 @Component({
   template: `
     <mat-tab-group class="tab-group"
@@ -1547,3 +1616,19 @@ class TabsWithClassesTestApp {
   labelClassList?: string | string[];
   bodyClassList?: string | string[];
 }
+
+@Component({
+  template: `
+    <mat-tab-group>
+      <mat-tab>
+        First
+      </mat-tab>
+      <mat-tab>
+        Second
+      </mat-tab>
+    </mat-tab-group>
+  `,
+  standalone: true,
+  imports: [MatTabsModule],
+})
+class TabsWithAlignConfig {}
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
@@ -79,6 +79,7 @@ const ENABLE_BACKGROUND_INPUT = true;
     '[class.mat-mdc-tab-group-dynamic-height]': 'dynamicHeight',
     '[class.mat-mdc-tab-group-inverted-header]': 'headerPosition === "below"',
     '[class.mat-mdc-tab-group-stretch-tabs]': 'stretchTabs',
+    '[attr.mat-align-tabs]': 'alignTabs',
     '[style.--mat-tab-animation-duration]': 'animationDuration',
   },
   standalone: true,
@@ -122,6 +123,9 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
   /** Subscription to changes in the tab labels. */
   private _tabLabelSubscription = Subscription.EMPTY;
 
+  /** Alignment for tabs label via MAT_TABS_CONFIG */
+  alignTabs: 'start' | 'center' | 'end' | null = null;
+
   /**
    * Theme color of the tab group. This API is supported in M2 themes only, it
    * has no effect in M3 themes.
@@ -293,6 +297,8 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
         : false;
     this.stretchTabs =
       defaultConfig && defaultConfig.stretchTabs != null ? defaultConfig.stretchTabs : true;
+    this.alignTabs =
+      defaultConfig && defaultConfig.alignTabs != null ? defaultConfig.alignTabs : null;
   }
 
   /**

diff --git a/tools/public_api_guard/material/tabs.md b/tools/public_api_guard/material/tabs.md
@@ -507,6 +507,7 @@ export const matTabsAnimations: {
 
 // @public
 export interface MatTabsConfig {
+    alignTabs?: 'start' | 'center' | 'end';
     animationDuration?: string;
     contentTabIndex?: number;
     disablePagination?: boolean;