Add tooltip to tile sliders and more info sliders (#18567)

home-assistant · Nov 8, 2023 · bc21425 · bc21425
1 parent f2505c0
commit bc21425
Show file tree

Hide file tree

Showing 18 changed files with 269 additions and 134 deletions.
diff --git a/gallery/src/pages/components/ha-control-slider.ts b/gallery/src/pages/components/ha-control-slider.ts
@@ -9,6 +9,7 @@ const sliders: {
   id: string;
   label: string;
   mode?: "start" | "end" | "cursor";
+  unit?: string;
   class?: string;
 }[] = [
   {
@@ -31,18 +32,21 @@ const sliders: {
     label: "Slider (start mode) and custom style",
     mode: "start",
     class: "custom",
+    unit: "mm",
   },
   {
     id: "slider-end-custom",
     label: "Slider (end mode) and custom style",
     mode: "end",
     class: "custom",
+    unit: "mm",
   },
   {
     id: "slider-cursor-custom",
     label: "Slider (cursor mode) and custom style",
     mode: "cursor",
     class: "custom",
+    unit: "mm",
   },
 ];
 
@@ -93,6 +97,7 @@ export class DemoHaBarSlider extends LitElement {
                 @value-changed=${this.handleValueChanged}
                 @slider-moved=${this.handleSliderMoved}
                 aria-labelledby=${id}
+                .tooltipUnit=${config.unit}
               >
               </ha-control-slider>
             </div>
@@ -114,6 +119,7 @@ export class DemoHaBarSlider extends LitElement {
                   @value-changed=${this.handleValueChanged}
                   @slider-moved=${this.handleSliderMoved}
                   aria-label=${label}
+                  .tooltipUnit=${config.unit}
                 >
                 </ha-control-slider>
               `;

diff --git a/src/common/translations/blank_before_unit.ts b/src/common/translations/blank_before_unit.ts
@@ -0,0 +1,15 @@
+import { FrontendLocaleData } from "../../data/translation";
+import { blankBeforePercent } from "./blank_before_percent";
+
+export const blankBeforeUnit = (
+  unit: string,
+  localeOptions?: FrontendLocaleData
+): string => {
+  if (unit === "°") {
+    return "";
+  }
+  if (localeOptions && unit === "%") {
+    return blankBeforePercent(localeOptions);
+  }
+  return " ";
+};