From d5ecca4e89abc71c50ddcdedda7e5780e2f54fdd Mon Sep 17 00:00:00 2001 From: Elliott Marquez Date: Tue, 3 Mar 2020 12:00:32 -0800 Subject: [PATCH] feat(menu): add --mdc-shape-medium to menu-surface fixes #950 PiperOrigin-RevId: 298659025 --- CHANGELOG.md | 1 + packages/menu/README.md | 1 + packages/menu/src/mwc-menu-surface.scss | 9 ++++++++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 912a59a4f..133aa5942 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/menu/README.md b/packages/menu/README.md index afe3fd38f..5db70527c 100644 --- a/packages/menu/README.md +++ b/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. diff --git a/packages/menu/src/mwc-menu-surface.scss b/packages/menu/src/mwc-menu-surface.scss index b1595f224..01cdcdfd3 100644 --- a/packages/menu/src/mwc-menu-surface.scss +++ b/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}); +}