fix(input-message,loader): reverts breaking change (#5656)

* fix(input-message,loader): reverts breaking change

* docs(changelog): remove feature entry

CHANGELOG.md

@@ -22,7 +22,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - **alert, date-picker-month-header, input-date-picker, loader, panel:** Adds RTL equivalent CSS ([#5368](https://github.com/Esri/calcite-components/issues/5368)) ([9582c04](https://github.com/Esri/calcite-components/commit/9582c04f54da5639ae86f32f234427ca19a33e12))
 - **block:** Improve content layout ([#5473](https://github.com/Esri/calcite-components/issues/5473)) ([2cc0a5f](https://github.com/Esri/calcite-components/commit/2cc0a5f9c40236f1c628c796e3c3e69acbdc8479)), closes [#5422](https://github.com/Esri/calcite-components/issues/5422)
 - **button, fab:** Bumping the scale of icon to M when the parent Button / FAB is scale L ([#5521](https://github.com/Esri/calcite-components/issues/5521)) ([fa508e8](https://github.com/Esri/calcite-components/commit/fa508e85966a536416e61d1282288e4b1165e247))
-- **calcite-loader, calcite-input-message:** Drop active in favor of hidden ([#5537](https://github.com/Esri/calcite-components/issues/5537)) ([4cb0ea1](https://github.com/Esri/calcite-components/commit/4cb0ea11f345151a7cc356183f961097c8042ed4))
 - **date-picker:** Display correct date format order in header for zh-CN locale. ([#5534](https://github.com/Esri/calcite-components/issues/5534)) ([ef3ebf8](https://github.com/Esri/calcite-components/commit/ef3ebf8b859dfbd5b389b38f73c460bb68a178d4))
 - **date-picker:** No longer hides year for zh-CN locale ([#5344](https://github.com/Esri/calcite-components/issues/5344)) ([d10593e](https://github.com/Esri/calcite-components/commit/d10593ee12fabf0c2ec60148b07b737e2fc95e2d))
 - **date-picker-day:** Adds RTL equivalent CSS ([#5363](https://github.com/Esri/calcite-components/issues/5363)) ([98106c2](https://github.com/Esri/calcite-components/commit/98106c2287780a62aab9f74231de66310f5f3cd3))

src/components/input-message/input-message.e2e.ts

@@ -3,10 +3,7 @@ import { accessible, renders, hidden } from "../../tests/commonTests";
 import { StatusIconDefaults } from "./interfaces";
 
 describe("calcite-input-message", () => {
-  it("renders", async () => {
-    await renders(`<calcite-input-message hidden></calcite-input-message>`, { display: "none", visible: false });
-    await renders(`<calcite-input-message></calcite-input-message>`, { display: "flex", visible: true });
-  });
+  it("renders", async () => renders("calcite-input-message", { visible: false, display: "flex" }));
 
   it("honors hidden attribute", async () => hidden(`<calcite-input-message active>Text</calcite-input-message>`));
 

src/components/input-message/input-message.scss

@@ -6,24 +6,26 @@
  * @prop --calcite-input-message-spacing-value: The top margin spacing above the component.
  */
 
-:host([scale="m"]),
-:host([scale="l"]) {
+:host([active][scale="m"]),
+:host([active][scale="l"]) {
   --calcite-input-message-spacing-value: theme("spacing.1");
 }
 
 :host {
   @apply text-color-1 transition-default invisible box-border flex h-0 w-full items-center font-medium opacity-0;
 }
 
-:host {
+:host([active]) {
   @apply transition-default visible h-auto opacity-100;
 }
 
-:host([scale="m"]),
-:host([scale="l"]) {
+:host([active][scale="m"]),
+:host([active][scale="l"]) {
   margin-block-start: var(--calcite-input-message-spacing-value);
 }
 
+@include calciteHydratedHidden();
+
 .calcite-input-message-icon {
   @apply transition-default
     pointer-events-none
@@ -49,7 +51,7 @@
 }
 
 // Validation Text
-:host([status]) {
+:host([status][active]) {
   @apply text-color-1;
 }
 

src/components/input-message/input-message.tsx

@@ -26,12 +26,7 @@ export class InputMessage {
   //
   //--------------------------------------------------------------------------
 
-  /**
-   * When `true`, the component is active.
-   *
-   * @deprecated use global `hidden` attribute instead.
-   * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
-   */
+  /** When `true`, the component is active. */
   @Prop({ reflect: true }) active = false;
 
   /** Specifies an icon to display. */

src/components/loader/loader.e2e.ts

@@ -3,8 +3,8 @@ import { renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-loader", () => {
   it("renders", async () => {
-    await renders(`<calcite-loader hidden></calcite-loader>`, { display: "none", visible: false });
-    await renders(`<calcite-loader></calcite-loader>`, { display: "flex", visible: true });
+    await renders("calcite-loader", { display: "none", visible: false });
+    await renders(`<calcite-loader active></calcite-loader>`, { display: "flex", visible: true });
   });
 
   it("honors hidden attribute", async () => hidden("calcite-loader"));

src/components/loader/loader.scss

@@ -48,6 +48,10 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 }
 
 :host {
+  @apply hidden;
+}
+
+:host([active]) {
   @apply flex;
 }
 
@@ -122,7 +126,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
   vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
 }
 
-:host([inline]) {
+:host([active][inline]) {
   @apply inline-block;
 }
 

src/components/loader/loader.tsx

@@ -21,12 +21,7 @@ export class Loader {
   //
   //--------------------------------------------------------------------------
 
-  /**
-   * When `true`, the component is active.
-   *
-   * @deprecated use global `hidden` attribute instead.
-   * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
-   */
+  /** When `true`, the component is active. */
   @Prop({ reflect: true }) active = false;
 
   /** When `true`, displays smaller and appears to the left of the text. */