Remove target description (#51315)

gallery/src/pages/components/ha-selector.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, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
@@ -692,7 +692,11 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                 ([key, value]) => html`
                   <ha-settings-row narrow slot=${slot}>
                     <span slot="heading">${value?.name || key}</span>
-                    <span slot="description">${value?.description}</span>
+                    ${value?.description
+                      ? html`<span slot="description"
+                          >${value?.description}</span
+                        >`
+                      : nothing}
                     <ha-selector
                       .hass=${this.hass}
                       .selector=${value!.selector}

src/components/ha-service-control.ts

@@ -516,17 +516,10 @@ export class HaServiceControl extends LitElement {
         `}
     ${serviceData && "target" in serviceData
       ? html`<ha-settings-row .narrow=${this.narrow}>
-          ${hasOptional
-            ? html`<div slot="prefix" class="checkbox-spacer"></div>`
-            : ""}
           <span slot="heading"
             >${this.hass.localize("ui.components.service-control.target")}</span
           >
-          <span slot="description"
-            >${this.hass.localize(
-              "ui.components.service-control.target_secondary"
-            )}</span
-          ><ha-selector
+          <ha-selector
             .hass=${this.hass}
             .selector=${this._targetSelector(
               serviceData.target as TargetSelector,

src/components/ha-settings-row.ts

@@ -1,5 +1,6 @@
+import { HasSlotController } from "@home-assistant/webawesome/dist/internal/slot";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-settings-row")
@@ -16,17 +17,28 @@ export class HaSettingsRow extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public empty = false;
 
+  private readonly _hasSlotController = new HasSlotController(
+    this,
+    "description"
+  );
+
   protected render(): TemplateResult {
+    const hasDescription = this._hasSlotController.test("description");
+
     return html`
       <div class="prefix-wrap">
         <slot name="prefix"></slot>
         <div
           class="body"
-          ?two-line=${!this.threeLine}
+          ?two-line=${!this.threeLine && hasDescription}
           ?three-line=${this.threeLine}
         >
           <slot name="heading"></slot>
-          <div class="secondary"><slot name="description"></slot></div>
+          ${hasDescription
+            ? html`<span class="secondary"
+                ><slot name="description"></slot
+              ></span>`
+            : nothing}
         </div>
       </div>
       <div class="content">

src/panels/config/automation/condition/types/ha-automation-condition-platform.ts

@@ -166,19 +166,12 @@ export class HaPlatformCondition extends LitElement {
       </div>
       ${conditionDesc && "target" in conditionDesc
         ? html`<ha-settings-row narrow>
-            ${hasOptional
-              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
-              : nothing}
             <span slot="heading"
               >${this.hass.localize(
                 "ui.components.service-control.target"
               )}</span
             >
-            <span slot="description"
-              >${this.hass.localize(
-                "ui.components.service-control.target_secondary"
-              )}</span
-            ><ha-selector
+            <ha-selector
               .hass=${this.hass}
               .selector=${this._targetSelector(conditionDesc.target)}
               .disabled=${this.disabled}
@@ -240,6 +233,10 @@ export class HaPlatformCondition extends LitElement {
       return nothing;
     }
 
+    const description = this.hass.localize(
+      `component.${domain}.conditions.${conditionName}.fields.${fieldName}.description`
+    );
+
     return html`<ha-settings-row narrow>
       ${!showOptional
         ? hasOptional
@@ -259,11 +256,9 @@ export class HaPlatformCondition extends LitElement {
           `component.${domain}.conditions.${conditionName}.fields.${fieldName}.name`
         ) || conditionName}</span
       >
-      <span slot="description"
-        >${this.hass.localize(
-          `component.${domain}.conditions.${conditionName}.fields.${fieldName}.description`
-        )}</span
-      >
+      ${description
+        ? html`<span slot="description">${description}</span>`
+        : nothing}
       <ha-selector
         .disabled=${this.disabled ||
         (showOptional &&

src/panels/config/automation/trigger/types/ha-automation-trigger-platform.ts

@@ -202,18 +202,10 @@ export class HaPlatformTrigger extends LitElement {
       </div>
       ${triggerDesc && "target" in triggerDesc
         ? html`<ha-settings-row narrow>
-            ${hasOptional
-              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
-              : nothing}
             <span slot="heading"
               >${this.hass.localize(
                 "ui.components.service-control.target"
               )}</span
-            >
-            <span slot="description"
-              >${this.hass.localize(
-                "ui.components.service-control.target_secondary"
-              )}</span
             ><ha-selector
               .hass=${this.hass}
               .selector=${this._targetSelector(triggerDesc.target)}
@@ -276,6 +268,10 @@ export class HaPlatformTrigger extends LitElement {
       return nothing;
     }
 
+    const description = this.hass.localize(
+      `component.${domain}.triggers.${triggerName}.fields.${fieldName}.description`
+    );
+
     return html`<ha-settings-row narrow>
       ${!showOptional
         ? hasOptional
@@ -295,11 +291,9 @@ export class HaPlatformTrigger extends LitElement {
           `component.${domain}.triggers.${triggerName}.fields.${fieldName}.name`
         ) || triggerName}</span
       >
-      <span slot="description"
-        >${this.hass.localize(
-          `component.${domain}.triggers.${triggerName}.fields.${fieldName}.description`
-        )}</span
-      >
+      ${description
+        ? html`<span slot="description">${description}</span>`
+        : nothing}
       <ha-selector
         .disabled=${this.disabled ||
         (showOptional &&

src/translations/en.json

@@ -1091,7 +1091,6 @@
       "service-control": {
         "required": "This field is required",
         "target": "Targets",
-        "target_secondary": "What should this action use as targeted areas, devices or entities.",
         "action_data": "Action data",
         "integration_doc": "Integration documentation",
         "script_variables": "Script variables"