From 98cc8033ddf6d63af0ddd56c7ecea048cac49164 Mon Sep 17 00:00:00 2001 From: naaajii Date: Sat, 12 Oct 2024 04:55:46 +0500 Subject: [PATCH 1/2] feat(material/card): support `filled` variant this commit add `filled` variant for material card which provides subtle seperation from background and has less emphasis than elevated or outlined cards fixes #29840 --- goldens/material/card/index.api.md | 2 +- src/material/card/_m2-card.scss | 3 +++ src/material/card/_m3-card.scss | 3 +++ src/material/card/card.scss | 8 ++++++++ src/material/card/card.ts | 4 +++- 5 files changed, 18 insertions(+), 2 deletions(-) diff --git a/goldens/material/card/index.api.md b/goldens/material/card/index.api.md index 345ac1081a53..5bcc72ee089b 100644 --- a/goldens/material/card/index.api.md +++ b/goldens/material/card/index.api.md @@ -32,7 +32,7 @@ export class MatCardActions { } // @public (undocumented) -export type MatCardAppearance = 'outlined' | 'raised'; +export type MatCardAppearance = 'outlined' | 'raised' | 'filled'; // @public export class MatCardAvatar { diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss index df731eaecbb2..dc35c55dfcb4 100644 --- a/src/material/card/_m2-card.scss +++ b/src/material/card/_m2-card.scss @@ -12,6 +12,7 @@ $prefix: (mat, card); @return ( elevated-container-shape: 4px, outlined-container-shape: 4px, + filled-container-shape: 4px, outlined-outline-width: 1px, ); } @@ -25,6 +26,8 @@ $prefix: (mat, card); outlined-container-elevation: elevation.get-box-shadow(0), outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12), subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text), + filled-container-color: inspection.get-theme-color($theme, background, card), + filled-container-elevation: elevation.get-box-shadow(0) ); } diff --git a/src/material/card/_m3-card.scss b/src/material/card/_m3-card.scss index 591b3773f0a5..cc6a4deabfce 100644 --- a/src/material/card/_m3-card.scss +++ b/src/material/card/_m3-card.scss @@ -25,6 +25,9 @@ $prefix: (mat, card); outlined-container-shape: map.get($systems, md-sys-shape, corner-medium), outlined-outline-color: map.get($systems, md-sys-color, outline-variant), outlined-outline-width: if($exclude-hardcoded, null, 1px), + filled-container-color: map.get($systems, md-sys-color, surface-container-highest), + filled-container-elevation: map.get($systems, md-sys-elevation, level0), + filled-container-shape: map.get($systems, md-sys-shape, corner-medium), ), ); diff --git a/src/material/card/card.scss b/src/material/card/card.scss index fa60961bb0dd..7083d28d92af 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -51,6 +51,14 @@ $mat-card-default-padding: 16px !default; } } +.mat-mdc-card-filled { + @include token-utils.use-tokens(m2-card.$prefix, m2-card.get-token-slots()) { + background-color: token-utils.slot(filled-container-color); + border-radius: token-utils.slot(filled-container-shape); + box-shadow: token-utils.slot(filled-container-elevation); + } +} + .mdc-card__media { position: relative; box-sizing: border-box; diff --git a/src/material/card/card.ts b/src/material/card/card.ts index 80c58b639d8b..a0197b3c48ca 100644 --- a/src/material/card/card.ts +++ b/src/material/card/card.ts @@ -16,7 +16,7 @@ import { inject, } from '@angular/core'; -export type MatCardAppearance = 'outlined' | 'raised'; +export type MatCardAppearance = 'outlined' | 'raised' | 'filled'; /** Object that can be used to configure the default options for the card module. */ export interface MatCardConfig { @@ -41,6 +41,8 @@ export const MAT_CARD_CONFIG = new InjectionToken('MAT_CARD_CONFI 'class': 'mat-mdc-card mdc-card', '[class.mat-mdc-card-outlined]': 'appearance === "outlined"', '[class.mdc-card--outlined]': 'appearance === "outlined"', + '[class.mat-mdc-card-filled]': 'appearance === "filled"', + '[class.mdc-card--filled]': 'appearance === "filled"', }, exportAs: 'matCard', encapsulation: ViewEncapsulation.None, From 318dcb335cb58dbcd5a524b6c0105fc06816e9f8 Mon Sep 17 00:00:00 2001 From: naaajii Date: Sat, 12 Oct 2024 05:18:11 +0500 Subject: [PATCH 2/2] docs(material/card): add each appearance example update the example to contain `elevated`, `outlined` & `filled` variants --- .../material/card/card-overview/card-overview-example.html | 2 +- src/dev-app/card/BUILD.bazel | 2 +- src/dev-app/card/card-demo.html | 6 +++++- src/dev-app/card/card-demo.scss | 4 ++++ src/dev-app/card/card-demo.ts | 7 ++----- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components-examples/material/card/card-overview/card-overview-example.html b/src/components-examples/material/card/card-overview/card-overview-example.html index cea3420f3259..4cdd3451a7cc 100644 --- a/src/components-examples/material/card/card-overview/card-overview-example.html +++ b/src/components-examples/material/card/card-overview/card-overview-example.html @@ -16,4 +16,4 @@ - + \ No newline at end of file diff --git a/src/dev-app/card/BUILD.bazel b/src/dev-app/card/BUILD.bazel index 8c8b14bf433c..5d420cda0d55 100644 --- a/src/dev-app/card/BUILD.bazel +++ b/src/dev-app/card/BUILD.bazel @@ -15,7 +15,7 @@ ng_project( "//:node_modules/@angular/forms", "//src/material/button", "//src/material/card", - "//src/material/checkbox", + "//src/material/radio", ], ) diff --git a/src/dev-app/card/card-demo.html b/src/dev-app/card/card-demo.html index a09abf454fc9..d4de4196bf48 100644 --- a/src/dev-app/card/card-demo.html +++ b/src/dev-app/card/card-demo.html @@ -1,5 +1,9 @@
- Use outlined cards + + Raised + Outlined + Filled + diff --git a/src/dev-app/card/card-demo.scss b/src/dev-app/card/card-demo.scss index 6038ba0385ae..945be0598362 100644 --- a/src/dev-app/card/card-demo.scss +++ b/src/dev-app/card/card-demo.scss @@ -16,3 +16,7 @@ text-transform: uppercase; } } + +mat-radio-group { + margin-bottom: 10px; +} diff --git a/src/dev-app/card/card-demo.ts b/src/dev-app/card/card-demo.ts index 4db09dd68157..7202b53a81e1 100644 --- a/src/dev-app/card/card-demo.ts +++ b/src/dev-app/card/card-demo.ts @@ -10,14 +10,14 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatCardAppearance, MatCardModule} from '@angular/material/card'; -import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatRadioModule} from '@angular/material/radio'; @Component({ selector: 'card-demo', templateUrl: 'card-demo.html', styleUrl: 'card-demo.css', encapsulation: ViewEncapsulation.None, - imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule], + imports: [MatCardModule, MatButtonModule, MatRadioModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CardDemo { @@ -28,7 +28,4 @@ export class CardDemo { As of some one gently rapping, rapping at my chamber door. “’Tis some visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.”`; - toggleAppearance() { - this.appearance = this.appearance == 'raised' ? 'outlined' : 'raised'; - } }