From be3fd32a099d68a9414181fd3fc687e08974590e Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Fri, 14 Apr 2023 09:49:18 -0700
Subject: [PATCH] feat(menu): Introduce mixins and base style for menu
 selection group title

PiperOrigin-RevId: 524315087
---
 packages/mdc-menu/_menu.scss   | 46 ++++++++++++++++++++++++++++++++++
 packages/mdc-menu/_mixins.scss |  2 +-
 packages/mdc-menu/package.json |  1 +
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/mdc-menu/_menu.scss b/packages/mdc-menu/_menu.scss
index dceb37d62a9..f98f9e64dc2 100644
--- a/packages/mdc-menu/_menu.scss
+++ b/packages/mdc-menu/_menu.scss
@@ -35,6 +35,7 @@
 @use '@material/theme/theme';
 @use '@material/theme/custom-properties';
 @use './menu-custom-properties';
+@use '@material/typography/typography';
 @use './variables';
 
 /// @deprecated Use static-styles() instead.
@@ -139,6 +140,17 @@
   }
   // postcss-bem-linter: end
 
+  .mdc-menu__selection-group-title {
+    @include feature-targeting.targets($feat-structure) {
+      align-items: center;
+      display: flex;
+    }
+  }
+
+  .mdc-menu__selection-group-title-text {
+    @include typography.overflow-ellipsis($query);
+  }
+
   .mdc-menu-item--selected .mdc-menu__selection-group-icon {
     @include feature-targeting.targets($feat-structure) {
       display: inline;
@@ -192,3 +204,37 @@
     @include theme.property(min-width, $min-width-custom-property);
   }
 }
+
+@mixin selection-group-title-spacing(
+  $leading,
+  $trailing: $leading,
+  $query: feature-targeting.all()
+) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  @include feature-targeting.targets($feat-structure) {
+    .mdc-menu__selection-group-title {
+      @include rtl.reflexive-property(margin, $leading, $trailing);
+    }
+  }
+}
+
+@mixin selection-group-title-height($height, $query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  @include feature-targeting.targets($feat-structure) {
+    .mdc-menu__selection-group-title {
+      @include theme.property(height, $height);
+    }
+  }
+}
+
+@mixin selection-group-title-color($color, $query: feature-targeting.all()) {
+  $feat-color: feature-targeting.create-target($query, color);
+
+  .mdc-menu__selection-group-title {
+    @include feature-targeting.targets($feat-color) {
+      @include theme.property(color, $color);
+    }
+  }
+}
diff --git a/packages/mdc-menu/_mixins.scss b/packages/mdc-menu/_mixins.scss
index 919b9c496d0..9d196ac5481 100644
--- a/packages/mdc-menu/_mixins.scss
+++ b/packages/mdc-menu/_mixins.scss
@@ -21,4 +21,4 @@
 //
 
 /// @deprecated Import '_menu.scss' instead.
-@forward './menu' show core-styles, open-item-opacity, width, min-width;
+@forward './menu' hide static-styles;
diff --git a/packages/mdc-menu/package.json b/packages/mdc-menu/package.json
index 1e96818a356..530d2291f09 100644
--- a/packages/mdc-menu/package.json
+++ b/packages/mdc-menu/package.json
@@ -28,6 +28,7 @@
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
     "@material/tokens": "^14.0.0",
+    "@material/typography": "^14.0.0",
     "tslib": "^2.1.0"
   }
 }