[Styling Module] Bubble Chips

[StaleLoafOfBread]

Bubble Chips

Version: v1.0
Creator: StaleLoafOfBread

Important

This was designed for the button card but seems to work on the rest other than:

• Horizontal buttons stack
• Pop-up

Tip

Setting your rows to auto improves the effectiveness. Ex:

grid_options:
 columns: full
 rows: auto

Make your subbuttons look more like Mushroom Chips

bubble_chips:
  gap: 3

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

bubble_chips:
  name: Bubble Chips
  version: "v1.0"
  creator: "StaleLoafOfBread"
  link: https://github.com/Clooos/Bubble-Card/discussions/1345
  description: |
    Make your subbuttons look more like <a href="/piitaya/lovelace-mushroom/blob/main/docs/cards/chips.md">Mushroom Chips</a>
    <br />
  
    <b>Example on how to add a line break:</b><br />
    <pre><code class="language-javascript">
      const container = card.querySelector(".bubble-sub-button-container");
      if (!container) return;
  
      const targetElement = container.querySelector('.bubble-sub-button-5');
      if (!targetElement) return;
  
      // Check if a break element already exists before the target
      if (targetElement.previousElementSibling?.classList.contains("break")) return;
  
      // Create the break element
      const breakEl = document.createElement("div");
      breakEl.classList.add("break");
  
      // Insert before the target element
      container.insertBefore(breakEl, targetElement);
    </code></pre>
    <br />
  
    <b>You might also want to add the following to reduce the top margin:</b><br />
    <pre><code class="language-css">
    .bubble-wrapper {
      height: 75%
    }
    </code></pre>
  code: |
    /* Remove background so the subbuttons look more like smaller regular buttons similar to Mushroom Chips */
    ha-card { --bubble-main-background-color: transparent}
    
    /* Wrap subbuttons like Mushroom Chips */
    .bubble-sub-button-container,
    .large .bubble-sub-button-container {
        display: flex;
        flex-flow: wrap;
        justify-content: ${this.config.bubble_chips?.['justify-content'] || 'flex-end'};
        gap: ${this.config.bubble_chips?.gap || '8'}px;
      }
  
    /* Allow icons using drop-shadow to not get cut off by their container. Useful for glow effects. */
    .bubble-button-card-container,
    .bubble-button-card-container .bubble-container,
    .bubble-button-card-container .bubble-container .button-container {
      overflow: visible !important;
    }
  
    /* Add a class to break rows */
    .break {
      flex-basis: 100%;
      height: 0; 
      margin-top: this.config.bubble_chips?.gap * - 1 || '-8px'; /* Cancels out one extra gap */
    }
  
    /* Auto adjust the rows of the card to fit the rows of subbutons */
    ${(() => {
      const container = card.querySelector(".large .bubble-sub-button-container");
      if (!container) return;
  
      // Filter out .break elements before calculating rows
      const elements = Array.from(container.children).filter(el => !el.classList.contains("break"));
      const uniqueRows = new Set(elements.map(el => el.offsetTop));
      const calculatedRowSize = uniqueRows.size;
  
      // Get the current --row-size value, defaulting to -1 if it cannot be parsed
      const currentRowSize = parseInt(getComputedStyle(card).getPropertyValue("--row-size")) || -1;
  
      // Only update if the value has changed
      if (currentRowSize !== calculatedRowSize) {
          card.style.setProperty("--row-size", calculatedRowSize);
  
          this.setConfig({
              ...this.config,
              grid_options: {
                  ...this.config.grid_options,
                  rows: calculatedRowSize
              }
          });
  
          this.requestUpdate?.();
      }
    })()}
  
  
  editor:
    - name: gap
      label: "Gap"
      selector:
          number:
            min: 0
    - name: justify-content
      label: "Justify Content"
      selector:
        select:
          options:
            - flex-start
            - center
            - flex-end
            - space-between
            - space-around
            - space-evenly

---

Screenshot:

I added a break before the alarm entities.

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️