fix: ensure components are disabled consistently

src/assets/styles/includes.scss

@@ -41,3 +41,18 @@
     z-index: -1 !important;
   }
 }
+
+// mixin to provide base disabled styles for interactive components
+// additional styling can be passed via @content
+@mixin disabled() {
+  :host([disabled]) {
+    @apply cursor-default opacity-disabled pointer-events-none select-none;
+    @content;
+
+    ::slotted([calcite-hydrated][disabled]),
+    [calcite-hydrated][disabled] {
+      /* prevent opacity stacking */
+      @apply opacity-100;
+    }
+  }
+}

src/components/action/action.e2e.ts

@@ -1,12 +1,14 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, disabled, hidden, renders } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
 describe("calcite-action", () => {
   it("renders", async () => renders("calcite-action", { display: "flex" }));
 
   it("honors hidden attribute", async () => hidden("calcite-action"));
 
+  it("can be disabled", () => disabled("calcite-action"));
+
   it("should have visible text when text is enabled", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-action text="hello world" text-enabled></calcite-action>`);
@@ -99,14 +101,6 @@ describe("calcite-action", () => {
     expect(button.getAttribute("aria-label")).toBe("hi");
   });
 
-  it("should be disabled", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-action disabled></calcite-action>`);
-
-    const button = await page.find(`calcite-action >>> .${CSS.button}`);
-    expect(button).toHaveAttribute("disabled");
-  });
-
   it("should have appearance=solid", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-action text="hello world"></calcite-action>`);
@@ -119,18 +113,4 @@ describe("calcite-action", () => {
     await accessible(`<calcite-action text="hello world"></calcite-action>`);
     await accessible(`<calcite-action text="hello world" disabled text-enabled></calcite-action>`);
   });
-
-  it("should not emit click event when disabled", async () => {
-    const page = await newE2EPage();
-
-    await page.setContent(`<calcite-action text="hello world" disabled></calcite-action>`);
-
-    const action = await page.find("calcite-action");
-
-    const clickSpy = await action.spyOnEvent("click");
-
-    await action.click();
-
-    expect(clickSpy).toHaveReceivedEventTimes(0);
-  });
 });

src/components/action/action.scss

@@ -3,9 +3,7 @@
   @apply flex bg-transparent;
 }
 
-:host([disabled]) {
-  @apply pointer-events-none;
-}
+@include disabled();
 
 .button {
   @apply bg-foreground-1

src/components/action/action.tsx

@@ -16,6 +16,7 @@ import { Alignment, Appearance, Scale } from "../interfaces";
 import { CSS, TEXT } from "./resources";
 
 import { createObserver } from "../../utils/observers";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 
 /**
  * @slot - A slot for adding a `calcite-icon`.
@@ -25,7 +26,7 @@ import { createObserver } from "../../utils/observers";
   styleUrl: "action.scss",
   shadow: true
 })
-export class Action {
+export class Action implements InteractiveComponent {
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -133,6 +134,10 @@ export class Action {
     this.mutationObserver?.disconnect();
   }
 
+  componentDidRender(): void {
+    updateHostInteraction(this);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Methods

src/components/block/block.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { accessible, defaults, hidden, renders, slots } from "../../tests/commonTests";
+import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests";
 import { html } from "../../tests/utils";
 
 describe("calcite-block", () => {
@@ -43,42 +43,8 @@ describe("calcite-block", () => {
       </calcite-block>
   `));
 
-  it("can be disabled", async () => {
-    const page = await newE2EPage({
-      html: `
-        <calcite-block heading="heading" summary="summary" open collapsible>
-          <div class="content">content</div>
-        </calcite-block>
-    `
-    });
-
-    const content = await page.find(".content");
-    const clickSpy = await content.spyOnEvent("click");
-    await content.click();
-    expect(clickSpy).toHaveReceivedEventTimes(1);
-
-    const block = await page.find("calcite-block");
-    block.setProperty("disabled", true);
-    await page.waitForChanges();
-
-    // `tabindex=-1` on host removes children from the tab order
-    expect(block.getAttribute("tabindex")).toBe("-1");
-
-    await content.click();
-    expect(clickSpy).toHaveReceivedEventTimes(1);
-
-    const header = await page.find(`calcite-block >>> .${CSS.headerContainer}`);
-    const toggleSpy = await block.spyOnEvent("calciteBlockToggle");
-
-    await header.click();
-    await header.click();
-    expect(toggleSpy).toHaveReceivedEventTimes(0);
-
-    block.setAttribute("disabled", false);
-    await page.waitForChanges();
-
-    expect(block.getAttribute("tabindex")).toBeNull();
-  });
+  it("can be disabled", () =>
+    disabled(html`<calcite-block heading="heading" summary="summary" collapsible></calcite-block>`));
 
   it("has a loading state", async () => {
     const page = await newE2EPage({

src/components/block/block.scss

@@ -17,6 +17,8 @@
   flex-basis: auto;
 }
 
+@include disabled();
+
 @import "../../assets/styles/header";
 
 .header {
@@ -161,14 +163,3 @@ calcite-action-menu {
     @apply text-color-1;
   }
 }
-
-:host([disabled]) {
-  pointer-events: none;
-  user-select: none;
-
-  @apply pointer-events-none select-none;
-
-  .header-container {
-    @apply opacity-50;
-  }
-}

src/components/block/block.stories.ts

@@ -167,3 +167,9 @@ export const withHeaderControl = (): string =>
 
 export const withIconAndHeader = (): string =>
   create("calcite-block", createBlockAttributes({ exceptions: ["open", "collapsible"] }), `<div slot="icon">✅</div>`);
+
+export const disabled = (): string => html`<calcite-block heading="heading" summary="summary" open collapsible>
+  <calcite-block-section text="Nature" open>
+    <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
+  </calcite-block-section>
+</calcite-block>`;

src/components/block/block.tsx

@@ -8,6 +8,7 @@ import {
   connectConditionalSlotComponent,
   disconnectConditionalSlotComponent
 } from "../../utils/conditionalSlot";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 
 /**
  * @slot - A slot for adding content to the block.
@@ -20,7 +21,7 @@ import {
   styleUrl: "block.scss",
   shadow: true
 })
-export class Block implements ConditionalSlotComponent {
+export class Block implements ConditionalSlotComponent, InteractiveComponent {
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -92,6 +93,16 @@ export class Block implements ConditionalSlotComponent {
    */
   @Prop() summary: string;
 
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+
+  componentDidRender(): void {
+    updateHostInteraction(this);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -190,8 +201,7 @@ export class Block implements ConditionalSlotComponent {
   }
 
   render(): VNode {
-    const { collapsible, disabled, el, intlCollapse, intlExpand, loading, open, intlLoading } =
-      this;
+    const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
 
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
 
@@ -246,7 +256,7 @@ export class Block implements ConditionalSlotComponent {
     );
 
     return (
-      <Host tabIndex={disabled ? -1 : null}>
+      <Host>
         <article
           aria-busy={loading.toString()}
           class={{

src/components/button/button.e2e.ts

@@ -1,5 +1,5 @@
 import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { accessible, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
+import { accessible, disabled, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
 import { CSS } from "./resources";
 import { html, GlobalTestProps } from "../../tests/utils";
 
@@ -44,6 +44,8 @@ describe("calcite-button", () => {
 
   it("is labelable", async () => labelable("calcite-button"));
 
+  it("can be disabled", () => disabled("calcite-button"));
+
   it("should update childElType when href changes", async () => {
     const page = await newE2EPage({ html: `<calcite-button>Continue</calcite-button>` });
     const link = await page.find("calcite-button");

src/components/button/button.scss

@@ -159,9 +159,9 @@
   line-height: inherit;
 }
 
-// disabled styles
-:host([loading]),
-:host([disabled]) {
+@include disabled();
+
+:host([loading]) {
   @apply pointer-events-none;
   button,
   a {

src/components/button/button.stories.ts

@@ -1,7 +1,7 @@
 import { text, select } from "@storybook/addon-knobs";
 import { iconNames, boolean } from "../../../.storybook/helpers";
 import { themesDarkDefault } from "../../../.storybook/utils";
-import { html } from "../../tests/utils";
+import { html, placeholderImage } from "../../tests/utils";
 import readme from "./readme.md";
 
 export default {
@@ -175,3 +175,5 @@ export const RTL = (): string => html`
     ${text("text", "button text here")}
   </calcite-button>
 `;
+
+export const disabled = (): string => html`<calcite-button disabled>disabled</calcite-button>`;

src/components/button/button.tsx

@@ -6,6 +6,7 @@ import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
@@ -16,7 +17,7 @@ import { createObserver } from "../../utils/observers";
   styleUrl: "button.scss",
   shadow: true
 })
-export class Button implements LabelableComponent {
+export class Button implements LabelableComponent, InteractiveComponent {
   //--------------------------------------------------------------------------
   //
   //  Element
@@ -146,6 +147,10 @@ export class Button implements LabelableComponent {
     }
   }
 
+  componentDidRender(): void {
+    updateHostInteraction(this);
+  }
+
   render(): VNode {
     const Tag = this.childElType;
     const loaderNode = this.hasLoader ? (

src/components/checkbox/checkbox.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, focusable, formAssociated, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
+import { accessible, disabled, focusable, formAssociated, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
 
 describe("calcite-checkbox", () => {
   it("is accessible", async () =>
@@ -15,6 +15,8 @@ describe("calcite-checkbox", () => {
 
   it("is form-associated", async () => formAssociated("calcite-checkbox", { testValue: true }));
 
+  it("can be disabled", () => disabled("calcite-checkbox"));
+
   it("renders with correct default attributes", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-checkbox></calcite-checkbox>");
@@ -70,21 +72,6 @@ describe("calcite-checkbox", () => {
     expect(spy).toHaveReceivedEventTimes(0);
   });
 
-  it("does not toggle when clicked if disabled", async () => {
-    const page = await newE2EPage();
-    await page.setContent("<calcite-checkbox disabled></calcite-checkbox>");
-
-    const calciteCheckbox = await page.find("calcite-checkbox");
-
-    expect(calciteCheckbox).not.toHaveAttribute("checked");
-
-    await calciteCheckbox.click();
-
-    await page.waitForChanges();
-
-    expect(calciteCheckbox).not.toHaveAttribute("checked");
-  });
-
   it("removes the indeterminate attribute when clicked", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-checkbox indeterminate></calcite-checkbox>");

src/components/checkbox/checkbox.scss

@@ -59,8 +59,6 @@
     @include focus-box-shadow(inset 0 0 0 1px var(--calcite-ui-brand));
   }
 }
-:host([disabled]) {
-  @apply cursor-default opacity-disabled pointer-events-none;
-}
 
+@include disabled();
 @include hidden-form-input();

src/components/checkbox/checkbox.stories.ts

@@ -49,3 +49,5 @@ export const RTL = (): string => html`
     ${text("label", "Checkbox")}
   </calcite-label>
 `;
+
+export const disabled = (): string => html`<calcite-checkbox checked disabled></calcite-checkbox>`;