Glue percent sign (#13458)

gallery/src/pages/lovelace/entities-card.ts

@@ -75,6 +75,10 @@ const ENTITIES = [
     timestamp: 1641801600,
     friendly_name: "Date and Time",
   }),
+  getEntity("sensor", "humidity", "23.2", {
+    friendly_name: "Humidity",
+    unit_of_measurement: "%",
+  }),
   getEntity("input_select", "dropdown", "Soda", {
     friendly_name: "Dropdown",
     options: ["Soda", "Beer", "Wine"],
@@ -142,6 +146,7 @@ const CONFIGS = [
     - light.non_existing
     - climate.ecobee
     - input_number.number
+    - sensor.humidity
     `,
   },
   {

src/common/entity/compute_state_display.ts

@@ -64,9 +64,12 @@ export const computeStateDisplayFromEntityAttributes = (
         // fallback to default
       }
     }
-    return `${formatNumber(state, locale)}${
+    const unit = !attributes.unit_of_measurement
-      attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
+      ? ""
-    }`;
+      : attributes.unit_of_measurement === "%"
+      ? "%"
+      : ` ${attributes.unit_of_measurement}`;
+    return `${formatNumber(state, locale)}${unit}`;
   }
 
   const domain = computeDomain(entityId);

src/components/ha-gauge.ts

@@ -132,7 +132,9 @@ export class Gauge extends LitElement {
             this._segment_label
               ? this._segment_label
               : this.valueText || formatNumber(this.value, this.locale)
-          } ${this._segment_label ? "" : this.label}
+          }${
+      this._segment_label ? "" : this.label === "%" ? "%" : ` ${this.label}`
+    }
         </text>
       </svg>`;
   }