When trying to use mwc-button within a pwa-starter kit view, the mwc-button in view lit-element renders incorrectly over the app-drawer (polymer) when the draw is opened instead of being under the draw and hidden from view.
By contract mwc-icon renders correctly and appears covered by the drawer when it's opened.
Steps to reproduce
git clone --depth 1 -b template-no-redux --single-branch https://github.com/Polymer/pwa-starter-kit test-mwc-button
cd test-mwc-button
npm install
npm install --save @material/mwc-button
edit ./src/components/my-view1.js
add:
import {Button} from "@material/mwc-button" after (import { PageViewElement } from './page-view-element.js';)
add:
after
Welcome
save
force the draw:
edit my-app.js
remove the @media section to disable wide layout
save
Try:
point the browser to http://localhost:4440
click the menu icon
You see the button Test appears rendered above the drawer
Similarly I added mwc-icon but this renders correctly (hidden by the drawer when opened).
When trying to use mwc-button within a pwa-starter kit view, the mwc-button in view lit-element renders incorrectly over the app-drawer (polymer) when the draw is opened instead of being under the draw and hidden from view. By contract mwc-icon renders correctly and appears covered by the drawer when it's opened.
Steps to reproduce git clone --depth 1 -b template-no-redux --single-branch https://github.com/Polymer/pwa-starter-kit test-mwc-button cd test-mwc-button npm install npm install --save @material/mwc-button
edit ./src/components/my-view1.js add: import {Button} from "@material/mwc-button" after (import { PageViewElement } from './page-view-element.js';) add: after
Welcome
save force the draw: edit my-app.js remove the @media section to disable wide layout save
Try: point the browser to http://localhost:4440 click the menu icon You see the button Test appears rendered above the drawer
Similarly I added mwc-icon but this renders correctly (hidden by the drawer when opened).
Component versions:
+-- @material/mwc-button@0.6.0 +-- @material/mwc-icon@0.6.0 +-- @polymer/app-layout@3.0.2 +-- @polymer/polymer@3.2.0 +-- @polymer/test-fixture@4.0.2 +-- @webcomponents/webcomponentsjs@2.2.7 +-- axe-core@3.2.2 +-- chai@4.2.0 +-- del@3.0.0 +-- gulp@4.0.0 +-- gulp-rename@1.4.0 +-- gulp-replace@1.0.0 +-- lit-element@2.1.0 +-- mocha@5.2.0 +-- pixelmatch@4.0.2 +-- polymer-cli@1.9.7 +-- polyserve@0.27.15 +-- prpl-server@1.4.0 +-- puppeteer@1.13.0 +-- pwa-helpers@0.9.1 `-- wct-mocha@1.0.0