Add support for option descriptions in config flows (#26825)

* Add support for option descriptions in config flows

* use `twoline`

* remove unused classes

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -256,6 +256,13 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -137,6 +137,12 @@ export interface FlowConfig {
     option: string
   ): string;
 
+  renderMenuOptionDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepMenu,
+    option: string
+  ): string;
+
   renderLoadingDescription(
     hass: HomeAssistant,
     loadingReason: LoadingReason,

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -225,6 +225,13 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
+          step.description_placeholders
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(`component.${configEntry.domain}.options.loading`) ||

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -252,6 +252,13 @@ export const showSubConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/step-flow-menu.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
@@ -20,6 +20,7 @@ class StepFlowMenu extends LitElement {
   protected render(): TemplateResult {
     let options: string[];
     let translations: Record<string, string>;
+    let optionDescriptions: Record<string, string> = {};
 
     if (Array.isArray(this.step.menu_options)) {
       options = this.step.menu_options;
@@ -30,10 +31,26 @@ class StepFlowMenu extends LitElement {
           this.step,
           option
         );
+        optionDescriptions[option] =
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            option
+          );
       }
     } else {
       options = Object.keys(this.step.menu_options);
       translations = this.step.menu_options;
+      optionDescriptions = Object.fromEntries(
+        options.map((key) => [
+          key,
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            key
+          ),
+        ])
+      );
     }
 
     const description = this.flowConfig.renderMenuDescription(
@@ -46,8 +63,18 @@ class StepFlowMenu extends LitElement {
       <div class="options">
         ${options.map(
           (option) => html`
-            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
+            <ha-list-item
+              hasMeta
+              .step=${option}
+              @click=${this._handleStep}
+              ?twoline=${optionDescriptions[option]}
+            >
               <span>${translations[option]}</span>
+              ${optionDescriptions[option]
+                ? html`<span slot="secondary">
+                    ${optionDescriptions[option]}
+                  </span>`
+                : nothing}
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
@@ -73,11 +100,10 @@ class StepFlowMenu extends LitElement {
     css`
       .options {
         margin-top: 20px;
-        margin-bottom: 8px;
+        margin-bottom: 16px;
       }
       .content {
         padding-bottom: 16px;
-        border-bottom: 1px solid var(--divider-color);
       }
       .content + .options {
         margin-top: 8px;

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -289,6 +289,15 @@ export const showRepairsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${issue.domain}.issues.${
+            issue.translation_key || issue.issue_id
+          }.fix_flow.step.${step.step_id}.menu_option_descriptions.${option}`,
+          mergePlaceholders(issue, step)
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(