Add todo-list card

[lscheibel]

Description

I've added a new mushroom card as an alternative to the default shopping_list card offered by HA. It uses the common icon + title + state layout and displays its contents below. For the input I adopted the entity-control style even though the shopping-list is not really an entity I thought it looked quite nice. The editor allows to change common attributes like the name and layout but also what icons to use for the checked and unchecked state of items. This allows for some very minimal lists when used together with other themes.

(the misaligned checkboxes are a bug in webkit & blink and only appear in this preview.)

Related Issue

#734

Motivation and Context

This PR provides a visually pleasing card for the shopping_list integration.

How Has This Been Tested

All features which are implemented have been tested in Chrome, Safari and Firefox on a Mac machine.

Types of changes

• 🐛 Bug fix (non-breaking change which fixes an issue)
• 🚀 New feature (non-breaking change which adds functionality)
• 🌎 Translation (addition or update a translation)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have tested the change locally.

[piitaya]

Nice 🙂 I just left few comments

[lscheibel]

Thanks for taking the time! FYI I also added a link to the shopping list docs in the README.md

[CallMeAreks]

@piitaya

[lscheibel]

Rebased and resolved merge conflicts.

[alessandroias]

@piitaya Can you share you thought on this?

[netsoft-ruidias]

@lscheibel by any chance, can you create your own card with this look and feel?
Even if it has a dependency on Mushroom?

This proposal of yours is a huge improvement over the standard version and looks like it will never see the light of day.

It would be a shame to lose your work, congratulations on the initiative 👌.

cc; @piitaya @alessandroias @CallMeAreks

[lscheibel]

@netsoft-ruidias Thanks for the kind words! Unfortunately, I won't get around to working on this for at least another month, but I should try it by then :)

[DannyFeliz]

I think this PR is more relevant than ever since in HA 2023.11 they added a lot of stuff related to todo lists.

[lscheibel]

@DannyFeliz That sounds great! I'll check what needs to be adjusted to make this work the new entity.

[piitaya]

I was busy so I haven't given any recent feedback on this PR.
Also, shopping list was unmaintained in HA codebase so I wasn't too in favor of merging this PR.
With the latest release, I think we can make it part of the Mushroom 🙂

Only few comments :

• I'm not sure about adding the possibility to have option check and uncheck icon. Can we use ha-checkbox component to have focus/hover style for accessibility support?
• Let's rename it to todo-card and use todo entities instead of shopping list.
• It can be nice to have tap/hold/double tap action for the top part to be consistent with other Mushroom cards.

[lscheibel]

@piitaya I've updated the card to work with the new todo entity :)

---

Feedback:

Personally, I don't think the ha-checkbox or by extension the material checkbox is a good fit for the visual language of mushroom. Neither the bright blue color nor the ripple effect are visible in any other mushroom component. The same applies to focus and hover styles, which are noticeably absent from other mushroom cards, so I'm a bit surprised to see them as a requirement here.

If you want I can add those, also without using the ha-checkbox though. We could even open another issue where other cards would receive some a11y treatment as well.

Here's an example of what the ha-checkbox would look like:

Regarding the customizable icons, especially for the light theme, I personally much prefer the outlined checkboxes and would use those, while the defaults are chosen to fit the overall style the best. Nonetheless, I understand that mushroom tries to offer as few options as possible, so if this would block the merge of this PR, I'll remove them and maybe add a separate PR where this could be discussed.

[ScreepCode]

Is there any update on this topic?
Since 2024.01 the todo-list feature is even more improved by adding due dates and descriptons with markdown support
Would love to the the mushroom card in dashboards ^^

[lscheibel]

I can implement the new changes, namely support for descriptions and due dates and removal of the old shopping_list API, although I would need some form of feedback from @piitaya first. Next to the questions from my feedback above, I would like to ask how we'd go about rendering the markdown? I know that mushroom tries to be somewhat lean in its dependencies, so we could also render the markdown as plain text for now and make markdown support a different feature for the "maybe"-future.