From d0cd9bb3ec1552c67797d0b063db7732d211a815 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 4 May 2023 09:16:15 +0200 Subject: [PATCH] fix(material/select): ensure arrow is centered on all densities (#27011) On lower densities some form field appearances hide the label which caused the arrow to be misaligned. These changes add an override to center the label again. Fixes #26757. --- src/material/select/_select-theme.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index 883af90864aa..6b48de1b6d73 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -2,6 +2,8 @@ @use '@material/menu-surface' as mdc-menu-surface; @use '@material/list/evolution-mixins' as mdc-list; @use '@material/typography' as mdc-typography; +@use '@material/density' as mdc-density; +@use '@material/textfield' as mdc-textfield; @use '../core/theming/theming'; @use '../core/typography/typography'; @@ -79,7 +81,24 @@ } } -@mixin density($config-or-theme) {} +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); + + // Density is clamped at -5 here, because MDC's form field throws an error for anything lower. + $form-field-height: mdc-density.prop-value( + $density-config: mdc-textfield.$density-config, + $density-scale: theming.clamp-density($density-scale, -5), + $property-name: height, + ); + + // On lower densities the filled form field hides its label which causes the label to + // be misaligned. Remove the additional offset that was added because of the label. + @if ($form-field-height < mdc-textfield.$minimum-height-for-filled-label) { + .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper { + transform: none; + } + } +} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config);