create spacer chip

docs/cards/chips.md

@@ -59,6 +59,13 @@ An light chip allows you to display light.
 
 A menu chip allows you to open the drawer in mobile.
 
+### Spacer chip
+
+![Chip menu light](../images/chip-spacer-light.png)
+![Chip menu dark](../images/chip-spacer-dark.png)
+
+A spacer chip allows you to space chips apart.
+
 ### Template chip
 
 ![Chip template light](../images/chip-template-light.png)

src/cards/chips-card/chips-card-chips-editor.ts

@@ -70,27 +70,33 @@ export class ChipsCardEditorChips extends MushroomBaseElement {
                                           <div class="special-row">
                                               <div>
                                                   <span> ${this._renderChipLabel(chipConf)}</span>
-                                                  <span class="secondary"
-                                                      >${this._renderChipSecondary(chipConf)}</span
-                                                  >
+                                                  <span class="secondary">
+                                                      ${this._renderChipSecondary(chipConf)}
+                                                  </span>
                                               </div>
                                           </div>
                                       `}
+                                      ${chipConf.type == "spacer"
+                                          ? ""
+                                          : html`
+                                                <ha-icon-button
+                                                    .label=${customLocalize(
+                                                        "editor.chip.chip-picker.edit"
+                                                    )}
+                                                    class="edit-icon"
+                                                    .index=${index}
+                                                    @click=${this._editChip}
+                                                >
+                                                    <ha-icon icon="mdi:pencil"></ha-icon>
+                                                </ha-icon-button>
+                                            `}
                                       <ha-icon-button
                                           .label=${customLocalize("editor.chip.chip-picker.clear")}
                                           class="remove-icon"
                                           .index=${index}
                                           @click=${this._removeChip}
                                       >
-                                          <ha-icon icon="mdi:close"></ha-icon
-                                      ></ha-icon-button>
-                                      <ha-icon-button
-                                          .label=${customLocalize("editor.chip.chip-picker.edit")}
-                                          class="edit-icon"
-                                          .index=${index}
-                                          @click=${this._editChip}
-                                      >
-                                          <ha-icon icon="mdi:pencil"></ha-icon>
+                                          <ha-icon icon="mdi:close"></ha-icon>
                                       </ha-icon-button>
                                   </div>
                               `

src/cards/chips-card/chips-card-editor.ts

@@ -111,6 +111,10 @@ const templateChipConfigStruct = object({
     entity_id: optional(union([string(), array(string())])),
 });
 
+const spacerChipConfigStruct = object({
+    type: literal("spacer"),
+});
+
 const chipsConfigStruct = dynamic<any>((value) => {
     if (value && typeof value === "object" && "type" in value) {
         switch ((value as LovelaceChipConfig).type!) {
@@ -130,6 +134,8 @@ const chipsConfigStruct = dynamic<any>((value) => {
                 return lightChipConfigStruct;
             case "template":
                 return templateChipConfigStruct;
+            case "spacer":
+                return spacerChipConfigStruct;
         }
     }
     return object();

src/cards/chips-card/chips/index.ts

@@ -7,3 +7,4 @@ export { TemplateChip } from "./template-chip";
 export { ConditionalChip } from "./conditional-chip";
 export { LightChip } from "./light-chip";
 export { AlarmControlPanelChip } from "./alarm-control-panel-chip";
+export { SpacerChip } from "./spacer-chip";

src/cards/chips-card/chips/spacer-chip.ts

@@ -0,0 +1,17 @@
+import { css, CSSResultGroup, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { LovelaceChip } from "../../../utils/lovelace/chip/types";
+import { computeChipComponentName } from "../../../utils/lovelace/chip/chip-element";
+
+@customElement(computeChipComponentName("spacer"))
+export class SpacerChip extends LitElement implements LovelaceChip {
+    public setConfig(): void {}
+
+    static get styles(): CSSResultGroup {
+        return css`
+            :host {
+                flex-grow: 1;
+            }
+        `;
+    }
+}

src/translations/en.json

@@ -167,6 +167,7 @@
                     "entity": "Entity",
                     "light": "Light",
                     "menu": "Menu",
+                    "spacer": "Spacer",
                     "template": "Template",
                     "weather": "Weather"
                 }

src/utils/lovelace/chip/types.ts

@@ -92,6 +92,10 @@ export type LightChipConfig = {
     double_tap_action?: ActionConfig;
 };
 
+export type SpacerChipConfig = {
+    type: "spacer";
+};
+
 export type LovelaceChipConfig =
     | ActionChipConfig
     | AlarmControlPanelChipConfig
@@ -101,7 +105,8 @@ export type LovelaceChipConfig =
     | WeatherChipConfig
     | TemplateChipConfig
     | ConditionalChipConfig
-    | LightChipConfig;
+    | LightChipConfig
+    | SpacerChipConfig;
 
 export const CHIP_LIST: LovelaceChipConfig["type"][] = [
     "action",
@@ -111,6 +116,7 @@ export const CHIP_LIST: LovelaceChipConfig["type"][] = [
     "entity",
     "light",
     "menu",
+    "spacer",
     "template",
     "weather",
 ];