feat(chip): improve stack in card support

[piitaya]

Description

Convert chip to standard ha-card. This improve support for card like vertical-stack-in-card because the container element is a ha-card.

Example :

type: custom:vertical-stack-in-card
styles:
  '--chip-box-shadow': none
  '--chip-background': none
  '--chip-spacing': 0
cards:
  - type: custom:mushroom-light-card
    entity: light.bed_light
  - type: custom:mushroom-chips-card
    alignment: justify
    chips:
      - type: entity
        entity: sensor.outside_temperature
        icon_color: red
      - type: entity
        entity: sensor.iphone_de_paul_battery_level
        icon_color: grey

Related Issue

Motivation and Context

How Has This Been Tested

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.

[Jmjm80]

Im havent an issue with a custom theme:

Chips background still shows: (by the way, i really all the great work you're doing)

[piitaya]

Have you added this options to vertical stack in card?

styles:
  '--chip-box-shadow': none
  '--chip-background': none
  '--chip-spacing': 0

[Jmjm80]

Yes, I did.

[piitaya]

And what is your Mushroom version?

[Jmjm80]

V1.8.7

[Idan37S]

Yes, I did.

You are using stack-in-card,
Try using vertical-stack-in-card (it's another custom card) and it will probably work (the same happened to me, now it's working)

[GitHubGoody]

Same issue here in the top-left corner (and many other cards)...

I'm on v1.8.7 and was previously able to use...

style: |
  ha-card {box-shadow: 0px 0px;}

...to remove the border shadow on Mushroom Chips in stack-in-cards (not vertical-stack-in-cards as I see in the previous post).

Considering stack-in-cards are meant to work in vertical or horizontal mode since they were meant to replace vertical-stack-in-cards...

...I'd still like to figure out the proper syntax and/or request a change in Mushroom Chip Cards to make them compatible again. I think it'll be great to not have to remove the border for each chip card once I can get it working. ;-)

Here's the syntax I'm trying (I've also tried putting '0px 0px' in place of 'none' for the box-shadow property...didn't work):

- type: custom:stack-in-card
  mode: vertical
  styles:
    '--chip-box-shadow': none
    '--chip-background': none
    '--chip-spacing': 0
  cards:
      # Status Chips
    - type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: binary_sensor.study_occupancy
          icon: >-
            {{ iif(is_state('binary_sensor.study_occupancy','on'),
            'mdi:account-check', 'mdi:account-cancel-outline') }}
          icon_color: '{{ iif(is_state(''binary_sensor.study_occupancy'',''on''), ''green'', ''grey'') }}'
          tap_action:
            action: more-info

I appreciate any help.

[piitaya]

One example with stack-in-card. We need to use card_mod :

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    card_mod: 
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
    chips:
      - type: entity
        entity: sensor.outside_temperature
        icon_color: red
      - type: light
        entity: light.bed_light

[smiller171]

card_mod still isn't doing it for me. Drop shadow won't go away

[smiller171]

Ok, I didn't initially realize that card-mod was something I needed to install. After getting it set up it still didn't work as @piitaya described. This is what I finally got to work:

type: custom:stack-in-card
mode: vertical
card_mod:
  style:
    "hui-vertical-stack-card$ mushroom-chips-card":
      "$ *":
        "$ mushroom-chip$": |
          ha-card {
            --ha-card-box-shadow: none;
          }
cards:
  - type: custom:mushroom-title-card
    title: Front Door
    alignment: center
    subtitle: ''
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: lock.front_door_lock
      - type: entity
        entity: sensor.doorbell_last_motion
        icon: mdi:motion-sensor
      - type: entity
        entity: sensor.doorbell_last_ding
        icon: mdi:bell-ring-outline
      - type: alarm-control-panel
        entity: alarm_control_panel.home_alarm
    alignment: center

[piitaya]

It's strange that the code I propose doesn't work for you...
Can you try again with 1.8.8 mushroom version and card_mod installed?

[smiller171]

Here you go, default theme with mushroom 1.8.8

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-title-card
    title: Front Door
    alignment: center
    subtitle: ''
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
    chips:
      - type: entity
        entity: sensor.doorbell_last_motion
        icon: mdi:motion-sensor
      - type: entity
        entity: sensor.doorbell_last_ding
        icon: mdi:bell-ring-outline
    alignment: center
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
    chips:
      - type: entity
        entity: lock.front_door_lock
      - type: alarm-control-panel
        entity: alarm_control_panel.home_alarm
    alignment: center

[piitaya]

Which browser do you use?

I just replaced the sensor entities and it work for me (tested on Safari and Chrome)

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-title-card
    title: Front Door
    alignment: center
    subtitle: ''
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
    chips:
      - type: entity
        entity: sensor.outside_temperature
        icon: mdi:motion-sensor
      - type: entity
        entity: binary_sensor.basement_floor_wet
        icon: mdi:bell-ring-outline
    alignment: center
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
    chips:
      - type: entity
        entity: lock.front_door
      - type: alarm-control-panel
        entity: alarm_control_panel.alarm_panel_1
    alignment: center

[smiller171]

Using Chrome on MacOS with HASS running on RasPi. I wonder if there's CSS added by another extension breaking it for me?

[piitaya]

Maybe. I only have card_mod and stack-in-card installed on my test env.

[smiller171]

This seems to actually work now. Not sure what changed