From 5da528e44d6fadca6e13f34b86f180a4b5239049 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 21 Jun 2024 14:00:48 +0200
Subject: [PATCH] feat(material/button): allow button color to be configured
 through DI (#29297)

Adds the ability to configure the default button color through the `MAT_BUTTON_CONFIG` injection token.
---
 src/material/button/button-base.ts        |  6 ++++-
 src/material/button/button.spec.ts        | 32 ++++++++++++++++++++++-
 tools/public_api_guard/material/button.md |  1 +
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts
index 59b81efb4321..0f2d3c18b24e 100644
--- 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
index 8e9785f68b9d..123f7b1eb4d4 100644
--- 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
index 35025cf91fbd..ed467daf7477 100644
--- 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;
 }