Rename responsive to screen

src/panels/lovelace/common/validate-condition.ts

@@ -1,7 +1,7 @@
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 
-export type Condition = StateCondition | ResponsiveCondition;
+export type Condition = StateCondition | ScreenCondition;
 
 export type LegacyCondition = {
   entity?: string;
@@ -16,8 +16,8 @@ export type StateCondition = {
   state_not?: string;
 };
 
-export type ResponsiveCondition = {
+export type ScreenCondition = {
-  condition: "responsive";
+  condition: "screen";
   media_query?: string;
 };
 
@@ -32,8 +32,8 @@ function checkStateCondition(condition: StateCondition, hass: HomeAssistant) {
     : state !== condition.state_not;
 }
 
-function checkResponsiveCondition(
+function checkScreenCondition(
-  condition: ResponsiveCondition,
+  condition: ScreenCondition,
   _hass: HomeAssistant
 ) {
   return condition.media_query
@@ -46,8 +46,8 @@ export function checkConditionsMet(
   hass: HomeAssistant
 ): boolean {
   return conditions.every((c) => {
-    if (c.condition === "responsive") {
+    if (c.condition === "screen") {
-      return checkResponsiveCondition(c, hass);
+      return checkScreenCondition(c, hass);
     }
 
     return checkStateCondition(c, hass);
@@ -61,14 +61,14 @@ function valideStateCondition(condition: StateCondition) {
   );
 }
 
-function valideResponsiveCondition(condition: ResponsiveCondition) {
+function validateScreenCondition(condition: ScreenCondition) {
   return condition.media_query != null;
 }
 
 export function validateConditionalConfig(conditions: Condition[]): boolean {
   return conditions.every((c) => {
-    if (c.condition === "responsive") {
+    if (c.condition === "screen") {
-      return valideResponsiveCondition(c);
+      return validateScreenCondition(c);
     }
     return valideStateCondition(c);
   });

src/panels/lovelace/components/hui-conditional-base.ts

@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import { ConditionalCardConfig } from "../cards/types";
 import {
-  ResponsiveCondition,
+  ScreenCondition,
   checkConditionsMet,
   validateConditionalConfig,
 } from "../common/validate-condition";
@@ -78,8 +78,8 @@ export class HuiConditionalBase extends ReactiveElement {
     }
 
     const conditions = this._config.conditions.filter(
-      (c) => c.condition === "responsive"
+      (c) => c.condition === "screen"
-    ) as ResponsiveCondition[];
+    ) as ScreenCondition[];
 
     const mediaQueries = conditions
       .filter((c) => c.media_query)

src/panels/lovelace/editor/conditions/types/ha-card-condition-screen.ts

@@ -8,7 +8,7 @@ import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import { HaFormSchema } from "../../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../../types";
-import { ResponsiveCondition } from "../../../common/validate-condition";
+import { ScreenCondition } from "../../../common/validate-condition";
 
 const BREAKPOINT_VALUES = [0, 768, 1024, 1280, Infinity];
 const BREAKPOINTS = ["mobile", "tablet", "desktop", "wide"] as const;
@@ -87,23 +87,23 @@ const mediaQueryMap = new Map(
 );
 const mediaQueryReverseMap = new Map(queries.map(([b, m]) => [m, b]));
 
-type ResponsiveConditionData = {
+type ScreenConditionData = {
   breakpoints: Breakpoint[];
 };
 
-@customElement("ha-card-condition-responsive")
+@customElement("ha-card-condition-screen")
-export class HaCardConditionResponsive extends LitElement {
+export class HaCardConditionScreen extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public condition!: ResponsiveCondition;
+  @property({ attribute: false }) public condition!: ScreenCondition;
 
   @property({ type: Boolean }) public disabled = false;
 
-  public static get defaultConfig(): ResponsiveCondition {
+  public static get defaultConfig(): ScreenCondition {
-    return { condition: "responsive", media_query: "" };
+    return { condition: "screen", media_query: "" };
   }
 
-  protected static validateUIConfig(condition: ResponsiveCondition) {
+  protected static validateUIConfig(condition: ScreenCondition) {
     return (
       !condition.media_query || mediaQueryReverseMap.get(condition.media_query)
     );
@@ -122,11 +122,11 @@ export class HaCardConditionResponsive extends LitElement {
                 return {
                   value: b,
                   label: `${localize(
-                    `ui.panel.lovelace.editor.card.conditional.condition.responsive.breakpoints_list.${b}`
+                    `ui.panel.lovelace.editor.card.conditional.condition.screen.breakpoints_list.${b}`
                   )}${
                     value
                       ? ` (${localize(
-                          `ui.panel.lovelace.editor.card.conditional.condition.responsive.min`,
+                          `ui.panel.lovelace.editor.card.conditional.condition.screen.min`,
                           { size: value }
                         )})`
                       : ""
@@ -145,7 +145,7 @@ export class HaCardConditionResponsive extends LitElement {
       ? mediaQueryReverseMap.get(this.condition.media_query)
       : undefined;
 
-    const data: ResponsiveConditionData = {
+    const data: ScreenConditionData = {
       breakpoints: breakpoints ?? [],
     };
 
@@ -163,12 +163,12 @@ export class HaCardConditionResponsive extends LitElement {
 
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    const data = ev.detail.value as ResponsiveConditionData;
+    const data = ev.detail.value as ScreenConditionData;
 
     const { breakpoints } = data;
 
-    const condition: ResponsiveCondition = {
+    const condition: ScreenCondition = {
-      condition: "responsive",
+      condition: "screen",
       media_query: mediaQueryMap.get(computeBreakpointsKey(breakpoints)) ?? "",
     };
 
@@ -181,7 +181,7 @@ export class HaCardConditionResponsive extends LitElement {
     switch (schema.name) {
       case "breakpoints":
         return this.hass.localize(
-          `ui.panel.lovelace.editor.card.conditional.condition.responsive.${schema.name}`
+          `ui.panel.lovelace.editor.card.conditional.condition.screen.${schema.name}`
         );
       default:
         return "";
@@ -191,6 +191,6 @@ export class HaCardConditionResponsive extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-card-condition-responsive": HaCardConditionResponsive;
+    "ha-card-condition-screen": HaCardConditionScreen;
   }
 }

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -34,7 +34,7 @@ import type { HuiCardElementEditor } from "../card-editor/hui-card-element-edito
 import "../card-editor/hui-card-picker";
 import "../conditions/ha-card-condition-editor";
 import { LovelaceConditionEditorConstructor } from "../conditions/types";
-import "../conditions/types/ha-card-condition-responsive";
+import "../conditions/types/ha-card-condition-screen";
 import "../conditions/types/ha-card-condition-state";
 import "../hui-element-editor";
 import type { ConfigChangedEvent } from "../hui-element-editor";
@@ -44,7 +44,7 @@ import { configElementStyle } from "./config-elements-style";
 
 const UI_CONDITION = [
   "state",
-  "responsive",
+  "screen",
 ] as const satisfies readonly Condition["condition"][];
 
 type UiCondition = (typeof UI_CONDITION)[number];
@@ -59,7 +59,7 @@ const cardConfigStruct = assign(
 
 const ICONS: Record<UiCondition, string> = {
   state: mdiStateMachine,
-  responsive: mdiResponsive,
+  screen: mdiResponsive,
 };
 @customElement("hui-conditional-card-editor")
 export class HuiConditionalCardEditor

src/translations/en.json

@@ -4771,8 +4771,8 @@
               "change_type": "Change type",
               "add_condition": "Add condition",
               "condition": {
-                "responsive": {
+                "screen": {
-                  "label": "Responsive",
+                  "label": "Screen",
                   "breakpoints": "Screen sizes",
                   "breakpoints_list": {
                     "mobile": "Mobile",