From 186fe5252281c45f92ede10a963990ea5f4b566c 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/BUILD.bazel | 2 + src/material/card/_card-theme.scss | 26 ++++++++++++ src/material/card/_m2-filled-card.scss | 50 ++++++++++++++++++++++++ src/material/card/_m3-filled-card.scss | 27 +++++++++++++ src/material/card/card.scss | 11 ++++++ src/material/card/card.ts | 4 +- src/material/core/tokens/_density.scss | 1 + src/material/core/tokens/_m2-tokens.scss | 2 + src/material/core/tokens/_m3-tokens.scss | 2 + 10 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 src/material/card/_m2-filled-card.scss create mode 100644 src/material/card/_m3-filled-card.scss 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/BUILD.bazel b/src/material/card/BUILD.bazel index fd7d3646dc55..6957609686b0 100644 --- a/src/material/card/BUILD.bazel +++ b/src/material/card/BUILD.bazel @@ -15,6 +15,7 @@ sass_library( srcs = [ "_m3-card.scss", "_m3-elevated-card.scss", + "_m3-filled-card.scss", "_m3-outlined-card.scss", ], deps = [ @@ -28,6 +29,7 @@ sass_library( srcs = [ "_m2-card.scss", "_m2-elevated-card.scss", + "_m2-filled-card.scss", "_m2-outlined-card.scss", ], deps = [ diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 2f1650bc856a..3a0be33c9b20 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -8,6 +8,7 @@ @use './m2-card'; @use './m2-elevated-card'; @use './m2-outlined-card'; +@use './m2-filled-card'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -22,6 +23,10 @@ m2-outlined-card.$prefix, m2-outlined-card.get-unthemable-tokens() ); + @include token-utils.create-token-values-mixed( + m2-filled-card.$prefix, + m2-filled-card.get-unthemable-tokens() + ); @include token-utils.create-token-values-mixed( m2-card.$prefix, m2-card.get-unthemable-tokens() @@ -43,6 +48,10 @@ m2-outlined-card.$prefix, m2-outlined-card.get-color-tokens($theme) ); + @include token-utils.create-token-values-mixed( + m2-filled-card.$prefix, + m2-filled-card.get-color-tokens($theme) + ); @include token-utils.create-token-values-mixed( m2-card.$prefix, m2-card.get-color-tokens($theme) @@ -64,6 +73,10 @@ m2-outlined-card.$prefix, m2-outlined-card.get-typography-tokens($theme) ); + @include token-utils.create-token-values-mixed( + m2-filled-card.$prefix, + m2-filled-card.get-typography-tokens($theme) + ); @include token-utils.create-token-values-mixed( m2-card.$prefix, m2-card.get-typography-tokens($theme) @@ -85,6 +98,10 @@ m2-outlined-card.$prefix, m2-outlined-card.get-density-tokens($theme) ); + @include token-utils.create-token-values-mixed( + m2-filled-card.$prefix, + m2-filled-card.get-density-tokens($theme) + ); @include token-utils.create-token-values-mixed( m2-card.$prefix, m2-card.get-density-tokens($theme) @@ -110,6 +127,11 @@ tokens: m2-outlined-card.get-token-slots(), prefix: 'outlined-', ), + ( + namespace: m2-filled-card.$prefix, + tokens: m2-filled-card.get-token-slots(), + prefix: 'filled-', + ) ); } @@ -149,6 +171,10 @@ m2-outlined-card.$prefix, map.get($tokens, m2-outlined-card.$prefix) ); + @include token-utils.create-token-values( + m2-filled-card.$prefix, + map.get($tokens, m2-filled-card.$prefix) + ); @include token-utils.create-token-values( m2-card.$prefix, map.get($tokens, m2-card.$prefix) diff --git a/src/material/card/_m2-filled-card.scss b/src/material/card/_m2-filled-card.scss new file mode 100644 index 000000000000..e4aabd0b0d5b --- /dev/null +++ b/src/material/card/_m2-filled-card.scss @@ -0,0 +1,50 @@ +@use '../core/theming/inspection'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, card-filled); + +// Tokens that can't be configured through Angular Material's current theming API, +// but may be in a future version of the theming API. +// +// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. +// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in +// our CSS. +@function get-unthemable-tokens() { + @return ( + container-shape: 4px, + ); +} + +// Tokens that can be configured through Angular Material's color theming API. +@function get-color-tokens($theme) { + $elevation: inspection.get-theme-color($theme, foreground, elevation); + + @return ( + container-color: inspection.get-theme-color($theme, background, card), + container-elevation: elevation.get-box-shadow(0), + ); +} + +// Tokens that can be configured through Angular Material's typography theming API. +@function get-typography-tokens($theme) { + @return (); +} + +// Tokens that can be configured through Angular Material's density theming API. +@function get-density-tokens($theme) { + @return (); +} + +// Combines the tokens generated by the above functions into a single map with placeholder values. +// This is used to create token slots. +@function get-token-slots() { + @return sass-utils.deep-merge-all( + get-unthemable-tokens(), + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) +); +} diff --git a/src/material/card/_m3-filled-card.scss b/src/material/card/_m3-filled-card.scss new file mode 100644 index 000000000000..7561e19f08c5 --- /dev/null +++ b/src/material/card/_m3-filled-card.scss @@ -0,0 +1,27 @@ +@use 'sass:map'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, card-filled); + +/// Generates the tokens for MDC filled-card +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @param {Map} $token-slots Possible token slots +/// @return {Map} A set of tokens for the MDC filled-card +@function get-tokens($systems, $exclude-hardcoded, $token-slots) { + $tokens: ( + container-color: map.get($systems, md-sys-color, surface-container-highest), + container-elevation: map.get($systems, md-sys-elevation, level0), + container-shape: map.get($systems, md-sys-shape, corner-medium), + ); + + $elevation: map.get($tokens, container-elevation); + + @if ($elevation != null) { + $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation)); + } + + @return m3-utils.namespace($prefix, $tokens, $token-slots); +} diff --git a/src/material/card/card.scss b/src/material/card/card.scss index 477b9cc95683..d161d8657d09 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -2,6 +2,7 @@ @use './m2-card'; @use './m2-elevated-card'; @use './m2-outlined-card'; +@use './m2-filled-card'; // Size of the `mat-card-header` region custom to Angular Material. $mat-card-header-size: 40px !default; @@ -62,6 +63,16 @@ $mat-card-default-padding: 16px !default; } } +.mat-mdc-card-filled { + @include token-utils.use-tokens( + m2-filled-card.$prefix, m2-filled-card.get-token-slots() + ) { + background-color: token-utils.slot(container-color); + border-radius: token-utils.slot(container-shape); + box-shadow: token-utils.slot(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, diff --git a/src/material/core/tokens/_density.scss b/src/material/core/tokens/_density.scss index 9aaecf113759..7c0d9171ea4f 100644 --- a/src/material/core/tokens/_density.scss +++ b/src/material/core/tokens/_density.scss @@ -44,6 +44,7 @@ $_density-tokens: ( touch-target-display: (block, block, none, none), container-height: (40px, 36px, 32px, 28px), ), + (mat, filled-card): (), (mat, filled-text-field): (), (mat, form-field): ( container-height: (56px, 52px, 48px, 44px, 40px, 36px), diff --git a/src/material/core/tokens/_m2-tokens.scss b/src/material/core/tokens/_m2-tokens.scss index 2237cc37a2b7..bc2628010887 100644 --- a/src/material/core/tokens/_m2-tokens.scss +++ b/src/material/core/tokens/_m2-tokens.scss @@ -15,6 +15,7 @@ @use '../../button/m2-tonal-button'; @use '../../card/m2-card'; @use '../../card/m2-elevated-card'; +@use '../../card/m2-filled-card'; @use '../../card/m2-outlined-card'; @use '../../checkbox/m2-checkbox'; @use '../../chips/m2-chip'; @@ -116,6 +117,7 @@ _get-tokens-for-module($theme, m2-fab), _get-tokens-for-module($theme, m2-fab-small), _get-tokens-for-module($theme, m2-filled-button), + _get-tokens-for-module($theme, m2-filled-card), _get-tokens-for-module($theme, m2-filled-text-field), _get-tokens-for-module($theme, m2-form-field), _get-tokens-for-module($theme, m2-full-pseudo-checkbox), diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss index 1ba270e9141d..05e9637cc8de 100644 --- a/src/material/core/tokens/_m3-tokens.scss +++ b/src/material/core/tokens/_m3-tokens.scss @@ -6,6 +6,7 @@ @use '../../button/m3-fab'; @use '../../button/m3-fab-small'; @use '../../button/m3-filled-button'; +@use '../../card/m3-filled-card'; @use '../../button/m3-icon-button'; @use '../../button/m3-outlined-button'; @use '../../button/m3-protected-button'; @@ -441,6 +442,7 @@ $system-variables-prefix) { m3-fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots), m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots), m3-filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-filled-card.get-tokens($systems, $exclude-hardcoded, $token-slots), m3-filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots), m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots), m3-full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), From b4c330ed2870f5e2fba2cce4f0cf45ec0110d635 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 --- .../card/card-overview/card-overview-example.html | 10 +++++++++- 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, 21 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 6805d4fb8214..e91eecb2db93 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 @@ -1,3 +1,11 @@ + + Elevated + + - Simple card + Outlined + + + Filled + \ 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'; - } }