Ensure consistent "blank before percent" handling (#14638)

src/panels/config/core/ha-config-system-navigation.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from "lit/decorators";
 import { canShowPage } from "../../../common/config/can_show_page";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { relativeTime } from "../../../common/datetime/relative_time";
+import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-card";
 import "../../../components/ha-navigation-list";
 import "../../../components/ha-tip";
@@ -84,7 +85,7 @@ class HaConfigSystemNavigation extends LitElement {
                   "percent_used",
                   `${Math.round(
                     (this._storageInfo.used / this._storageInfo.total) * 100
-                  )}%`,
+                  )}${blankBeforePercent(this.hass.locale)}%`,
                   "free_space",
                   `${this._storageInfo.free} GB`
                 )

src/panels/config/devices/ha-config-device-page.ts

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import {
   mdiCog,
   mdiDelete,
@@ -7,18 +8,19 @@ import {
   mdiPencil,
   mdiPlusCircle,
 } from "@mdi/js";
-import "@material/mwc-list/mwc-list-item";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { SENSOR_ENTITIES } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stringCompare } from "../../../common/string/compare";
 import { slugify } from "../../../common/string/slugify";
+import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import { groupBy } from "../../../common/util/group-by";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
@@ -59,6 +61,7 @@ import {
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-error-screen";
+import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -74,8 +77,6 @@ import {
   loadDeviceRegistryDetailDialog,
   showDeviceRegistryDetailDialog,
 } from "./device-registry-detail/show-dialog-device-registry-detail";
-import "../../../layouts/hass-subpage";
-import { SENSOR_ENTITIES } from "../../../common/const";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -639,7 +640,11 @@ export class HaConfigDevicePage extends LitElement {
                     batteryState
                       ? html`
                           <div class="battery">
-                            ${batteryIsBinary ? "" : batteryState.state + " %"}
+                            ${batteryIsBinary
+                              ? ""
+                              : batteryState.state +
+                                blankBeforePercent(this.hass.locale) +
+                                "%"}
                             <ha-battery-icon
                               .hass=${this.hass!}
                               .batteryStateObj=${batteryState}

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -7,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { navigate } from "../../../common/navigate";
+import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import {
@@ -339,7 +340,9 @@ export class HaConfigDeviceDashboard extends LitElement {
             battery && computeStateDomain(battery) === "binary_sensor";
           return battery && (batteryIsBinary || !isNaN(battery.state as any))
             ? html`
-                ${batteryIsBinary ? "" : battery.state + " %"}
+                ${batteryIsBinary
+                  ? ""
+                  : battery.state + blankBeforePercent(this.hass.locale) + "%"}
                 <ha-battery-icon
                   .hass=${this.hass!}
                   .batteryStateObj=${battery}

src/panels/config/hardware/ha-config-hardware.ts

@@ -9,6 +9,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { numberFormatToLocale } from "../../../common/number/format_number";
 import { round } from "../../../common/number/round";
+import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/chart/ha-chart-base";
 import "../../../components/ha-alert";
@@ -169,7 +170,8 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
               max: 100,
               min: 0,
               stepSize: 1,
-              callback: (value) => value + "%",
+              callback: (value) =>
+                value + blankBeforePercent(this.hass.locale) + "%",
             },
           },
           x: {
@@ -386,7 +388,8 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                       )}
                     </div>
                     <div class="value">
-                      ${this._systemStatusData.cpu_percent || "-"}%
+                      ${this._systemStatusData.cpu_percent ||
+                      "-"}${blankBeforePercent(this.hass.locale)}%
                     </div>
                   </div>
                   <div class="card-content">

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -129,7 +129,7 @@ class HuiEnergyCarbonGaugeCard
                 min="0"
                 max="100"
                 .value=${value}
-                .locale=${this.hass!.locale}
+                .locale=${this.hass.locale}
                 label="%"
                 style=${styleMap({
                   "--gauge-color": this._computeSeverity(value),

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -108,7 +108,7 @@ class HuiEnergySolarGaugeCard
                 min="0"
                 max="100"
                 .value=${value}
-                .locale=${this.hass!.locale}
+                .locale=${this.hass.locale}
                 label="%"
                 style=${styleMap({
                   "--gauge-color": this._computeSeverity(value),

src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts

@@ -86,15 +86,17 @@ class HuiCoverOpenCloseTileFeature
             `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
-          ? html`<ha-tile-button
+          ? html`
-              .label=${this.hass.localize(
+              <ha-tile-button
-                "ui.dialogs.more_info_control.cover.stop_cover"
+                .label=${this.hass.localize(
-              )}
+                  "ui.dialogs.more_info_control.cover.stop_cover"
-              @click=${this._onStopTap}
+                )}
-              .disabled=${!canStop(this.stateObj)}
+                @click=${this._onStopTap}
-            >
+                .disabled=${!canStop(this.stateObj)}
-              <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
+              >
-            </ha-tile-button> `
+                <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
+              </ha-tile-button>
+            `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
           ? html`

src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts

@@ -80,15 +80,17 @@ class HuiCoverTiltTileFeature
             `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
-          ? html`<ha-tile-button
+          ? html`
-              .label=${this.hass.localize(
+              <ha-tile-button
-                "ui.dialogs.more_info_control.cover.stop_cover"
+                .label=${this.hass.localize(
-              )}
+                  "ui.dialogs.more_info_control.cover.stop_cover"
-              @click=${this._onStopTap}
+                )}
-              .disabled=${!canStopTilt(this.stateObj)}
+                @click=${this._onStopTap}
-            >
+                .disabled=${!canStopTilt(this.stateObj)}
-              <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
+              >
-            </ha-tile-button> `
+                <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
+              </ha-tile-button>
+            `
           : null}
         ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
           ? html`