refactor(material/menu): simplify structural styles (#29267)

Simplifies the menu structural styles to make them more maintainable.
angular · Jun 17, 2024 · a62a7ce · a62a7ce
1 parent f615161
commit a62a7ce
Showing 1 changed file with 44 additions and 35 deletions.
diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss
@@ -1,25 +1,23 @@
-@use 'sass:map';
 @use '@angular/cdk';
-@use '@material/list/evolution-mixins' as mdc-list-mixins;
-@use '@material/list/evolution-variables' as mdc-list-variables;
-@use '@material/typography/typography' as mdc-typography;
 @use '../core/tokens/m2/mat/menu' as tokens-mat-menu;
 @use '../core/tokens/token-utils';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/menu-common';
 @use '../core/style/button-common';
+@use '../core/style/vendor-prefixes';
 
 // Prevent rendering mat-menu as it can affect the flex layout.
 mat-menu {
   display: none;
 }
 
 .mat-mdc-menu-content {
-  @include mdc-list-mixins.list-base($query: structure);
+  margin: 0;
+  padding: 8px 0;
+  outline: 0;
 
   &,
   .mat-mdc-menu-item .mat-mdc-menu-item-text {
-    @include mdc-typography.smooth-font();
+    @include vendor-prefixes.smooth-font();
     flex: 1;
     white-space: normal;
 
@@ -78,23 +76,38 @@ mat-menu {
 }
 
 .mat-mdc-menu-item {
-  @include mdc-helpers.disable-mdc-fallback-declarations {
-    @include mdc-list-mixins.item-base;
-    @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
-      @include mdc-list-mixins.item-spacing(
-        var(#{token-utils.get-token-variable(item-leading-spacing)}),
-        var(#{token-utils.get-token-variable(item-trailing-spacing)}),
-        $query: mdc-helpers.$mdc-base-styles-query
-      );
-
-      // stylelint-disable-next-line selector-class-pattern
-      &:has(.material-icons, mat-icon, [matButtonIcon]) {
-        @include mdc-list-mixins.item-spacing(
-          var(#{token-utils.get-token-variable(item-with-icon-leading-spacing)}),
-          var(#{token-utils.get-token-variable(item-with-icon-trailing-spacing)}),
-          $query: mdc-helpers.$mdc-base-styles-query
-        );
-      }
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+  padding: 0;
+
+  @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
+    $icons-selector: '.material-icons, mat-icon, [matButtonIcon]';
+    $leading-padding: var(#{token-utils.get-token-variable(item-leading-spacing)});
+    $trailing-padding: var(#{token-utils.get-token-variable(item-trailing-spacing)});
+    $with-icon-leading-padding:
+      var(#{token-utils.get-token-variable(item-with-icon-leading-spacing)});
+    $with-icon-trailing-padding:
+      var(#{token-utils.get-token-variable(item-with-icon-trailing-spacing)});
+
+    padding-left: $leading-padding;
+    padding-right: $trailing-padding;
+
+    [dir='rtl'] & {
+      padding-right: $leading-padding;
+      padding-left: $trailing-padding;
+    }
+
+    &:has(#{$icons-selector}) {
+      padding-left: $with-icon-leading-padding;
+      padding-right: $with-icon-trailing-padding;
+    }
+
+    [dir='rtl'] &:has(#{$icons-selector}) {
+      padding-right: $with-icon-leading-padding;
+      padding-left: $with-icon-trailing-padding;
     }
   }
 
@@ -110,13 +123,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`
-  // which doesn't work well with multi-line items.
-  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
-  min-height: map.get($height-config, default);
+  min-height: 48px;
 
   @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
     // The class selector isn't specific enough to overide the link pseudo selectors so we need
@@ -134,10 +141,7 @@ mat-menu {
 
   &[disabled] {
     cursor: default;
-
-    // This is the same as `mdc-list-mixins.list-disabled-opacity` which
-    // we can't use directly, because it comes with some selectors.
-    opacity: mdc-list-variables.$content-disabled-opacity;
+    opacity: 0.38;
 
     // The browser prevents clicks on disabled buttons from propagating which prevents the menu
     // from closing, but clicks on child nodes still propagate which is inconsistent (see #16694).
@@ -154,6 +158,11 @@ mat-menu {
     }
   }
 
+  // Inherited from MDC and necessary for some internal tests.
+  &:focus {
+    outline: 0;
+  }
+
   .mat-icon {
     flex-shrink: 0;
     @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {