diff --git a/src/dialogs/config-flow/show-dialog-config-flow.ts b/src/dialogs/config-flow/show-dialog-config-flow.ts index 346590e42e..d4a08bbf44 100644 --- a/src/dialogs/config-flow/show-dialog-config-flow.ts +++ b/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 ""; diff --git a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts index 4bdf0c522f..ba6999e337 100644 --- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts +++ b/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, diff --git a/src/dialogs/config-flow/show-dialog-options-flow.ts b/src/dialogs/config-flow/show-dialog-options-flow.ts index 022704d408..d7d1d78cf2 100644 --- a/src/dialogs/config-flow/show-dialog-options-flow.ts +++ b/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`) || diff --git a/src/dialogs/config-flow/show-dialog-sub-config-flow.ts b/src/dialogs/config-flow/show-dialog-sub-config-flow.ts index a2cbfca060..88110edd2b 100644 --- a/src/dialogs/config-flow/show-dialog-sub-config-flow.ts +++ b/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 ""; diff --git a/src/dialogs/config-flow/step-flow-menu.ts b/src/dialogs/config-flow/step-flow-menu.ts index ede8a2998e..7f718a4f37 100644 --- a/src/dialogs/config-flow/step-flow-menu.ts +++ b/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; + let optionDescriptions: Record = {}; 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 {
${options.map( (option) => html` - + ${translations[option]} + ${optionDescriptions[option] + ? html` + ${optionDescriptions[option]} + ` + : nothing} ` @@ -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; diff --git a/src/panels/config/repairs/show-dialog-repair-flow.ts b/src/panels/config/repairs/show-dialog-repair-flow.ts index 6f006b2e39..2b2998e780 100644 --- a/src/panels/config/repairs/show-dialog-repair-flow.ts +++ b/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(