feat(material/button): allow button color to be configured through DI (…

…angular#29297) Adds the ability to configure the default button color through the `MAT_BUTTON_CONFIG` injection token.
crisbeto · Jun 21, 2024 · 5da528e · 5da528e
1 parent 36c627b
commit 5da528e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts
@@ -21,12 +21,15 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import {MatRipple, MatRippleLoader} from '@angular/material/core';
+import {MatRipple, MatRippleLoader, ThemePalette} from '@angular/material/core';
 
 /** Object that can be used to configure the default options for the button component. */
 export interface MatButtonConfig {
   /** Whether disabled buttons should be interactive. */
   disabledInteractive?: boolean;
+
+  /** Default palette color to apply to buttons. */
+  color?: ThemePalette;
 }
 
 /** Injection token that can be used to provide the default options the button component. */
@@ -167,6 +170,7 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
     const classList = (element as HTMLElement).classList;
 
     this.disabledInteractive = config?.disabledInteractive ?? false;
+    this.color = config?.color ?? null;
     this._rippleLoader?.configureRipple(element, {className: 'mat-mdc-button-ripple'});
 
     // For each of the variant selectors that is present in the button's host

diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts
@@ -3,7 +3,13 @@ import {ApplicationRef, Component, DebugElement} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {MatRipple, ThemePalette} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
-import {MAT_FAB_DEFAULT_OPTIONS, MatButton, MatButtonModule, MatFabDefaultOptions} from './index';
+import {
+  MAT_BUTTON_CONFIG,
+  MAT_FAB_DEFAULT_OPTIONS,
+  MatButton,
+  MatButtonModule,
+  MatFabDefaultOptions,
+} from './index';
 
 describe('MDC-based MatButton', () => {
   beforeEach(waitForAsync(() => {
@@ -374,6 +380,30 @@ describe('MDC-based MatButton', () => {
     ).toBe(true);
   });
 
+  it('should be able to configure the default color of buttons', () => {
+    @Component({
+      template: `<button mat-button>Click me</button>`,
+      standalone: true,
+      imports: [MatButtonModule],
+    })
+    class ConfigTestApp {}
+
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      imports: [MatButtonModule, ConfigTestApp],
+      providers: [
+        {
+          provide: MAT_BUTTON_CONFIG,
+          useValue: {color: 'warn'},
+        },
+      ],
+    });
+    const fixture = TestBed.createComponent(ConfigTestApp);
+    fixture.detectChanges();
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.classList).toContain('mat-warn');
+  });
+
   describe('interactive disabled buttons', () => {
     let fixture: ComponentFixture<TestApp>;
     let button: HTMLButtonElement;

diff --git a/tools/public_api_guard/material/button.md b/tools/public_api_guard/material/button.md
@@ -47,6 +47,7 @@ export class MatButton extends MatButtonBase {
 
 // @public
 export interface MatButtonConfig {
+    color?: ThemePalette;
     disabledInteractive?: boolean;
 }