From 3abb812c5689e62409204f80903742b1a0a14a39 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 25 Mar 2022 01:35:25 +0100 Subject: [PATCH] fix(material-experimental/mdc-chips): make it easier to customize chip typography (#24632) Moves the typography styles of the chip to the root of the component so that it's easier to customize, similar to the non-MDC version. --- src/material-experimental/mdc-chips/_chips-theme.scss | 9 +++++++-- src/material-experimental/mdc-chips/chip.scss | 8 ++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss index e4b6b9cd73c0..3634dd61f78b 100644 --- a/src/material-experimental/mdc-chips/_chips-theme.scss +++ b/src/material-experimental/mdc-chips/_chips-theme.scss @@ -1,8 +1,8 @@ -@use '@material/chips/chip' as mdc-chip; @use '@material/chips/chip-theme' as mdc-chip-theme; @use '@material/chips/chip-set' as mdc-chip-set; @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/theme/color-palette' as mdc-color-palette; +@use '@material/typography' as mdc-typography; @use 'sass:color'; @use 'sass:map'; @use '../mdc-helpers/mdc-helpers'; @@ -80,7 +80,12 @@ theming.get-typography-config($config-or-theme)); @include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query); @include mdc-helpers.mat-using-mdc-typography($config) { - @include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query); + // Note that we don't go through MDC's typography mixin, because it assigns the styles to + // an inner element which makes it difficult for clients to customize. Instead we apply the + // same styles ourselves to the root. + .mat-mdc-standard-chip { + @include mdc-typography.typography(body2, $query: mdc-helpers.$mat-typography-styles-query); + } } } diff --git a/src/material-experimental/mdc-chips/chip.scss b/src/material-experimental/mdc-chips/chip.scss index 4fa66e348c5f..f262b4396bbb 100644 --- a/src/material-experimental/mdc-chips/chip.scss +++ b/src/material-experimental/mdc-chips/chip.scss @@ -73,6 +73,14 @@ width: 100%; } + // This element can be placed on a `button` node which usually has some user agent styles. + // Reset the font so that the typography from the root element can propagate down. + .mdc-evolution-chip__action--primary { + font: inherit; + letter-spacing: inherit; + white-space: inherit; + } + // MDC sizes and positions this element using `width`, `height` and `padding`. // This usually works, but it's common for apps to add `box-sizing: border-box` // to all elements on the page which can cause the graphic to be clipped.