updating to support HA 0.88

[ammmze]

Went through a few iterations discussed in #57 and #60. The gist of the changes are...

1. get LitElement from home-assistant-main instead of hui-error-entity-row
2. create an additional custom element named button-card-button which will be based on mwc-button if available, otherwise fallback to paper-button
3. override a couple of the mwc-button's styles to allow for variable height and font color inheriting
4. moved the styles to come from a static method, so they are no longer duplicated
5. wrap everything in a closure to prevent polluting the window and avoid conflicts with window

The result looks like this...

[ammmze]

@ohadbenita you mentioned over here (just wanted to bring that conversation into the PR where we are addressing the home assistant 0.88.0 issues) that the styles are not being respected. Can you share what styles you are using that are no longer respected? Home assistant changed the underlying button we use and its styles are a bit more fixed. For example, the color and height were fixed and we had to specifically override them. I don't currently have any custom styles on my instances and not sure what custom styles everyone else is using. But based on the README, i guess it's safe to assume at least font-size and font-weight are common-ish ones

[ammmze]

@ohadbenita I've just pushed an update that should allow the custom styles to work. Try it out and let us know how it works. I'll check in later...time for my day job :)

[kuuji]

That looks awesome @ammmze ! Thanks a lot.

Gonna try to look at this asap.

[ohadbenita]

I use exactly these mentioned in the readme- font-weight and font-size. Also tried font-family with no luck

On Fri, 22 Feb 2019 at 16:45 Branden ***@***.***> wrote: @ohadbenita <https://github.com/ohadbenita> you mentioned over here <#64 (comment)> that the styles are not being respected. Can you share what styles you are using that are no longer respected? Home assistant changed the underlying button we use and its styles are a bit more fixed. For example, the color and height were fixed and we had to specifically override them. I don't currently have any custom styles on my instances and not sure what custom styles everyone else is using. But based on the README, i guess it's safe to assume at least font-size and font-weight are common-ish ones — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AdL_voGL64fv80--DIy6DSiLLlH6HIMKks5vQAJrgaJpZM4bIwa8> .

-- אוהד בניטה נייד - 0508246047 \__/ # ## `( `^=_ p _###_ c / ) | / _____- //^---~ _c 3 / ----^\ /^_\ / --,- ( | | O_| \\_/ ,/ | | | / \| `-- / (((G |-----| //-----\\ // \\ / | | ^| | | | | |____| |____| /______) (_____\

[jimz011]

Hi, I’m not really great with merging code but I still wanted to ask this question.

Would it be possible to merge this with lopton’s code? His code is a fork of this project and I unfortunately rely on it.

Thanks for this fix though, my wife was getting crazy already that her buttons no longer worked :P.

Edit: link to repository/code here:
https://github.com/Lopton/button-card

[DavidFW1960]

So I am finding the button is smaller than previousle on mobile as well as on my desktop.

The 2 buttons on the left are the core button-card and the exit-enter one is this custom-button-card...

[DavidFW1960]

Loaded the new one... and now it's bigger lol

[iantrich]

@DavidFW1960 if it's something small like that, I say we proceed with merging this and worry about small tweaks later so we can get everyone back up and running. I'll do some more testing tonight along with @kuuji

[DavidFW1960]

Yeah I agree Ian.... Great job here by all..

[DavidFW1960]

OK I changed the padding on line 41 to 4% instead of 8px and it is perfect on my ipad and chrome pc and my iPhone!!!

So I recommend changing to 4%

[peterhoe]

@DavidFW1960 how are you getting the font to display below your button in upper and lower case? Using css style?
I seem to get all upper case in a system style font below my buttons (and on some of my system generated buttons as well eg: check configuration button). Perhaps I haven't pulled the latest iteration?

[DavidFW1960]

Like I said they are the core button-card for those 2 on the left.

[peterhoe]

@DavidFW1960 - doh, yep you're getting the same uppercase font as well, sorry my bad -
out of interest, is your check config button under configuration validation and links under configuration loading also displaying the same font style?

[iantrich]

I'm going to go ahead and merge/release this and we can do cleanup later.

[ammmze]

Phew ... got that change in just in time :)

[iantrich]

I was waiting for it :)

We should cleanup the text to match the core buttons look/feel

[peterhoe]

@iantrich Thanks.
text-transform: none; fixed the upper lowercase text displayed
however, it still appears to be 'bold' when compared to hass lovelace generated

[iantrich]

@peterhoe I don't care for this release. Not going for perfection, just up and running

[ammmze]

It is slightly bolded. The mwc-button applies a font-weight: 500 which is just a tad bolder than normal which is 400. Also is it the font different from the core entity button? I don't currently have an entity button setup (still fairly new to home assistant)

[DavidFW1960]

style:
  - font-weight: 400

Cant make the bottom of the button align with the normal button though.... nothing I try helps..

[peterhoe]

Same font as mwc-button, for example used on the Configuration / Configuration validation pane.
This change to move everything to mwc-button was as per design with V88

https://github.com/home-assistant/home-assistant-polymer/pull/2744

[peterhoe]

This got me back close enough to what i had before

style:
- text-transform: none
- font-weight: 400
- font-size: 12px