Support descriptions in flow menu steps (#12108)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

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

@@ -189,6 +189,18 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderMenuDescription(hass, step) {
+      const description = hass.localize(
+        `component.${step.handler}.config.step.${step.step_id}.description`,
+        step.description_placeholders
+      );
+      return description
+        ? html`
+            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+          `
+        : "";
+    },
+
     renderMenuOption(hass, step, option) {
       return hass.localize(
         `component.${step.handler}.config.step.${step.step_id}.menu_options.${option}`,

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

@@ -83,6 +83,11 @@ export interface FlowConfig {
 
   renderMenuHeader(hass: HomeAssistant, step: DataEntryFlowStepMenu): string;
 
+  renderMenuDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepMenu
+  ): TemplateResult | "";
+
   renderMenuOption(
     hass: HomeAssistant,
     step: DataEntryFlowStepMenu,

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

@@ -142,6 +142,22 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderMenuDescription(hass, step) {
+        const description = hass.localize(
+          `component.${step.handler}.option.step.${step.step_id}.description`,
+          step.description_placeholders
+        );
+        return description
+          ? html`
+              <ha-markdown
+                allowsvg
+                breaks
+                .content=${description}
+              ></ha-markdown>
+            `
+          : "";
+      },
+
       renderMenuOption(hass, step, option) {
         return hass.localize(
           `component.${step.handler}.options.step.${step.step_id}.menu_options.${option}`,

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

@@ -35,8 +35,14 @@ class StepFlowMenu extends LitElement {
       translations = this.step.menu_options;
     }
 
+    const description = this.flowConfig.renderMenuDescription(
+      this.hass,
+      this.step
+    );
+
     return html`
       <h2>${this.flowConfig.renderMenuHeader(this.hass, this.step)}</h2>
+      ${description ? html`<div class="content">${description}</div>` : ""}
       <div class="options">
         ${options.map(
           (option) => html`
@@ -69,6 +75,16 @@ class StepFlowMenu extends LitElement {
         margin-top: 20px;
         margin-bottom: 8px;
       }
+      .content {
+        padding-bottom: 16px;
+        border-bottom: 1px solid var(--divider-color);
+      }
+      .content + .options {
+        margin-top: 8px;
+      }
+      mwc-list-item {
+        --mdc-list-side-padding: 24px;
+      }
     `,
   ];
 }