Dashboard chapter 2: Let’s redesign the cards together!

[piitaya (Paul)]

The reason why we doesn’t keep the old design is because it’s confusing to have 2 badges with same features and different design. It’s not possible to duplicate all elements every time we want to improve something.
Also we can not maintain an old design forever as it will heavily slow down the front-end development. We also did user researches and also almost nobody used the badge and most of them preferred to use Mushroom chips as mentioned in the blog post.

However, with the 2024.8 release, custom badges are supported (Custom badge | Home Assistant Developer Docs) so I’m pretty sure someone will provide the a custom badge with the old design (with even more feature than today).

[parautenbach (Pieter Rautenbach)]

@makai

Badges have already been changed in current dev release (beta release tomorrow). Documentation for badges in the next major release is currently here: Badges - Home Assistant
It’s currently marked as a breaking change because it replaces the current design.

Then I wonder what the purpose of this topic is: decision taken, so the feedback seems futile.

@piitaya

The reason why we doesn’t keep the old design is because it’s confusing to have 2 badges with same features and different design.

I think one could’ve considered keeping it around temporarily.

@piitaya

Also we can not maintain an old design forever as it will heavily slow down the front-end development.

Of course not. I’m in favour of improvements, as stated here:

@parautenbach

Just a note: I think badges need a revamp. The team just need to be sure they consider what was good about the existing badges and how it’s been used.

This strategy wasn’t followed with other UI changes though. New elements were introduced.

@piitaya

However, with the 2024.8 release, custom badges are supported (Custom badge | Home Assistant Developer Docs) so I’m pretty sure someone will provide the a custom badge with the old design (with even more feature than today).

That’s fair. I think this could’ve been another mitigation strategy followed by the team: release the old cards as part of this release.

[Mariusthvdb (Marius)]

@piitaya

t’s confusing to have 2 badges with same features and different design

even if (and I do) I would agree on most of what you’re saying there, the most confusing part will be the incorporation of the new badge as ‘badge’…

I mean, even people that didn’t use old style badges know the new badges as ‘chips’. They have been around for so long as custom card… so why not simply call them that, and let the badges be what they were, even stop supporting them in core if must be.

with the now chosen strategy, it’s like we introduce a new type of bicycle, which we all know as custom skateboard. But, because we cant have 2 identical names, we stop supporting old style bicycle, so we can start calling our existing custom skateboards the new core bicycle…

But, you can reintroduce them as custom bicycle

Of course this is a jest, but with a serious and supportive undertone

[Mariusthvdb (Marius)]

Separate post, as the main focus on Dashboard seems to be as mentioned in the title: redesign cards

I seriously hope, that does not mean some of the other Dashboard aspects wont get some extra love anymore.

Let me just ask this: will we be seeing the new visibility: option we have for cards now also become available for entities, or rows to be more precise?

It would be so helpful for creating those entities cards with identical conditions on their rows.
Yes, we can still use the conditional row, but, after having migrated all conditional cards to use visibility: where possible, that only makes me hunger for the same on entities / rows even more

[123 (Taras)]

As a long-time user of badges, I like all the flexibility the new badges will have with the exception of the fact they will be significantly wider.

I use badges because they’re narrow and several can be placed on a single line that easily fits within the bounds of a phone’s screen (without wrapping).

The new badges don’t appear to offer the ability to strip them down to a narrow format (certainly not as narrow as existing badges). It seems like the icon is mandatory and text can only appear beside the value.

It would be appreciated if the new badge’s options offered a means of replicating an old badge’s compactness (with no or minimal loss of information).

[Mariusthvdb (Marius)]

since I have no hopes this design choice will be reverted (and probably cant expect the new design to mimic the old) I guess we could make an effort displaying that identical info, in an even better way using a custom:button-card.

You could easily setup a grid of lets say 8 and have them show that info, and what’s more, template anything you see, from state, name, unit, to action and color etc etc

you would need the custom card , not sure if you’re open to that?
a very quick mockup:

and

    - type: grid
      columns: 8
      cards:
        - <<: &test
            type: custom:button-card
            entity: sensor.voorkamer_temperatuur
            template: round_button
            show_state: true
            show_icon: false
            show_name: false
            show_label: true
            label: Voor
            styles:
              card:
                - font-size: 14px
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test

is all that it takes

and it would be even more compact if we ditch the round, and set grid to non square:

    - type: grid
      columns: 8
      square: false
      cards:
        - <<: &test
            type: custom:button-card
            entity: sensor.voorkamer_temperatuur
            ?template: round_button
            show_state: true
            show_icon: false
            show_name: false
            show_label: true
            label: Voor
            styles:
              card:
                - font-size: 14px
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test

ofc, still ugly and would need some better styling, but we got to admit the current badge isnt that easy to style either…

[madelena]

@Mariusthvdb You can build custom badges to match the old design. It is documented in the blog post.

[Meelobee (Martijn)]

The new Badges should really be named Pills, suits much better and allows for the old Badges to still be available for those who favor them.

Also please make the new ‘Pills’ usable everywhere on the dash and not only in the header. Would be nice to be able to include these in/on other cards or make them dividing ‘rows’ between other cards.

[madelena]

@Meelobee They will be available in section headers.

While badges won’t be available in the default UI as cards, there’s nothing to stop a card developer to create a card that looks like that.

[madelena]

@123 The new badges are much shorter, so it will occupy about the same amount of space, if not less.

[madelena]

@parautenbach

The team just need to be sure they consider what was good about the existing badges and how it’s been used.

Yes, we did. You can watch the live stream about it. We went through 100+ case studies to observe how it’s been used.

Then I wonder what the purpose of this topic is: decision taken, so the feedback seems futile.

This topic is about recruiting card designers and developers.

I think this could’ve been another mitigation strategy followed by the team: release the old cards as part of this release.

It’s part of the plan. That’s why there’s the ability to create custom badges.

[Mariusthvdb (Marius)]

@madelena

It is documented in the blog post.

Must have completely missed that… will reread and hope to find how we can do that

Thx!

If this is what you mean Custom badge | Home Assistant Developer Docs that isn’t exactly what we’re looking for I fear.

At least not the average badge user like I am…

[majorsl (Steve Major)]

I’m either the only one or a lot of people have this issue with the grid: I have a lot of dashboard items that are an odd number of items across when using mushroom. I’m kinda forced into 2x2 for these situations. I hate how it can’t deal with resizing 3 items. I get it: grid. I don’t think that can be solved.

[123 (Taras)]

@madelena

much shorter

“Shorter” as in not as tall or not as wide?

The width of the new badges that appears to be at least twice as wide as the old ones (because the icon seems to be mandatory according to the beta docs) and even wider if a title is included (because it appears beside the value).

I will tinker with it this weekend and see what I can do.

[123 (Taras)]

I appreciate the suggestion and the detailed example.

I think we can agree that using that particular custom card requires at least three times the work just to get half the appearance.

I’ll see what I can do with the new badges.

[madelena]

The name of the badge appears above the state of the badge. It will only get wider if you want to show attributes next to the state.

[stefan1982 (Stefan)]

@madelena Tip: Screenshots says more than a 1000 words…

But from my opinion: I’m happy to see that decisions are made and HA is moving forward. I would love to see the old version of the “redesigned” cards move to HACS rather than being in core.
HA core should provide all the functionality and flexibility which is needed to make your own cards, override the existing cards in design/style and perhaps structure.

Without having the guts to break things (although it should be documented properly, and moved to HACS) HA core card-design and user experience will not be better in the future.
Personally, I hate it that I have to rely on 3rd party cards provided by HACS… But perhaps that was a design decision made in the past. Although, I think that the tile-card could be the Swiss army knife of cards, when all features are available to use, and - perhaps more importantly - the presentation (design => CSS) and structure (HTML/JS) of any card could easily be overridden and adjusted without the need of 3rd party integrations like mod_card, or anything else. This should be basic functionality provided in core, where the UI needs to make a place to be able to change things directly…

[Mariusthvdb (Marius)]

@stefan1982

Screenshots says more than a 1000 words

which is today!

not sure if the above would be called badges, chips or pills, but lets all join #beta on Discord today and experiment with the new feature.

Join the Home Assistant Discord Server!

[teskanoo]

Mariusthvdb’s right - beta has started - spoilers being dropped - come on over and join the fun

[nickrout]

It’s been 31 July for 19 hours now, and no beta. Comes of being 12 hours ahead of UTC I guess…