Add unit to temperature tile number button group (#17841)

* Add unit to temperature tile number button group

* Update gallery

* Use blank before unit

* Hide unit if no space

* Fix build

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -11,6 +11,7 @@ const buttons: {
   min?: number;
   max?: number;
   step?: number;
+  unit?: string;
   class?: string;
 }[] = [
   {
@@ -29,6 +30,11 @@ const buttons: {
     label: "Custom",
     class: "custom",
   },
+  {
+    id: "unit",
+    label: "With unit",
+    unit: "m",
+  },
 ];
 
 @customElement("demo-components-ha-control-number-buttons")
@@ -50,6 +56,7 @@ export class DemoHarControlNumberButtons extends LitElement {
               <pre>Config: ${JSON.stringify(config)}</pre>
               <ha-control-number-buttons
                 .value=${this.value}
+                .unit=${config.unit}
                 .min=${config.min}
                 .max=${config.max}
                 .step=${config.step}

package.json

@@ -256,6 +256,7 @@
     "@polymer/polymer": "patch:@polymer/polymer@3.5.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@material/mwc-button@^0.25.3": "^0.27.0",
     "lit": "2.8.0",
+    "clean-css": "5.3.2",
     "@lit/reactive-element": "1.6.3",
     "sortablejs@1.15.0": "patch:sortablejs@npm%3A1.15.0#./.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch",
     "leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"

src/common/entity/compute_attribute_display.ts

@@ -18,6 +18,7 @@ import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
 import { computeStateDomain } from "./compute_state_domain";
+import { blankBeforeUnit } from "../translations/blank_before_unit";
 
 export const computeAttributeValueDisplay = (
   localize: LocalizeFunc,
@@ -55,20 +56,12 @@ export const computeAttributeValueDisplay = (
       unit = getWeatherUnit(config, stateObj as WeatherEntity, attribute);
     }
 
-    if (unit === "%") {
-      return `${formattedValue}${blankBeforePercent(locale)}${unit}`;
-    }
-
-    if (unit === "°") {
-      return `${formattedValue}${unit}`;
+    if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
+      unit = config.unit_system.temperature;
     }
 
     if (unit) {
-      return `${formattedValue} ${unit}`;
-    }
-
-    if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
-      return `${formattedValue} ${config.unit_system.temperature}`;
+      return `${formattedValue}${blankBeforeUnit(unit, locale)}${unit}`;
     }
 
     return formattedValue;

src/common/entity/compute_state_display.ts

@@ -3,13 +3,13 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
 import { FrontendLocaleData, TimeZone } from "../../data/translation";
 import {
-  updateIsInstallingFromAttributes,
   UPDATE_SUPPORT_PROGRESS,
+  updateIsInstallingFromAttributes,
 } from "../../data/update";
 import { HomeAssistant } from "../../types";
 import {
-  formatDuration,
   UNIT_TO_MILLISECOND_CONVERT,
+  formatDuration,
 } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
@@ -19,10 +19,10 @@ import {
   getNumberFormatOptions,
   isNumericFromAttributes,
 } from "../number/format_number";
-import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
 import { supportsFeatureFromAttributes } from "./supports-feature";
+import { blankBeforeUnit } from "../translations/blank_before_unit";
 
 export const computeStateDisplaySingleEntity = (
   localize: LocalizeFunc,
@@ -108,16 +108,20 @@ export const computeStateDisplayFromEntityAttributes = (
         // fallback to default
       }
     }
-    const unit = !attributes.unit_of_measurement
-      ? ""
-      : attributes.unit_of_measurement === "%"
-      ? blankBeforePercent(locale) + "%"
-      : ` ${attributes.unit_of_measurement}`;
-    return `${formatNumber(
+
+    const value = formatNumber(
       state,
       locale,
       getNumberFormatOptions({ state, attributes } as HassEntity, entity)
-    )}${unit}`;
+    );
+
+    const unit = attributes.unit_of_measurement;
+
+    if (unit) {
+      return `${value}${blankBeforeUnit(unit)}${unit}`;
+    }
+
+    return value;
   }
 
   const domain = computeDomain(entityId);

src/components/ha-control-number-buttons.ts

@@ -1,11 +1,19 @@
 import { mdiMinus, mdiPlus } from "@mdi/js";
-import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  TemplateResult,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { fireEvent } from "../common/dom/fire_event";
 import { conditionalClamp } from "../common/number/clamp";
 import { formatNumber } from "../common/number/format_number";
+import { blankBeforeUnit } from "../common/translations/blank_before_unit";
 import { FrontendLocaleData } from "../data/translation";
-import { fireEvent } from "../common/dom/fire_event";
 
 const A11Y_KEY_CODES = new Set([
   "ArrowRight",
@@ -34,6 +42,8 @@ export class HaControlNumberButton extends LitElement {
 
   @property({ type: Number }) public max?: number;
 
+  @property() public unit?: string;
+
   @property({ attribute: "false" })
   public formatOptions: Intl.NumberFormatOptions = {};
 
@@ -114,26 +124,28 @@ export class HaControlNumberButton extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const displayedValue =
+    const value =
       this.value != null
         ? formatNumber(this.value, this.locale, this.formatOptions)
         : "";
+    const unit = this.unit ? `${blankBeforeUnit(this.unit)}${this.unit}` : "";
 
     return html`
       <div class="container">
         <div
           id="input"
           class="value"
-          role="number-button"
+          role="spinbutton"
           .tabIndex=${this.disabled ? "-1" : "0"}
           aria-valuenow=${this.value}
+          aria-valuetext=${`${value}${unit}`}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
           aria-label=${ifDefined(this.label)}
           ?disabled=${this.disabled}
           @keydown=${this._handleKeyDown}
         >
-          ${displayedValue}
+          ${value} ${unit ? html`<span class="unit">${unit}</span>` : nothing}
         </div>
         <button
           class="button minus"
@@ -185,6 +197,8 @@ export class HaControlNumberButton extends LitElement {
         position: relative;
         width: 100%;
         height: 100%;
+        container-type: inline-size;
+        container-name: container;
       }
       .value {
         display: flex;
@@ -249,6 +263,14 @@ export class HaControlNumberButton extends LitElement {
       .button.plus {
         right: 0;
       }
+      .unit {
+        white-space: pre;
+      }
+      @container container (max-width: 100px) {
+        .unit {
+          display: none;
+        }
+      }
     `;
   }
 }

src/panels/lovelace/tile-features/hui-target-temperature-tile-feature.ts

@@ -185,6 +185,7 @@ class HuiTargetTemperatureTileFeature
             .formatOptions=${options}
             .target="value"
             .value=${this.stateObj.attributes.temperature}
+            .unit=${this.hass.config.unit_system.temperature}
             .min=${this._min}
             .max=${this._max}
             .step=${this._step}
@@ -197,6 +198,7 @@ class HuiTargetTemperatureTileFeature
               "--control-number-buttons-focus-color": stateColor,
             })}
             .disabled=${this.stateObj!.state === UNAVAILABLE}
+            .locale=${this.hass.locale}
           >
           </ha-control-number-buttons>
         </ha-control-button-group>
@@ -215,6 +217,7 @@ class HuiTargetTemperatureTileFeature
             .formatOptions=${options}
             .target=${"low"}
             .value=${this._targetTemperature.low}
+            .unit=${this.hass.config.unit_system.temperature}
             .min=${this._min}
             .max=${Math.min(
               this._max,
@@ -230,12 +233,14 @@ class HuiTargetTemperatureTileFeature
               "--control-number-buttons-focus-color": stateColor,
             })}
             .disabled=${this.stateObj!.state === UNAVAILABLE}
+            .locale=${this.hass.locale}
           >
           </ha-control-number-buttons>
           <ha-control-number-buttons
             .formatOptions=${options}
             .target=${"high"}
             .value=${this._targetTemperature.high}
+            .unit=${this.hass.config.unit_system.temperature}
             .min=${Math.max(
               this._min,
               this._targetTemperature.low ?? this._min
@@ -251,6 +256,7 @@ class HuiTargetTemperatureTileFeature
               "--control-number-buttons-focus-color": stateColor,
             })}
             .disabled=${this.stateObj!.state === UNAVAILABLE}
+            .locale=${this.hass.locale}
           >
           </ha-control-number-buttons>
         </ha-control-button-group>
@@ -261,6 +267,7 @@ class HuiTargetTemperatureTileFeature
       <ha-control-button-group>
         <ha-control-number-buttons
           .disabled=${this.stateObj!.state === UNAVAILABLE}
+          .unit=${this.hass.config.unit_system.temperature}
           .label=${this.hass.formatEntityAttributeName(
             this.stateObj,
             "temperature"
@@ -268,6 +275,7 @@ class HuiTargetTemperatureTileFeature
           style=${styleMap({
             "--control-number-buttons-focus-color": stateColor,
           })}
+          .locale=${this.hass.locale}
         >
         </ha-control-number-buttons>
       </ha-control-button-group>

yarn.lock

@@ -6616,16 +6616,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clean-css@npm:^4.2.1, clean-css@npm:^4.2.3":
-  version: 4.2.4
-  resolution: "clean-css@npm:4.2.4"
-  dependencies:
-    source-map: "npm:~0.6.0"
-  checksum: 4f64dbebfa29feb79be25d6f91239239179adc805c6d7442e2c728970ca23a75b5f238118477b4b78553b89e50f14a64fe35145ecc86b6badf971883c4ad2ffe
-  languageName: node
-  linkType: hard
-
-"clean-css@npm:~5.3.2":
+"clean-css@npm:5.3.2":
   version: 5.3.2
   resolution: "clean-css@npm:5.3.2"
   dependencies: