Add background styling options to section settings (#26369)

* Add background styling options to section settings

* Improve

* Fix linter

* Move to subkey

* Use hex instead of rgb to save in yaml

* Remove or

src/data/lovelace/config/section.ts

@@ -2,10 +2,15 @@ import type { Condition } from "../../../panels/lovelace/common/validate-conditi
 import type { LovelaceCardConfig } from "./card";
 import type { LovelaceStrategyConfig } from "./strategy";
 
+export interface LovelaceSectionStyleConfig {
+  background_color?: string;
+}
+
 export interface LovelaceBaseSectionConfig {
   visibility?: Condition[];
   column_span?: number;
   row_span?: number;
+  style?: LovelaceSectionStyleConfig;
   /**
    * @deprecated Use heading card instead.
    */

src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts

@@ -1,6 +1,8 @@
+import type { PropertyValues } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { mdiFormatColorFill } from "@mdi/js";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type {
   HaFormSchema,
@@ -10,9 +12,12 @@ import "../../../../components/ha-form/ha-form";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
+import { hex2rgb, rgb2hex } from "../../../../common/color/convert-color";
 
 interface SettingsData {
   column_span?: number;
+  background_type: "none" | "color";
+  background_color?: number[];
 }
 
 @customElement("hui-section-settings-editor")
@@ -23,8 +28,10 @@ export class HuiDialogEditSection extends LitElement {
 
   @property({ attribute: false }) public viewConfig!: LovelaceViewConfig;
 
+  @state() private _selectorBackgroundType: "none" | "color" = "none";
+
   private _schema = memoizeOne(
-    (maxColumns: number) =>
+    (maxColumns: number, enableBackground: boolean) =>
       [
         {
           name: "column_span",
@@ -36,15 +43,75 @@ export class HuiDialogEditSection extends LitElement {
             },
           },
         },
+        {
+          name: "styling",
+          type: "expandable",
+          flatten: true,
+          iconPath: mdiFormatColorFill,
+          schema: [
+            {
+              name: "background_settings",
+              flatten: true,
+              type: "grid",
+              schema: [
+                {
+                  name: "background_type",
+                  required: true,
+                  selector: {
+                    select: {
+                      mode: "dropdown",
+                      options: [
+                        {
+                          value: "none",
+                          label: this.hass.localize("ui.common.none"),
+                        },
+                        {
+                          value: "color",
+                          label: this.hass.localize(
+                            "ui.panel.lovelace.editor.edit_section.settings.background_type_color_option"
+                          ),
+                        },
+                      ],
+                    },
+                  },
+                },
+                {
+                  name: "background_color",
+                  selector: {
+                    color_rgb: {},
+                  },
+                  disabled: !enableBackground,
+                },
+              ],
+            },
+          ],
+        },
       ] as const satisfies HaFormSchema[]
   );
 
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    if (this.config.style?.background_color) {
+      this._selectorBackgroundType = "color";
+    } else {
+      this._selectorBackgroundType = "none";
+    }
+  }
+
   render() {
     const data: SettingsData = {
       column_span: this.config.column_span || 1,
+      background_type: this._selectorBackgroundType,
+      background_color: this.config.style?.background_color
+        ? hex2rgb(this.config.style?.background_color as any)
+        : [],
     };
 
-    const schema = this._schema(this.viewConfig.max_columns || 4);
+    const schema = this._schema(
+      this.viewConfig.max_columns || 4,
+      this._selectorBackgroundType === "color"
+    );
 
     return html`
       <ha-form
@@ -76,11 +143,25 @@ export class HuiDialogEditSection extends LitElement {
     ev.stopPropagation();
     const newData = ev.detail.value as SettingsData;
 
+    this._selectorBackgroundType = newData.background_type;
+
     const newConfig: LovelaceSectionRawConfig = {
       ...this.config,
       column_span: newData.column_span,
     };
 
+    if (newData.background_type === "color") {
+      newConfig.style = {
+        ...newConfig.style,
+        background_color: rgb2hex(newData.background_color as any),
+      };
+    } else {
+      newConfig.style = {
+        ...newConfig.style,
+        background_color: undefined,
+      };
+    }
+
     fireEvent(this, "value-changed", { value: newConfig });
   }
 }

src/panels/lovelace/sections/hui-grid-section.ts

@@ -86,6 +86,8 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
       ? IMPORT_MODE_CARD_SORTABLE_OPTIONS
       : CARD_SORTABLE_OPTIONS;
 
+    const background = this._config.style?.background_color;
+
     return html`
       <ha-sortable
         .disabled=${!editMode}
@@ -103,7 +105,11 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           class="container ${classMap({
             "edit-mode": editMode,
             "import-only": this.importOnly,
+            "has-background": Boolean(background),
           })}"
+          style=${styleMap({
+            background: background,
+          })}
         >
           ${repeat(
             cardsConfig,
@@ -250,6 +256,10 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           border: none;
           padding: 0 !important;
         }
+        .container.has-background {
+          padding: 8px;
+          border-radius: var(--ha-card-border-radius, 12px);
+        }
 
         .card {
           border-radius: var(--ha-card-border-radius, 12px);

src/translations/en.json

@@ -440,7 +440,8 @@
       "replace": "Replace",
       "append": "Append",
       "supports_markdown": "Supports {markdown_help_link}",
-      "markdown": "Markdown"
+      "markdown": "Markdown",
+      "none": "None"
     },
     "components": {
       "selectors": {
@@ -7257,7 +7258,11 @@
             "edit_yaml": "[%key:ui::panel::lovelace::editor::edit_view::edit_yaml%]",
             "settings": {
               "column_span": "Width",
-              "column_span_helper": "Larger sections will be made smaller to fit the display. (e.g. on mobile devices)"
+              "column_span_helper": "Larger sections will be made smaller to fit the display. (e.g. on mobile devices)",
+              "styling": "Styling",
+              "background_type": "Background type",
+              "background_type_color_option": "Color",
+              "background_color": "Background color"
             },
             "visibility": {
               "explanation": "The section will be shown when ALL conditions below are fulfilled. If no conditions are set, the section will always be shown."