fix: ensure components are disabled consistently

.storybook/utils.tsx

@@ -139,3 +139,78 @@ export const filterComponentAttributes = (
  .filter((attr) => !exceptions.find((except) => except === attr.name))
  .map((attr) => attr.commit());
 };
+
+/*
+MIT License
+
+Copyright (c) 2020 Cloud Four
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+https:/cloudfour/simple-svg-placeholder
+*/
+
+interface SimpleSvgPlaceholderParams {
+ width?: number;
+ height?: number;
+ text?: string;
+ fontFamily?: string;
+ fontWeight?: string;
+ fontSize?: number;
+ dy?: number;
+ bgColor?: string;
+ textColor?: string;
+ dataUri?: boolean;
+ charset?: string;
+}
+
+export function placeholderImage({
+ width = 300,
+ height = 150,
+ text = `${width}×${height}`,
+ fontFamily = "sans-serif",
+ fontWeight = "bold",
+ fontSize = Math.floor(Math.min(width, height) * 0.2),
+ dy = fontSize * 0.35,
+ bgColor = "#ddd",
+ textColor = "rgba(0,0,0,0.5)",
+ dataUri = true,
+ charset = "UTF-8"
+}: SimpleSvgPlaceholderParams): string {
+ const str = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+ <rect fill="${bgColor}" width="${width}" height="${height}"/>
+ <text fill="${textColor}" font-family="${fontFamily}" font-size="${fontSize}" dy="${dy}" font-weight="${fontWeight}" x="50%" y="50%" text-anchor="middle">${text}</text>
+ </svg>`;
+
+ // Thanks to: filamentgroup/directory-encoder
+ const cleaned = str
+ .replace(/[\t\n\r]/gim, "") // Strip newlines and tabs
+ .replace(/\s\s+/g, " ") // Condense multiple spaces
+ .replace(/'/gim, "\\i"); // Normalize quotes
+
+ if (dataUri) {
+ const encoded = encodeURIComponent(cleaned)
+ .replace(/\(/g, "%28") // Encode brackets
+ .replace(/\)/g, "%29");
+
+ return `data:image/svg+xml;charset=${charset},${encoded}`;
+ }
+
+ return cleaned;
+}

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 opacity-disabled pointer-events-none cursor-default select-none;
+ @content;
+
+ ::slotted([calcite-hydrated][disabled]),
+ [calcite-hydrated][disabled] {
+ /* prevent opacity stacking */
+ @apply opacity-100;
+ }
+ }
+}

src/components/accordion/accordion.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, renders } from "../../tests/commonTests";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 describe("calcite-accordion", () => {
  const accordionContent = `

src/components/accordion/accordion.stories.ts

@@ -3,15 +3,15 @@ import {
  Attributes,
  filterComponentAttributes,
  createComponentHTML as create,
- themesDarkDefault
+ themesDarkDefault,
+ placeholderImage
 } from "../../../.storybook/utils";
-import { html } from "../../tests/utils";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 import { iconNames } from "../../../.storybook/helpers";
 import { select, text } from "@storybook/addon-knobs";
 import accordionReadme from "./readme.md";
 import accordionItemReadme from "../accordion-item/readme.md";
-import { placeholderImage } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 const createAccordionAttributes: (options?: { exceptions: string[] }) => Attributes = (
  { exceptions } = { exceptions: [] }

src/components/action-bar/action-bar.e2e.ts

@@ -2,7 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
 import { overflowActionsDebounceInMs } from "./utils";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 describe("calcite-action-bar", () => {
  it("renders", async () => renders("calcite-action-bar", { display: "inline-flex" }));

src/components/action-bar/action-bar.stories.ts

@@ -8,7 +8,7 @@ import {
 } from "../../../.storybook/utils";
 import readme from "./readme.md";
 import { ATTRIBUTES } from "../../../.storybook/resources";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 import { TEXT } from "./resources";
 
 export default {

src/components/action-group/action-group.stories.ts

@@ -1,7 +1,7 @@
 import { select, text } from "@storybook/addon-knobs";
 import { iconNames } from "../../../.storybook/helpers";
 import readme from "./readme.md";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 export default {
  title: "Components/Action Group",

src/components/action-menu/action-menu.e2e.ts

@@ -1,7 +1,7 @@
 import { accessible, hidden, renders, defaults, reflects, focusable, slots } from "../../tests/commonTests";
 import { newE2EPage } from "@stencil/core/testing";
 import { SLOTS, CSS } from "./resources";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 describe("calcite-action-menu", () => {
  it("renders", async () => renders("calcite-action-menu", { display: "flex" }));

src/components/action-pad/action-pad.e2e.ts

@@ -1,7 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 describe("calcite-action-pad", () => {
  it("renders", async () => renders("calcite-action-pad", { display: "block" }));

src/components/action-pad/action-pad.stories.ts

@@ -8,7 +8,7 @@ import {
 } from "../../../.storybook/utils";
 import readme from "./readme.md";
 import { ATTRIBUTES } from "../../../.storybook/resources";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 import { TEXT } from "./resources";
 
 export default {

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.stories.ts

@@ -6,7 +6,7 @@ import {
  createComponentHTML as create
 } from "../../../.storybook/utils";
 import readme from "./readme.md";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 import { createSteps, iconNames, stepStory, setTheme, setKnobs } from "../../../.storybook/helpers";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 const { alignment, scale } = ATTRIBUTES;

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/alert/alert.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { renders, accessible, HYDRATED_ATTR } from "../../tests/commonTests";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 describe("calcite-alert", () => {
  const alertContent = `

src/components/alert/alert.stories.ts

@@ -2,7 +2,7 @@ import { select } from "@storybook/addon-knobs";
 import { boolean, iconNames } from "../../../.storybook/helpers";
 import { themesDarkDefault } from "../../../.storybook/utils";
 import readme from "./readme.md";
-import { html } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 export default {
  title: "Components/Alert",

src/components/avatar/avatar.stories.ts

@@ -1,7 +1,7 @@
 import { select, text } from "@storybook/addon-knobs";
 
-import { themesDarkDefault } from "../../../.storybook/utils";
-import { html, placeholderImage } from "../../tests/utils";
+import { placeholderImage, themesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
 import readme from "./readme.md";
 
 export default {

src/components/block/block.e2e.ts

@@ -1,7 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { accessible, defaults, hidden, renders, slots } from "../../tests/commonTests";
-import { html } from "../../tests/utils";
+import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 
 describe("calcite-block", () => {
  it("renders", async () => renders("calcite-block", { display: "flex" }));
@@ -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;
- }
-}