fix LitElement and replace paper-button with mwc-button

[iantrich]

• hui-error-entity-row has been removed from core
• paper-button has been removed from core

Should just be a one-to-one swap for their replacements

This becomes true in 0.88

[kuuji]

Was about to ask if it's backward compatible and then I saw your last commit. Thanks a lot for that @iantrich

[iantrich]

hold off on merging. I actually haven't had time to test and some in beta say it doesn't work completely :)

[DavidFW1960]

The formatting is the problem... see the thread on the Home Assistant forum. I had already tried a 1:1 replacement of the paper-button and it didn't really help.

[DavidFW1960]

This is using Ian's changed file

[ammmze]

So ... I see the note in the release notes about replacing paper-button with mwc-button, but in my instance paper-button is still valid. We sure its removed from core? 🤷‍♂️ I've got a modified version still using paper-button that is working in my 0.88 instance here. Unfortunately the mwc-button looks to have a fixed height in my testing and per this open issue.

[bbbenji]

@ammmze it's probably just your cache.

[MatteGary]

I tried this file version in my HA installation with 0.88 but the buttons look as in the image above, with the wrong size

[DavidFW1960]

@ammmze it's probably just your cache.

It's not the cache.

[iantrich]

@DavidFW1960 he's referring to paper-button still working

[ammmze]

Is there a server side cache that may be holding onto the paper-button? Because it's definitely not client side holding onto it. I've cleared browser cache and using different browsers. I'd never pulled up home assistant in firefox until this update came in and i started testing my changes on it. @iantrich I assume you can confirm that paper-button is NOT loading on your instance?

[DavidFW1960]

It isn't loading for sure in Ian's - he has replaced all instances of paper with mwc

[iantrich]

I should have some time tonight to look into styling

[ammmze]

Okay...I confirmed paper-button doesn't exist. I had assumed it would error out if it didn't exist. But instead it just renders which explains why I was needing additional styles.

[ammmze]

Unfortunately using mwc-button, I don't see a way to remove the fixed 36px height. Looks chrome no longer allows for shadow piercing selectors. https://developers.google.com/web/updates/2017/10/remove-shadow-piercing

[ammmze]

Sorry for the spam...but I figured out how we can get around it...

((ButtonBase) => {
  customElements.define(
    'button-card-button',
    class extends ButtonBase {
      static get styles() {
        return css`
          ${ButtonBase.styles}
          .mdc-button {
            height: auto;
            padding: 8px;
            color: inherit !important;
          }
        `
      }
    },
  );
})(customElements.get('mwc-button') || customElements.get('paper-button'))

Basically just create our own button-card-button that extends either mwc-button or paper-button

I've updated my copy here

[iantrich]

Good approach. Applying it back to this repo? @kuuji will no doubt merge it after some testing of his own.

[DavidFW1960]

Awesome work guys! I can’t test this till tomorrow but sounds promising. Thanks.

[ammmze]

FYI ... i've officially opened PR #63 with my changes

[iantrich]

I’ll check it out later tonight, hopefully

[DavidFW1960]

Ok so on my mobile... iOS...
Gaaaa can’t paste it now.... but icon/text is small

[DavidFW1960]

Actually... it’s pretty goo.... only slightly smaller than an adjacent entity-button..... much better than before... Awesome work..

[dustins1983]

I only use 2 buttons for this card but with this fix I can verify my 2 buttons look exactly the same as it did before. Thanks!!

[MatteGary]

I tried on my installation, seems to work fine. I've several button on different views.

[iantrich]

This is not