Conditional tile feature

[JosephAbbey]

Proposed change

Added a conditional tile feature that uses the generic, pre-defined conditions code from the card and row.

This does not include a visual editor for the feature, as that is not yet implemented for the entity row either, and I am planning to implement it as a separate pr.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

type: tile
entity: update.demo_add_on
features:
  - type: conditional
    conditions:
      - condition: state
        entity: update.demo_add_on
        state_not: 'off'
    feature:
      type: update-actions
      backup: ask

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[piitaya]

Hi 👋

Thank you for the contribution. We didn't introduced the conditional feature because of UX concerns. The tile card has been designed to fit in a grid (e.g. section). The number of features determine the height of the card on the grid.
So we have 2 solutions :

1. Keep the same height whether the feature is shown or hidden. It will result of an empty space on the card. That the behaviour you implemented (see video below).
2. Reduce the size when hidden. It will result of a grid shifting when the state change and we don't want that.

Also, in the future, we will allow resizing of card so we need fixed card size for that.

CleanShot.2024-06-07.at.16.16.42.mp4

[JosephAbbey]

Hey, I have done a little experiment with the sections layout and the conditional card. It also produces layout shift when toggling. It may be worth adding a context aware warning to the editors for conditional cards, rows, and features (once implemented). It should detect when a conditional thing is inside a sections layout and display a warning stating that it may cause layout shift. This way the option is available for people like me who prefer the older layouts and who like spending a lot of time on their dashboards, without affecting those who don't.

I was planning on implementing the editors for conditional rows and features on a separate pull-request and sharing logic between them, I am happy to add the warning to the editors when I do that.

Thanks for the feedback, I wouldn't have thought to look at the sections layout.

Edit:
Maybe we could also not suggest the conditional things in the sections view, i.e. there shouldn't be a button to add them. I realise that is deviating from expected behaviour though.

[JosephAbbey]

@piitaya, I have been experimenting with the new visibility property and it seems like this is going to be used in preference to conditional elements, in which case should I instead add support for the visibility prop on rows and features?

[piitaya]

The calculation of height of the card on the grid is based on the config of the card. The base size is 1. Vertical option adds 1 and each feature adds 1.

By adding this feature, we will need to recalculate the height when the visibility change and it will produce layout shifting. With 2024.7 we introduced card resizing so it will become even worst so we would prefer to not add this feature for now.

However, custom features are supported so your PR can be moved to a custom feature for now (see documentation)