diff --git a/src/material/menu/menu-item.html b/src/material/menu/menu-item.html index 286f9ac116c8..0fa5933c47c4 100644 --- a/src/material/menu/menu-item.html +++ b/src/material/menu/menu-item.html @@ -1,5 +1,5 @@ - +
diff --git a/src/material/menu/menu-item.ts b/src/material/menu/menu-item.ts index 4a4841a29f1a..29a622045cc1 100644 --- a/src/material/menu/menu-item.ts +++ b/src/material/menu/menu-item.ts @@ -42,7 +42,7 @@ const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {})); inputs: ['disabled', 'disableRipple'], host: { '[attr.role]': 'role', - 'class': 'mat-mdc-menu-item mat-mdc-focus-indicator mdc-list-item', + 'class': 'mat-mdc-menu-item mat-mdc-focus-indicator', '[class.mat-mdc-menu-item-highlighted]': '_highlighted', '[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu', '[attr.tabindex]': '_getTabIndex()', diff --git a/src/material/menu/menu.html b/src/material/menu/menu.html index d6efbda57cf8..7f234a34de7e 100644 --- a/src/material/menu/menu.html +++ b/src/material/menu/menu.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index 124fa61ba9ab..5a6e2da18395 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -18,8 +18,10 @@ mat-menu { @include mdc-list-mixins.list-base($query: structure); &, - .mat-mdc-menu-item .mdc-list-item__primary-text { + .mat-mdc-menu-item .mat-mdc-menu-item-text { @include mdc-typography.smooth-font(); + white-space: normal; + @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { @include token-utils.create-token-slot(font-family, item-label-text-font); @include token-utils.create-token-slot(line-height, item-label-text-line-height); @@ -32,7 +34,8 @@ mat-menu { .mat-mdc-menu-panel { @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-unthemable-tokens()); + tokens-mat-menu.get-unthemable-tokens()); + @include menu-common.base; box-sizing: border-box; outline: 0; @@ -63,20 +66,6 @@ mat-menu { } } -// We need to increase the specificity for these styles to ensure we are not overridden by MDC's -// .mdc-menu-surface styles. This can happen if the MDC styles are loaded in after our styles. -.mat-mdc-menu-panel.mat-mdc-menu-panel { - // Include Material's base menu panel styling which contain the `min-width`, `max-width` and some - // styling to make scrolling smoother. MDC doesn't include the `min-width` and `max-width`, even - // though they're explicitly defined in spec. - @include menu-common.base; - - // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`. - // Furthermore, the relative position ensures that the `offsetParent` is the menu, rather than - // the overlay. This comes into play when we measure the `offsetTop` of a menu item. - position: relative; -} - .mat-mdc-menu-item { @include mdc-helpers.disable-mdc-fallback-declarations { @include mdc-list-mixins.item-base; @@ -96,6 +85,7 @@ mat-menu { background: none; text-decoration: none; margin: 0; // Resolves an issue where buttons have an extra 2px margin on Safari. + align-items: center; // Set the `min-height` here ourselves, instead of going through // the `mdc-list-one-line-item-density` mixin, because it sets a `height` @@ -117,13 +107,6 @@ mat-menu { } } - // If the MDC list is loaded after the menu, this gets overwritten which breaks the text - // alignment. Ideally we'd wrap all the MDC mixins above with this selector, but the increased - // specificity breaks some internal overrides. - &.mdc-list-item { - align-items: center; - } - &[disabled] { cursor: default; @@ -159,12 +142,6 @@ mat-menu { } } - // Needs to be overwritten explicitly, because the style can - // leak in from the list and cause the text to truncate. - .mdc-list-item__primary-text { - white-space: normal; - } - &.mat-mdc-menu-item-submenu-trigger { @include menu-common.item-submenu-trigger(mdc-list-variables.$side-padding); }