Add documentation link to "customize" dialog (#7321)

src/panels/config/customize/ha-config-customize.js

@@ -11,6 +11,7 @@ import "../ha-config-section";
 import "../ha-entity-config";
 import { configSections } from "../ha-panel-config";
 import "./ha-form-customize";
+import { documentationUrl } from "../../../util/documentation-url";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -34,6 +35,14 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
             </span>
             <span slot="introduction">
               [[localize('ui.panel.config.customize.picker.introduction')]]
+              <br />
+              <a
+                href="[[_computeDocumentationUrl(hass)]]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                [[localize("ui.panel.config.customize.picker.documentation")]]
+              </a>
             </span>
             <ha-entity-config
               hass="[[hass]]"
@@ -91,5 +100,12 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
       .map((key) => hass.states[key])
       .sort(sortStatesByName);
   }
+
+  _computeDocumentationUrl(hass) {
+    return documentationUrl(
+      hass,
+      "/docs/configuration/customizing-devices/#customization-using-the-ui"
+    );
+  }
 }
 customElements.define("ha-config-customize", HaConfigCustomize);

src/panels/config/customize/ha-form-customize.js

@@ -40,35 +40,35 @@ class HaFormCustomize extends LocalizeMixin(PolymerElement) {
         </div>
       </template>
       <template is="dom-if" if="[[hasLocalAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_customize')]]<br />
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{localAttributes}}"
         ></ha-form-customize-attributes>
       </template>
       <template is="dom-if" if="[[hasGlobalAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_outside')]]<br />
           [[localize('ui.panel.config.customize.different_include')]]
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{globalAttributes}}"
         ></ha-form-customize-attributes>
       </template>
       <template is="dom-if" if="[[hasExistingAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_set')]]<br />
           [[localize('ui.panel.config.customize.attributes_override')]]
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{existingAttributes}}"
         ></ha-form-customize-attributes>
       </template>
       <template is="dom-if" if="[[hasNewAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_not_set')]]
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{newAttributes}}"
         ></ha-form-customize-attributes>

src/translations/en.json

@@ -998,6 +998,7 @@
           "picker": {
             "header": "Customizations",
             "introduction": "Tweak per-entity attributes. Added/edited customizations will take effect immediately. Removed customizations will take effect when the entity is updated.",
+            "documentation": "Customization documentation",
             "entity": "Entity"
           },
           "warning": {