fix(calcite-loader, calcite-input-message)!: drop active in favor of hidden

src/components/action/action.tsx

@@ -178,7 +178,7 @@ export class Action implements InteractiveComponent {
     const iconScale = scale === "l" ? "m" : "s";
     const loaderScale = scale === "l" ? "l" : "m";
     const calciteLoaderNode = loading ? (
-      <calcite-loader active inline label={intlLoading} scale={loaderScale} />
+      <calcite-loader inline label={intlLoading} scale={loaderScale} />
     ) : null;
     const calciteIconNode = icon ? <calcite-icon icon={icon} scale={iconScale} /> : null;
     const iconNode = calciteLoaderNode || calciteIconNode;

src/components/button/button.tsx

@@ -167,7 +167,6 @@ export class Button implements LabelableComponent, InteractiveComponent, FormOwn
     const loaderNode = this.hasLoader ? (
       <div class={CSS.buttonLoader}>
         <calcite-loader
-          active
           class={this.loading ? CSS.loadingIn : CSS.loadingOut}
           inline
           label={this.intlLoading}

src/components/card/card.tsx

@@ -105,7 +105,7 @@ export class Card implements ConditionalSlotComponent {
       <div class={{ "calcite-card-container": true, inline: thumbnailInline }}>
         {this.loading ? (
           <div class="calcite-card-loader-container">
-            <calcite-loader active label={this.intlLoading} />
+            <calcite-loader label={this.intlLoading} />
           </div>
         ) : null}
         {thumbnailStart && this.renderThumbnail()}

src/components/inline-editable/inline-editable.stories.ts

@@ -62,7 +62,6 @@ export const darkThemeRTL_TestOnly = (): string => html`
         </calcite-input>
       </calcite-inline-editable>
       <calcite-input-message
-        ${boolean("active", false, "InputMessage") && "active"}
         ${boolean("icon", false, "InputMessage") && "icon"}
         status="${select("status", ["idle", "valid", "invalid"], "idle", "InputMessage")}"
       >

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

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

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

@@ -6,26 +6,24 @@
  * @prop --calcite-input-message-spacing-value: The top margin spacing above the component.
  */
 
-:host([active][scale="m"]),
-:host([active][scale="l"]) {
+:host([scale="m"]),
+:host([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([active]) {
+:host {
   @apply transition-default visible h-auto opacity-100;
 }
 
-:host([active][scale="m"]),
-:host([active][scale="l"]) {
+:host([scale="m"]),
+:host([scale="l"]) {
   margin-block-start: var(--calcite-input-message-spacing-value);
 }
 
-@include calciteHydratedHidden();
-
 .calcite-input-message-icon {
   @apply transition-default
     pointer-events-none
@@ -51,7 +49,7 @@
 }
 
 // Validation Text
-:host([status][active]) {
+:host([status]) {
   @apply text-color-1;
 }
 

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

@@ -26,7 +26,12 @@ export class InputMessage {
   //
   //--------------------------------------------------------------------------
 
-  /** When `true`, the component is active. */
+  /**
+   * 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)
+   */
   @Prop({ reflect: true }) active = false;
 
   /** Specifies an icon to display. */

src/components/input-number/input-number.stories.ts

@@ -54,10 +54,7 @@ export const withInputMessage = (): string => html`
       placeholder="${text("placeholder", "Placeholder text", "Input")}"
     >
     </calcite-input-number>
-    <calcite-input-message
-      ${boolean("active", true)}
-      ${boolean("icon", false)}
-      icon="${select("icon", iconNames, "", "Input Message")}"
+    <calcite-input-message ${boolean("icon", false)} icon="${select("icon", iconNames, "", "Input Message")}"
       >${text("input message text", "My great input message", "Input Message")}</calcite-input-message
     >
   </div>
@@ -83,11 +80,6 @@ export const withSlottedAction = (): string => html`
     >
       <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
     </calcite-input-number>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
   </div>
 `;
 
@@ -116,9 +108,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
         placeholder="${text("placeholder", "Placeholder text")}"
       >
       </calcite-input-number>
-      <calcite-input-message
-        ${boolean("calcite-input-message-active", true)}
-        status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+      <calcite-input-message status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
         >${text("input message text", "My great input message")}</calcite-input-message
       >
     </calcite-label>

src/components/input-text/input-text.stories.ts

@@ -71,11 +71,6 @@ export const withSlottedAction = (): string => html`
     >
       <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
     </calcite-input-text>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
   </div>
 `;
 
@@ -94,9 +89,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
       placeholder="${text("placeholder", "Placeholder text")}"
     >
     </calcite-input-text>
-    <calcite-input-message
-      ${boolean("calcite-input-message-active", true)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+    <calcite-input-message status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
       >${text("input message text", "My great input message")}</calcite-input-message
     >
   </div>

src/components/input/input.stories.ts

@@ -97,11 +97,6 @@ export const withSlottedAction = (): string => html`
     >
       <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
     </calcite-input>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
   </div>
 `;
 
@@ -117,9 +112,7 @@ export const textarea = (): string => html`
       placeholder="${text("placeholder", "Placeholder text")}"
     >
     </calcite-input>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+    <calcite-input-message status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
       >${text("input message text", "My great input message")}</calcite-input-message
     >
   </div>
@@ -157,9 +150,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
         placeholder="${text("placeholder", "Placeholder text")}"
       >
       </calcite-input>
-      <calcite-input-message
-        ${boolean("calcite-input-message-active", true)}
-        status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+      <calcite-input-message status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
         >${text("input message text", "My great input message")}</calcite-input-message
       >
     </calcite-label>

src/components/loader/loader.e2e.ts

@@ -3,15 +3,14 @@ import { renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-loader", () => {
   it("renders", async () => {
-    await renders("calcite-loader", { display: "none", visible: false });
-    await renders(`<calcite-loader active></calcite-loader>`, { display: "flex", visible: true });
+    await renders(`<calcite-loader></calcite-loader>`, { display: "flex", visible: true });
   });
 
   it("honors hidden attribute", async () => hidden("calcite-loader"));
 
   it("displays label from text prop", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-loader active text="testing"></calcite-loader>`);
+    await page.setContent(`<calcite-loader text="testing"></calcite-loader>`);
     const elm = await page.find("calcite-loader >>> .loader__text");
     expect(elm).toEqualText("testing");
   });
@@ -41,14 +40,14 @@ describe("calcite-loader", () => {
 
   it("displays inline with text from inline prop", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-loader active inline></calcite-loader>`);
+    await page.setContent(`<calcite-loader inline></calcite-loader>`);
     const rect = await page.find("calcite-loader >>> circle");
     expect(rect).toEqualAttribute("r", "7.2");
   });
 
   it("sets a default id when none is provided", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-loader active></calcite-loader>`);
+    await page.setContent(`<calcite-loader></calcite-loader>`);
     const loader = await page.find("calcite-loader");
     expect(loader).toHaveAttribute("id");
     expect(loader.getAttribute("id").length).toEqual(36);

src/components/loader/loader.scss

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

src/components/loader/loader.tsx

@@ -21,7 +21,12 @@ export class Loader {
   //
   //--------------------------------------------------------------------------
 
-  /** When `true`, the component is active. */
+  /**
+   * 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)
+   */
   @Prop({ reflect: true }) active = false;
 
   /** When `true`, displays smaller and appears to the left of the text. */

src/components/loader/readme.md

@@ -6,42 +6,33 @@ The `calcite-loader` component can act as a determinate or indeterminate loading
 
 ## Usage
 
-### Basic
-
-You can use the `active` attribute to toggle visibility:
-
-```html
-<calcite-loader text="Fetching data..." active></calcite-loader>
-```
-
 ### Compact
 
 For instances when you don't have room for the full loader, you can use the smaller `inline` version of the loader. The inline version is meant to sit to the left of text:
 
 ```html
-<p><calcite-loader active inline></calcite-loader> Inline loader</p>
+<p><calcite-loader inline></calcite-loader> Inline loader</p>
 ```
 
 ### Determinate
 
 If you can calculate your progress, it's best to use the determinate version of the loader. Update the `value` of the element when progress is made. This will display a progress bar along the perimeter of the loader showing 32% complete:
 
 ```html
-<calcite-loader type="determinate" value="32" active></calcite-loader>
+<calcite-loader type="determinate" value="32"></calcite-loader>
 ```
 
 ## Properties
 
-| Property             | Attribute    | Description                                                                                                                                          | Type                               | Default     |
-| -------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- |
-| `active`             | `active`     | When `true`, the component is active.                                                                                                                | `boolean`                          | `false`     |
-| `inline`             | `inline`     | When `true`, displays smaller and appears to the left of the text.                                                                                   | `boolean`                          | `false`     |
-| `label` _(required)_ | `label`      | Accessible name for the component.                                                                                                                   | `string`                           | `undefined` |
-| `noPadding`          | `no-padding` | <span style="color:red">**[DEPRECATED]**</span> Use `--calcite-loader-padding` CSS variable instead.<br/><br/>Disables spacing around the component. | `boolean`                          | `false`     |
-| `scale`              | `scale`      | Specifies the size of the component.                                                                                                                 | `"l" \| "m" \| "s"`                | `"m"`       |
-| `text`               | `text`       | Text that displays under the component's indicator.                                                                                                  | `string`                           | `""`        |
-| `type`               | `type`       | Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible.                                                  | `"determinate" \| "indeterminate"` | `undefined` |
-| `value`              | `value`      | The component's value. Valid only for `"determinate"` indicators. Percent complete of 100.                                                           | `number`                           | `0`         |
+| Property | Attribute | Description | Type | Default |
+| -------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- | | `boolean` | `false` |
+| `inline` | `inline` | When `true`, displays smaller and appears to the left of the text. | `boolean` | `false` |
+| `label` _(required)_ | `label` | Accessible name for the component. | `string` | `undefined` |
+| `noPadding` | `no-padding` | <span style="color:red">**[DEPRECATED]**</span> Use `--calcite-loader-padding` CSS variable instead.<br/><br/>Disables spacing around the component. | `boolean` | `false` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `text` | `text` | Text that displays under the component's indicator. | `string` | `""` |
+| `type` | `type` | Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. | `"determinate" \| "indeterminate"` | `undefined` |
+| `value` | `value` | The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. | `number` | `0` |
 
 ## CSS Custom Properties
 

src/components/loader/usage/Compact.md

@@ -1,5 +1,5 @@
 For instances when you don't have room for the full loader, you can use the smaller `inline` version of the loader. The inline version is meant to sit to the left of text:
 
 ```html
-<p><calcite-loader active inline></calcite-loader> Inline loader</p>
+<p><calcite-loader inline></calcite-loader> Inline loader</p>
 ```

src/components/scrim/scrim.tsx

@@ -46,7 +46,7 @@ export class Scrim {
   render(): VNode {
     const { el, loading, intlLoading } = this;
     const hasContent = el.innerHTML.trim().length > 0;
-    const loaderNode = loading ? <calcite-loader active label={intlLoading} /> : null;
+    const loaderNode = loading ? <calcite-loader label={intlLoading} /> : null;
     const contentNode = hasContent ? (
       <div class={CSS.content}>
         <slot />

src/custom-theme.md

@@ -9,7 +9,7 @@ Developers building Esri applications are encouraged to use the default theme as
   }
 </style>
 <div class="my-theme">
-  <calcite-loader active>
+  <calcite-loader>
 </div>
 ```