Revert Button row to previous design - Discussion

[Masterz69]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

^^ it looks now totally awful & terrible ... it totally not in line with existing design.

Is it possible to have a switch to use legacy/previous design, not this one ?

Describe the behavior you expected

Same look as in 2021.11.4, as documented:

Steps to reproduce the issue

no steps. just existing lovelace.

What version of Home Assistant Core has the issue?

core-2021.12.10

What was the last working version of Home Assistant Core?

core-2021.11.4

In which browser are you experiencing the issue with?

Chrome 97.0.4692.71

Which operating system are you using to run this browser?

Windows 10

State of relevant entities

No response

Problem-relevant frontend configuration

cards:
      - type: vertical-stack
        cards:
          - type: entities
            show_header_toggle: false
            state_color: true
            entities:

              - type: buttons
                entities:
                  - entity: alarm_control_panel.shed

...

Javascript errors shown in your browser console/inspector

No response

Additional information

As well nothing in https://www.home-assistant.io/blog/2021/12/11/release-202112/#release-2021121---december-12 mentioned about changes in entities lovelace card. Can't find any relevant info.

[Masterz69]

Found this one: #10770
IMHO this is a BAD idea to change entities buttons row design so dramatically.
Asking to revert to previous entities card buttons row design, as on 2021.11.4.

[MrLuit]

+1 on this issue, I have a configuration similar to this:

  - type: entities
    entities:
      - type: buttons
        entities:
          - entity: light.A
          - entity: light.B
          - entity: light.C

Expected behaviour (pre-updating):

Actual behaviour (post-updating):

While I can understand the change of putting icons in a chip component, the horizontal container should probably still have the same flex properties, which it does not. The justify-content: space-evenly; was removed here. By adding this property to the .ha-scrollbar div manually using DevTools, the spacing is fixed.

The layout is still different, so I'm a bit confused as to why #10770 is marked as Code quality improvements to existing code or addition of tests, instead of Breaking change (fix/feature causing existing functionality to break). I do not believe the author of this PR did this with malicious intent, but it might explain why this change wasn't documented properly.

[bramkragten]

It doesn't break anything, it changes something visually. No functionality was removed or changed.

[MrLuit]

Maybe I should have worded this a bit differently. The change(s) affected my user experience unexpectedly, and in my opinion, "Code quality improvements to existing code or addition of tests" implies that the new code will behave in the same way as it did before, while this change added new behaviour (specifically, style changes), and thus does not behave the same.

Actually, this change removed functionality since it does not allow me to space elements in the same way as before.

I'm absolutely not trying to be annoying about some label that was used on a PR, hopefully you understand that I'm just giving my 2 cents on the matter. I love this project and I'm thankful for everyone who contributes to it.

[bramkragten]

Maybe space-evenly can be added back

[bramkragten]

I see this decision was made after discussion with the team, I will leave this for our UX designer @matthiasdebaat

[matthiasdebaat]

The previous "ghost" style button is from a design perspective not very accessible. We fixed that by changing it to a chip, that is in line with material design and our interface. Seeing the example above I can understand why some don't like the change to a chip or the alignment. Still, I think our current standard is best for the average user. Maybe add an alignment option?

[Misiu]

To anyone interested in this change take a look at this PR: #11709 and add thumb up on this.
@matthiasdebaat has a good suggestion - add an option so the end-user can pick the alignment (simple justify: false | true). This way we're all happy.