feat(menu): add --mdc-shape-medium to menu-surface

fixes #950

PiperOrigin-RevId: 298659025

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Added `RippleHandlers` to `mwc-ripple` to provide an easy integration point for calling ripple API.
 - Added `light` property to `mwc-ripple` to help style ripples on dark surfaces.
 - `mwc-select` can now select items by setting `mwc-select.value`.
+- Exposed --mdc-shape-medium on mwc-menu-surface
 
 ### Changed
 

packages/menu/README.md

@@ -289,6 +289,7 @@ propagate through `mwc-menu`.
 
 | Name                     | Default | Description
 | ------------------------ | ------- |------------
+| `--mdc-shape-medium`     | `4px`   | Border radius of the dropdown.
 | `--mdc-menu-item-height` | `48px`  | Height of single-line list-items in the menu.
 | `--mdc-menu-min-width`   | `auto`  | Menu min-width.
 | `--mdc-menu-max-width`   | `auto`  | Menu max-width.

packages/menu/src/mwc-menu-surface.scss

@@ -14,7 +14,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-@import "@material/menu-surface/mdc-menu-surface.scss";
+@use '@material/menu-surface/mixins';
+@use '@material/shape/variables' as shape-variables;
+
+@include mixins.core-styles;
 
 :host(:not([open])) {
   display: none;
@@ -23,3 +26,7 @@ limitations under the License.
 .fullwidth {
   width: 100%;
 }
+
+.mdc-menu-surface {
+  border-radius: var(--mdc-shape-medium, #{shape-variables.$medium-component-radius});
+}