@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-13-3 {
+._10kgnsa0-3-14-1 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-13-3);
-  box-shadow: var(--_bx32h4-3-13-3);
-  color: var(--_bx32h0-3-13-3);
+  background: var(--_bx32h3-3-14-1);
+  box-shadow: var(--_bx32h4-3-14-1);
+  color: var(--_bx32h0-3-14-1);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-13-3 {
+._10kgnsa1-3-14-1 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-13-3 {
+._10kgnsa2-3-14-1 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-13-3 {
+._10kgnsa3-3-14-1 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-13-3 {
+._10kgnsa4-3-14-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-13-3 {
+._10kgnsa5-3-14-1 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-13-3 {
+._10kgnsa6-3-14-1 {
   width: 100%;
 }
-._10kgnsa7-3-13-3 {
+._10kgnsa7-3-14-1 {
   width: fit-content;
 }
-._10kgnsa8-3-13-3 {
+._10kgnsa8-3-14-1 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-13-3 ._10kgnsa9-3-13-3:not(:has(svg:only-child)) {
+._10kgnsa3-3-14-1 ._10kgnsa9-3-14-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-13-3 ._10kgnsa9-3-13-3:not(:has(svg:only-child)) {
+._10kgnsa4-3-14-1 ._10kgnsa9-3-14-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-13-3 {
+._10kgnsab-3-14-1 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/esm/buttons/button/Button.spec.js

@@ -0,0 +1,463 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { fireEvent, getByText, screen } from "@testing-library/react";
+import userEvent, {
+  PointerEventsCheckLevel
+} from "@testing-library/user-event";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@dynatrace/strato-components-testing/vitest";
+import { Button } from "./Button.js";
+const TestMarkup = () => /* @__PURE__ */ jsxs(Button, { children: [
+  /* @__PURE__ */ jsx(Button.Prefix, { children: "Prefix" }),
+  /* @__PURE__ */ jsx(Button.Suffix, { children: "Suffix" }),
+  /* @__PURE__ */ jsx(Button.Label, { children: "Label" })
+] });
+const textItems = ["Label", "Suffix", "Prefix"];
+describe("Button", () => {
+  describe("Basic functionality", () => {
+    it("should render children", () => {
+      const { container } = render(/* @__PURE__ */ jsx(Button, { children: "Sample" }));
+      expect(getByText(container, "Sample")).toBeTruthy();
+    });
+    it("should apply an aria-label", () => {
+      render(/* @__PURE__ */ jsx(Button, { "aria-label": "My label", children: "Sample" }));
+      expect(screen.getByRole("button", { name: "My label" })).toBeTruthy();
+    });
+    it("should set data-dtrum on the root level of the component", () => {
+      render(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { "data-testid": "dtrum", "data-dtrum-mask": true, "data-dtrum-allow": true, children: "Sample" }),
+          /* @__PURE__ */ jsx(Button, { "data-testid": "no-dtrum", children: "Sample" })
+        ] })
+      );
+      expect(screen.getByTestId("dtrum")).toHaveAttribute("data-dtrum-mask");
+      expect(screen.getByTestId("dtrum")).toHaveAttribute("data-dtrum-allow");
+      expect(screen.getByTestId("no-dtrum")).not.toHaveAttribute(
+        "data-dtrum-mask"
+      );
+      expect(screen.getByTestId("no-dtrum")).not.toHaveAttribute(
+        "data-dtrum-allow"
+      );
+    });
+    it("should render children in each slot", () => {
+      const { getByText: getByText2 } = render(/* @__PURE__ */ jsx(TestMarkup, {}));
+      for (const textItem of textItems) {
+        expect(getByText2(textItem)).toBeTruthy();
+      }
+    });
+    it("should not submit a form", async () => {
+      const onSubmit = vi.fn((e) => e.preventDefault());
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsx(Button, { children: "Submit" }) })
+      );
+      await userEvent.click(getByRole("button", { name: "Submit" }));
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+    it("should not reset a form", async () => {
+      const onReset = vi.fn((e) => e.preventDefault());
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx("form", { onReset, children: /* @__PURE__ */ jsx(Button, { children: "Reset" }) })
+      );
+      await userEvent.click(getByRole("button", { name: "Reset" }));
+      expect(onReset).not.toHaveBeenCalled();
+    });
+    it("should submit a form", () => {
+      const onSubmit = vi.fn((e) => e.preventDefault());
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Submit" }) })
+      );
+      fireEvent.click(getByRole("button", { name: "Submit" }));
+      expect(onSubmit).toHaveBeenCalled();
+    });
+    it("should reset a form", async () => {
+      const onReset = vi.fn((e) => e.preventDefault());
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx("form", { onReset, children: /* @__PURE__ */ jsx(Button, { type: "reset", children: "Reset" }) })
+      );
+      fireEvent.click(getByRole("button", { name: "Reset" }));
+      expect(onReset).toHaveBeenCalled();
+    });
+    it("should aria-disable the button, mark it busy, and show the progress circle when loading is set to true", async () => {
+      const onClick = vi.fn(() => null);
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx(Button, { onClick, loading: true, children: "Sample" })
+      );
+      const button = screen.getByRole("button");
+      await userEvent.click(button);
+      expect(getByRole("progressbar")).toBeTruthy();
+      expect(button).not.toHaveAttribute("disabled");
+      expect(button).toHaveAttribute("aria-disabled", "true");
+      expect(button).toHaveAttribute("aria-busy", "true");
+      expect(onClick).not.toHaveBeenCalled();
+    });
+    it("should not disable the button or show the progress circle when loading is set to false", async () => {
+      const onClick = vi.fn(() => null);
+      const { queryByRole } = render(
+        /* @__PURE__ */ jsx(Button, { onClick, loading: false, children: "Sample" })
+      );
+      const button = screen.getByRole("button");
+      await userEvent.click(button);
+      expect(queryByRole("progressbar")).toBeFalsy();
+      expect(button).not.toHaveAttribute("disabled");
+      expect(onClick).toHaveBeenCalled();
+    });
+    it("should not disable the button or show the progress circle when loading is not set", async () => {
+      const onClick = vi.fn(() => null);
+      const { queryByRole } = render(/* @__PURE__ */ jsx(Button, { onClick, children: "Sample" }));
+      const button = screen.getByRole("button");
+      await userEvent.click(button);
+      expect(queryByRole("progressbar")).toBeFalsy();
+      expect(button).not.toHaveAttribute("disabled");
+      expect(onClick).toHaveBeenCalled();
+    });
+    it("should not trigger the onClick callback when disabled", async () => {
+      const onClick = vi.fn(() => null);
+      const { queryByRole } = render(
+        /* @__PURE__ */ jsx(Button, { onClick, disabled: true, children: "Sample" })
+      );
+      const button = screen.getByRole("button");
+      await userEvent.click(button, {
+        pointerEventsCheck: PointerEventsCheckLevel.Never
+      });
+      expect(queryByRole("progressbar")).toBeFalsy();
+      expect(button).toHaveAttribute("disabled");
+      expect(onClick).not.toHaveBeenCalled();
+    });
+    it("should not trigger the focus handler when disabled and not show the loading icon if it's not loading", async () => {
+      const onFocus = vi.fn(() => null);
+      const { queryByRole } = render(
+        /* @__PURE__ */ jsx(Button, { onFocus, disabled: true, children: "Sample" })
+      );
+      await userEvent.tab();
+      expect(queryByRole("progressbar")).toBeFalsy();
+      expect(onFocus).not.toHaveBeenCalled();
+    });
+    it("should the number 0 as child", () => {
+      const { container } = render(/* @__PURE__ */ jsx(Button, { children: "0" }));
+      expect(getByText(container, "0")).toBeTruthy();
+    });
+  });
+  it("should not trigger the onClick callback when loading and the button is disabled", async () => {
+    const onClick = vi.fn(() => null);
+    const { getByRole } = render(
+      /* @__PURE__ */ jsx(Button, { onClick, loading: true, disabled: true, children: "Sample" })
+    );
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+    expect(getByRole("progressbar")).toBeTruthy();
+    expect(button).toHaveAttribute("disabled");
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  it("should not trigger the onClick callback when loading and the button in not disabled", async () => {
+    const onClick = vi.fn(() => null);
+    const { getByRole } = render(
+      /* @__PURE__ */ jsx(Button, { onClick, loading: true, disabled: false, children: "Sample" })
+    );
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+    expect(getByRole("progressbar")).toBeTruthy();
+    expect(button).not.toHaveAttribute("disabled");
+    expect(button).toHaveAttribute("aria-disabled", "true");
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  it("should trigger the focus handler when loading (button stays in tab order)", async () => {
+    const onFocus = vi.fn(() => null);
+    const { getByRole } = render(
+      /* @__PURE__ */ jsx(Button, { onFocus, loading: true, children: "Sample" })
+    );
+    await userEvent.keyboard("{Tab}");
+    expect(getByRole("progressbar")).toBeTruthy();
+    expect(onFocus).toHaveBeenCalled();
+  });
+  it("should trigger the focus handler when loading and aria-disabled is explicitly set", async () => {
+    const onFocus = vi.fn(() => null);
+    const { getByRole } = render(
+      /* @__PURE__ */ jsx(Button, { onFocus, loading: true, "aria-disabled": true, children: "Sample" })
+    );
+    await userEvent.keyboard("{Tab}");
+    expect(getByRole("progressbar")).toBeTruthy();
+    expect(onFocus).toHaveBeenCalled();
+  });
+  it("should trigger the focus handler when loading and disabled is explicitly false", async () => {
+    const onFocus = vi.fn(() => null);
+    const { getByRole } = render(
+      /* @__PURE__ */ jsx(Button, { onFocus, loading: true, disabled: false, children: "Sample" })
+    );
+    await userEvent.keyboard("{Tab}");
+    expect(getByRole("progressbar")).toBeTruthy();
+    expect(onFocus).toHaveBeenCalled();
+  });
+  describe("Polymorphing", () => {
+    it("should render as an anchor with an href", () => {
+      render(
+        /* @__PURE__ */ jsx(Button, { as: "a", href: "https://www.dynatrace.com", children: "Sample" })
+      );
+      const anchor = screen.getByRole("link");
+      expect(anchor).toBeTruthy();
+      expect(anchor.tagName).toEqual("A");
+      expect(anchor.getAttribute("href")).toEqual("https://www.dynatrace.com");
+    });
+    it("should render as a div", () => {
+      render(
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Polymorphic div",
+            as: "div",
+            variant: "accent",
+            color: "primary",
+            children: [
+              "<div>",
+              " tag instead"
+            ]
+          }
+        )
+      );
+      const div = screen.getByLabelText("Polymorphic div");
+      expect(div).toBeTruthy();
+      expect(div.textContent).toEqual("<div> tag instead");
+      expect(div.tagName).toEqual("DIV");
+    });
+    it("should render as an input", () => {
+      render(
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: "input",
+            variant: "accent",
+            color: "primary",
+            value: "Add to favorites"
+          }
+        )
+      );
+      const input = document.getElementsByTagName("input");
+      expect(input.length).toEqual(1);
+      expect(input[0].value).toEqual("Add to favorites");
+    });
+    it("should render as a custom React component", () => {
+      const Link = ({ children, to, ...remainingProps }) => /* @__PURE__ */ jsx("a", { href: to, ...remainingProps, children });
+      render(
+        /* @__PURE__ */ jsx(Button, { as: Link, to: "https://www.dynatrace.com", children: "Sample" })
+      );
+      const anchor = screen.getByRole("link");
+      expect(anchor).toBeTruthy();
+      expect(anchor.tagName).toEqual("A");
+      expect(anchor.getAttribute("href")).toEqual("https://www.dynatrace.com");
+    });
+    it("should not trigger click when disabled", () => {
+      const onClick = vi.fn(() => null);
+      render(
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: "a",
+            href: "https://www.dynatrace.com",
+            onClick,
+            disabled: true,
+            children: "Sample"
+          }
+        )
+      );
+      const button = screen.getByRole("link");
+      expect(
+        async () => await userEvent.click(button, { pointerEventsCheck: 0 })
+      );
+      expect(onClick).not.toHaveBeenCalled();
+    });
+    it.skip("should not apply the type attribute when rendered as anchor", () => {
+      render(
+        /* @__PURE__ */ jsx(Button, { as: "a", href: "https://www.dynatrace.com", children: "Sample" })
+      );
+      const anchor = screen.getByRole("link");
+      expect(anchor.getAttribute("type")).toBeNull();
+    });
+  });
+  describe("forwardRef", () => {
+    it("should forward the ref to the underlying button component", () => {
+      const ref = createRef();
+      render(/* @__PURE__ */ jsx(Button, { ref, children: "Sample" }));
+      expect(screen.getByRole("button")).toEqual(ref.current);
+    });
+  });
+  describe("behavior tracking attributes", () => {
+    it("should add data-dt-* attributes to the button", () => {
+      render(
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-dt-content": "tracking",
+            "data-dt-name": "MyButton",
+            "data-dt-children-name": "ButtonChildren",
+            children: "Sample"
+          }
+        )
+      );
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("data-dt-content", "tracking");
+      expect(button).toHaveAttribute("data-dt-name", "MyButton");
+      expect(button).toHaveAttribute("data-dt-children-name", "ButtonChildren");
+    });
+    describe("data-dt-component", () => {
+      it("should forward the data-dt-component to the underlying button component", () => {
+        const componentName = "ButtonComponent";
+        render(/* @__PURE__ */ jsx(Button, { "data-dt-component": componentName, children: "Sample" }));
+        const button = screen.getByRole("button");
+        expect(button).toHaveAttribute("data-dt-component", componentName);
+      });
+      it("should have the default data-dt-component attribute", () => {
+        render(/* @__PURE__ */ jsx(Button, { children: "Sample" }));
+        const button = screen.getByRole("button");
+        expect(button).toHaveAttribute("data-dt-component", "Button");
+      });
+    });
+    it("should add data-dt-* attributes to Button.Label", () => {
+      render(
+        /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
+          Button.Label,
+          {
+            "data-testid": "label",
+            "data-dt-name": "MyLabel",
+            "data-dt-features": "Feature1",
+            "data-dt-properties": "key=value",
+            children: "Sample"
+          }
+        ) })
+      );
+      const label = screen.getByTestId("label");
+      expect(label).toHaveAttribute("data-dt-name", "MyLabel");
+      expect(label).toHaveAttribute("data-dt-features", "Feature1");
+      expect(label).toHaveAttribute("data-dt-properties", "key=value");
+    });
+    it("should add data-dt-* attributes to Button.Prefix", () => {
+      render(
+        /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
+          Button.Prefix,
+          {
+            "data-testid": "prefix",
+            "data-dt-name": "MyPrefix",
+            "data-dt-features": "Feature1",
+            "data-dt-properties": "key=value",
+            children: "Icon"
+          }
+        ) })
+      );
+      const prefix = screen.getByTestId("prefix");
+      expect(prefix).toHaveAttribute("data-dt-name", "MyPrefix");
+      expect(prefix).toHaveAttribute("data-dt-features", "Feature1");
+      expect(prefix).toHaveAttribute("data-dt-properties", "key=value");
+    });
+    it("should add data-dt-* attributes to Button.Suffix", () => {
+      render(
+        /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
+          Button.Suffix,
+          {
+            "data-testid": "suffix",
+            "data-dt-name": "MySuffix",
+            "data-dt-features": "Feature1",
+            "data-dt-properties": "key=value",
+            children: "Badge"
+          }
+        ) })
+      );
+      const suffix = screen.getByTestId("suffix");
+      expect(suffix).toHaveAttribute("data-dt-name", "MySuffix");
+      expect(suffix).toHaveAttribute("data-dt-features", "Feature1");
+      expect(suffix).toHaveAttribute("data-dt-properties", "key=value");
+    });
+  });
+  describe("loading", () => {
+    it("should set aria-busy when loading", () => {
+      render(/* @__PURE__ */ jsx(Button, { loading: true, children: "Sample" }));
+      expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
+    });
+    it("should not set aria-busy when loading is false", () => {
+      render(/* @__PURE__ */ jsx(Button, { loading: false, children: "Sample" }));
+      expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "false");
+    });
+    it("should not set aria-busy when loading is not set", () => {
+      render(/* @__PURE__ */ jsx(Button, { children: "Sample" }));
+      expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "false");
+    });
+    it("should not set aria-busy when only disabled", () => {
+      render(/* @__PURE__ */ jsx(Button, { disabled: true, children: "Sample" }));
+      expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "false");
+    });
+  });
+  describe("disabled", () => {
+    it("should not trigger onClick callback when disabled", async () => {
+      const onClick = vi.fn();
+      render(
+        /* @__PURE__ */ jsx(Button, { disabled: true, onClick, children: "Sample" })
+      );
+      const button = screen.getByRole("button");
+      await userEvent.click(button);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+    it("should not propagate onPointerDown events when disabled", async () => {
+      const onPointerDown = vi.fn();
+      render(
+        /* @__PURE__ */ jsx("span", { onPointerDown, children: /* @__PURE__ */ jsx(Button, { disabled: true, onClick: onPointerDown, children: "Sample" }) })
+      );
+      const button = screen.getByRole("button");
+      await userEvent.click(button);
+      expect(onPointerDown).not.toHaveBeenCalled();
+    });
+    it("should not propagate onPointerUp events when disabled", async () => {
+      const onPointerUp = vi.fn();
+      render(
+        /* @__PURE__ */ jsx("span", { onPointerUp, children: /* @__PURE__ */ jsx(Button, { disabled: true, onClick: onPointerUp, children: "Sample" }) })
+      );
+      const button = screen.getByRole("button");
+      await userEvent.click(button);
+      expect(onPointerUp).not.toHaveBeenCalled();
+    });
+  });
+  describe("className & style", () => {
+    it("should add consumer class names and styles", () => {
+      render(
+        /* @__PURE__ */ jsxs(Button, { className: "test", style: { backgroundColor: "khaki" }, children: [
+          /* @__PURE__ */ jsx(
+            Button.Prefix,
+            {
+              className: "test",
+              style: { backgroundColor: "khaki" },
+              "data-testid": "button-prefix",
+              children: "x"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button.Label,
+            {
+              className: "test",
+              style: { backgroundColor: "khaki" },
+              "data-testid": "button-label",
+              children: "test"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button.Suffix,
+            {
+              className: "test",
+              style: { backgroundColor: "khaki" },
+              "data-testid": "button-suffix",
+              children: "y"
+            }
+          )
+        ] })
+      );
+      const root = screen.getByRole("button");
+      expect(root).toHaveClass("test");
+      expect(root).toHaveStyle("background-color: rgb(240, 230, 140)");
+      const prefix = screen.getByTestId("button-prefix");
+      expect(prefix).toHaveClass("test");
+      expect(prefix).toHaveStyle("background-color: rgb(240, 230, 140)");
+      const label = screen.getByTestId("button-label");
+      expect(label).toHaveClass("test");
+      expect(label).toHaveStyle("background-color: rgb(240, 230, 140)");
+      const suffix = screen.getByTestId("button-suffix");
+      expect(suffix).toHaveClass("test");
+      expect(suffix).toHaveStyle("background-color: rgb(240, 230, 140)");
+    });
+  });
+});
+//# sourceMappingURL=Button.spec.js.map

package/esm/buttons/button/Button.spec.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/buttons/button/Button.spec.tsx"],
+  "sourcesContent": ["import { fireEvent, getByText, screen } from '@testing-library/react';\nimport userEvent, {\n  PointerEventsCheckLevel,\n} from '@testing-library/user-event';\nimport { createRef } from 'react';\nimport { describe, expect, it, vi } from 'vitest';\n\nimport { render } from '@dynatrace/strato-components-testing/vitest';\n\nimport { Button } from './Button.js';\n\nconst TestMarkup = () => (\n  <Button>\n    <Button.Prefix>Prefix</Button.Prefix>\n    <Button.Suffix>Suffix</Button.Suffix>\n    <Button.Label>Label</Button.Label>\n  </Button>\n);\n\nconst textItems = ['Label', 'Suffix', 'Prefix'];\n\ndescribe('Button', () => {\n  describe('Basic functionality', () => {\n    it('should render children', () => {\n      const { container } = render(<Button>Sample</Button>);\n\n      expect(getByText(container, 'Sample')).toBeTruthy();\n    });\n\n    it('should apply an aria-label', () => {\n      render(<Button aria-label=\"My label\">Sample</Button>);\n      expect(screen.getByRole('button', { name: 'My label' })).toBeTruthy();\n    });\n\n    it('should set data-dtrum on the root level of the component', () => {\n      render(\n        <>\n          <Button data-testid=\"dtrum\" data-dtrum-mask data-dtrum-allow>\n            Sample\n          </Button>\n          <Button data-testid=\"no-dtrum\">Sample</Button>\n        </>,\n      );\n\n      expect(screen.getByTestId('dtrum')).toHaveAttribute('data-dtrum-mask');\n      expect(screen.getByTestId('dtrum')).toHaveAttribute('data-dtrum-allow');\n      expect(screen.getByTestId('no-dtrum')).not.toHaveAttribute(\n        'data-dtrum-mask',\n      );\n      expect(screen.getByTestId('no-dtrum')).not.toHaveAttribute(\n        'data-dtrum-allow',\n      );\n    });\n\n    it('should render children in each slot', () => {\n      const { getByText } = render(<TestMarkup />);\n\n      for (const textItem of textItems) {\n        expect(getByText(textItem)).toBeTruthy();\n      }\n    });\n\n    it('should not submit a form', async () => {\n      const onSubmit = vi.fn((e) => e.preventDefault());\n      const { getByRole } = render(\n        <form onSubmit={onSubmit}>\n          <Button>Submit</Button>\n        </form>,\n      );\n      await userEvent.click(getByRole('button', { name: 'Submit' }));\n      expect(onSubmit).not.toHaveBeenCalled();\n    });\n\n    it('should not reset a form', async () => {\n      const onReset = vi.fn((e) => e.preventDefault());\n      const { getByRole } = render(\n        <form onReset={onReset}>\n          <Button>Reset</Button>\n        </form>,\n      );\n      await userEvent.click(getByRole('button', { name: 'Reset' }));\n      expect(onReset).not.toHaveBeenCalled();\n    });\n\n    it('should submit a form', () => {\n      const onSubmit = vi.fn((e) => e.preventDefault());\n      const { getByRole } = render(\n        <form onSubmit={onSubmit}>\n          <Button type=\"submit\">Submit</Button>\n        </form>,\n      );\n\n      fireEvent.click(getByRole('button', { name: 'Submit' }));\n\n      expect(onSubmit).toHaveBeenCalled();\n    });\n\n    it('should reset a form', async () => {\n      const onReset = vi.fn((e) => e.preventDefault());\n      const { getByRole } = render(\n        <form onReset={onReset}>\n          <Button type=\"reset\">Reset</Button>\n        </form>,\n      );\n      fireEvent.click(getByRole('button', { name: 'Reset' }));\n      expect(onReset).toHaveBeenCalled();\n    });\n\n    it('should aria-disable the button, mark it busy, and show the progress circle when loading is set to true', async () => {\n      const onClick = vi.fn(() => null);\n\n      const { getByRole } = render(\n        <Button onClick={onClick} loading={true}>\n          Sample\n        </Button>,\n      );\n      const button = screen.getByRole('button');\n      await userEvent.click(button);\n\n      expect(getByRole('progressbar')).toBeTruthy();\n      expect(button).not.toHaveAttribute('disabled');\n      expect(button).toHaveAttribute('aria-disabled', 'true');\n      expect(button).toHaveAttribute('aria-busy', 'true');\n      expect(onClick).not.toHaveBeenCalled();\n    });\n\n    it('should not disable the button or show the progress circle when loading is set to false', async () => {\n      const onClick = vi.fn(() => null);\n\n      const { queryByRole } = render(\n        <Button onClick={onClick} loading={false}>\n          Sample\n        </Button>,\n      );\n      const button = screen.getByRole('button');\n      await userEvent.click(button);\n\n      expect(queryByRole('progressbar')).toBeFalsy();\n      expect(button).not.toHaveAttribute('disabled');\n      expect(onClick).toHaveBeenCalled();\n    });\n\n    it('should not disable the button or show the progress circle when loading is not set', async () => {\n      const onClick = vi.fn(() => null);\n\n      const { queryByRole } = render(<Button onClick={onClick}>Sample</Button>);\n      const button = screen.getByRole('button');\n      await userEvent.click(button);\n\n      expect(queryByRole('progressbar')).toBeFalsy();\n      expect(button).not.toHaveAttribute('disabled');\n      expect(onClick).toHaveBeenCalled();\n    });\n\n    it('should not trigger the onClick callback when disabled', async () => {\n      const onClick = vi.fn(() => null);\n\n      const { queryByRole } = render(\n        <Button onClick={onClick} disabled>\n          Sample\n        </Button>,\n      );\n      const button = screen.getByRole('button');\n      /**\n       * We need to skip the pointer events check of testing-library due to\n       * 'pointer-events: none' currently being applied as a workaround for the chromium bug\n       * https://github.com/whatwg/html/issues/5886\n       */\n      await userEvent.click(button, {\n        pointerEventsCheck: PointerEventsCheckLevel.Never,\n      });\n\n      expect(queryByRole('progressbar')).toBeFalsy();\n      expect(button).toHaveAttribute('disabled');\n      expect(onClick).not.toHaveBeenCalled();\n    });\n\n    it(\"should not trigger the focus handler when disabled and not show the loading icon if it's not loading\", async () => {\n      const onFocus = vi.fn(() => null);\n\n      const { queryByRole } = render(\n        <Button onFocus={onFocus} disabled>\n          Sample\n        </Button>,\n      );\n      await userEvent.tab();\n      expect(queryByRole('progressbar')).toBeFalsy();\n      expect(onFocus).not.toHaveBeenCalled();\n    });\n\n    it('should the number 0 as child', () => {\n      const { container } = render(<Button>0</Button>);\n\n      expect(getByText(container, '0')).toBeTruthy();\n    });\n  });\n\n  it('should not trigger the onClick callback when loading and the button is disabled', async () => {\n    const onClick = vi.fn(() => null);\n\n    const { getByRole } = render(\n      <Button onClick={onClick} loading disabled>\n        Sample\n      </Button>,\n    );\n    const button = screen.getByRole('button');\n    await userEvent.click(button);\n\n    expect(getByRole('progressbar')).toBeTruthy();\n    expect(button).toHaveAttribute('disabled');\n    expect(onClick).not.toHaveBeenCalled();\n  });\n\n  it('should not trigger the onClick callback when loading and the button in not disabled', async () => {\n    const onClick = vi.fn(() => null);\n\n    const { getByRole } = render(\n      <Button onClick={onClick} loading disabled={false}>\n        Sample\n      </Button>,\n    );\n\n    const button = screen.getByRole('button');\n    await userEvent.click(button);\n\n    expect(getByRole('progressbar')).toBeTruthy();\n    expect(button).not.toHaveAttribute('disabled');\n    expect(button).toHaveAttribute('aria-disabled', 'true');\n    expect(onClick).not.toHaveBeenCalled();\n  });\n\n  it('should trigger the focus handler when loading (button stays in tab order)', async () => {\n    const onFocus = vi.fn(() => null);\n\n    const { getByRole } = render(\n      <Button onFocus={onFocus} loading>\n        Sample\n      </Button>,\n    );\n    await userEvent.keyboard('{Tab}');\n\n    expect(getByRole('progressbar')).toBeTruthy();\n    expect(onFocus).toHaveBeenCalled();\n  });\n\n  it('should trigger the focus handler when loading and aria-disabled is explicitly set', async () => {\n    const onFocus = vi.fn(() => null);\n\n    const { getByRole } = render(\n      <Button onFocus={onFocus} loading aria-disabled>\n        Sample\n      </Button>,\n    );\n    await userEvent.keyboard('{Tab}');\n\n    expect(getByRole('progressbar')).toBeTruthy();\n    expect(onFocus).toHaveBeenCalled();\n  });\n\n  it('should trigger the focus handler when loading and disabled is explicitly false', async () => {\n    const onFocus = vi.fn(() => null);\n\n    const { getByRole } = render(\n      <Button onFocus={onFocus} loading disabled={false}>\n        Sample\n      </Button>,\n    );\n    await userEvent.keyboard('{Tab}');\n\n    expect(getByRole('progressbar')).toBeTruthy();\n    expect(onFocus).toHaveBeenCalled();\n  });\n\n  describe('Polymorphing', () => {\n    it('should render as an anchor with an href', () => {\n      render(\n        <Button as=\"a\" href=\"https://www.dynatrace.com\">\n          Sample\n        </Button>,\n      );\n      const anchor = screen.getByRole('link');\n      expect(anchor).toBeTruthy();\n      expect(anchor.tagName).toEqual('A');\n      expect(anchor.getAttribute('href')).toEqual('https://www.dynatrace.com');\n    });\n\n    it('should render as a div', () => {\n      render(\n        <Button\n          aria-label=\"Polymorphic div\"\n          as=\"div\"\n          variant=\"accent\"\n          color=\"primary\"\n        >\n          {'<div>'} tag instead\n        </Button>,\n      );\n\n      const div = screen.getByLabelText('Polymorphic div');\n      expect(div).toBeTruthy();\n      expect(div.textContent).toEqual('<div> tag instead');\n      expect(div.tagName).toEqual('DIV');\n    });\n\n    it('should render as an input', () => {\n      render(\n        <Button\n          as=\"input\"\n          variant=\"accent\"\n          color=\"primary\"\n          value=\"Add to favorites\"\n        />,\n      );\n\n      const input = document.getElementsByTagName('input');\n      expect(input.length).toEqual(1);\n      expect(input[0].value).toEqual('Add to favorites');\n    });\n\n    it('should render as a custom React component', () => {\n      const Link = ({ children, to, ...remainingProps }) => (\n        <a href={to} {...remainingProps}>\n          {children}\n        </a>\n      );\n\n      render(\n        <Button as={Link} to=\"https://www.dynatrace.com\">\n          Sample\n        </Button>,\n      );\n      const anchor = screen.getByRole('link');\n      expect(anchor).toBeTruthy();\n      expect(anchor.tagName).toEqual('A');\n      expect(anchor.getAttribute('href')).toEqual('https://www.dynatrace.com');\n    });\n\n    it('should not trigger click when disabled', () => {\n      const onClick = vi.fn(() => null);\n\n      render(\n        <Button\n          as=\"a\"\n          href=\"https://www.dynatrace.com\"\n          onClick={onClick}\n          disabled\n        >\n          Sample\n        </Button>,\n      );\n      const button = screen.getByRole('link');\n      expect(\n        async () => await userEvent.click(button, { pointerEventsCheck: 0 }),\n      );\n      expect(onClick).not.toHaveBeenCalled();\n    });\n\n    /**\n     * Currently we use polymorphing to switch out the <button> with other tags.\n     * However we are passing attributes to the <button> that may not be valid on other tags and there is no way to check or prevent this currently.\n     * When this is solved, the test below should work.\n     */\n    it.skip('should not apply the type attribute when rendered as anchor', () => {\n      render(\n        <Button as=\"a\" href=\"https://www.dynatrace.com\">\n          Sample\n        </Button>,\n      );\n      const anchor = screen.getByRole('link');\n      expect(anchor.getAttribute('type')).toBeNull();\n    });\n  });\n\n  describe('forwardRef', () => {\n    it('should forward the ref to the underlying button component', () => {\n      const ref = createRef<HTMLButtonElement>();\n      render(<Button ref={ref}>Sample</Button>);\n      expect(screen.getByRole('button')).toEqual(ref.current);\n    });\n  });\n\n  describe('behavior tracking attributes', () => {\n    it('should add data-dt-* attributes to the button', () => {\n      render(\n        <Button\n          data-dt-content=\"tracking\"\n          data-dt-name=\"MyButton\"\n          data-dt-children-name=\"ButtonChildren\"\n        >\n          Sample\n        </Button>,\n      );\n\n      const button = screen.getByRole('button');\n      expect(button).toHaveAttribute('data-dt-content', 'tracking');\n      expect(button).toHaveAttribute('data-dt-name', 'MyButton');\n      expect(button).toHaveAttribute('data-dt-children-name', 'ButtonChildren');\n    });\n\n    describe('data-dt-component', () => {\n      it('should forward the data-dt-component to the underlying button component', () => {\n        const componentName = 'ButtonComponent';\n        render(<Button data-dt-component={componentName}>Sample</Button>);\n        const button = screen.getByRole('button');\n        expect(button).toHaveAttribute('data-dt-component', componentName);\n      });\n\n      it('should have the default data-dt-component attribute', () => {\n        render(<Button>Sample</Button>);\n        const button = screen.getByRole('button');\n        expect(button).toHaveAttribute('data-dt-component', 'Button');\n      });\n    });\n\n    it('should add data-dt-* attributes to Button.Label', () => {\n      render(\n        <Button>\n          <Button.Label\n            data-testid=\"label\"\n            data-dt-name=\"MyLabel\"\n            data-dt-features=\"Feature1\"\n            data-dt-properties=\"key=value\"\n          >\n            Sample\n          </Button.Label>\n        </Button>,\n      );\n\n      const label = screen.getByTestId('label');\n      expect(label).toHaveAttribute('data-dt-name', 'MyLabel');\n      expect(label).toHaveAttribute('data-dt-features', 'Feature1');\n      expect(label).toHaveAttribute('data-dt-properties', 'key=value');\n    });\n\n    it('should add data-dt-* attributes to Button.Prefix', () => {\n      render(\n        <Button>\n          <Button.Prefix\n            data-testid=\"prefix\"\n            data-dt-name=\"MyPrefix\"\n            data-dt-features=\"Feature1\"\n            data-dt-properties=\"key=value\"\n          >\n            Icon\n          </Button.Prefix>\n        </Button>,\n      );\n\n      const prefix = screen.getByTestId('prefix');\n      expect(prefix).toHaveAttribute('data-dt-name', 'MyPrefix');\n      expect(prefix).toHaveAttribute('data-dt-features', 'Feature1');\n      expect(prefix).toHaveAttribute('data-dt-properties', 'key=value');\n    });\n\n    it('should add data-dt-* attributes to Button.Suffix', () => {\n      render(\n        <Button>\n          <Button.Suffix\n            data-testid=\"suffix\"\n            data-dt-name=\"MySuffix\"\n            data-dt-features=\"Feature1\"\n            data-dt-properties=\"key=value\"\n          >\n            Badge\n          </Button.Suffix>\n        </Button>,\n      );\n\n      const suffix = screen.getByTestId('suffix');\n      expect(suffix).toHaveAttribute('data-dt-name', 'MySuffix');\n      expect(suffix).toHaveAttribute('data-dt-features', 'Feature1');\n      expect(suffix).toHaveAttribute('data-dt-properties', 'key=value');\n    });\n  });\n\n  describe('loading', () => {\n    it('should set aria-busy when loading', () => {\n      render(<Button loading>Sample</Button>);\n      expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true');\n    });\n\n    it('should not set aria-busy when loading is false', () => {\n      render(<Button loading={false}>Sample</Button>);\n      expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'false');\n    });\n\n    it('should not set aria-busy when loading is not set', () => {\n      render(<Button>Sample</Button>);\n      expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'false');\n    });\n\n    it('should not set aria-busy when only disabled', () => {\n      render(<Button disabled>Sample</Button>);\n      expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'false');\n    });\n  });\n\n  describe('disabled', () => {\n    it('should not trigger onClick callback when disabled', async () => {\n      const onClick = vi.fn();\n\n      render(\n        <Button disabled onClick={onClick}>\n          Sample\n        </Button>,\n      );\n      const button = screen.getByRole('button');\n      await userEvent.click(button);\n\n      expect(onClick).not.toHaveBeenCalled();\n    });\n\n    it('should not propagate onPointerDown events when disabled', async () => {\n      const onPointerDown = vi.fn();\n\n      render(\n        <span onPointerDown={onPointerDown}>\n          <Button disabled onClick={onPointerDown}>\n            Sample\n          </Button>\n        </span>,\n      );\n      const button = screen.getByRole('button');\n      await userEvent.click(button);\n\n      expect(onPointerDown).not.toHaveBeenCalled();\n    });\n\n    it('should not propagate onPointerUp events when disabled', async () => {\n      const onPointerUp = vi.fn();\n\n      render(\n        <span onPointerUp={onPointerUp}>\n          <Button disabled onClick={onPointerUp}>\n            Sample\n          </Button>\n        </span>,\n      );\n      const button = screen.getByRole('button');\n      await userEvent.click(button);\n\n      expect(onPointerUp).not.toHaveBeenCalled();\n    });\n  });\n\n  describe('className & style', () => {\n    it('should add consumer class names and styles', () => {\n      render(\n        <Button className=\"test\" style={{ backgroundColor: 'khaki' }}>\n          <Button.Prefix\n            className=\"test\"\n            style={{ backgroundColor: 'khaki' }}\n            data-testid=\"button-prefix\"\n          >\n            x\n          </Button.Prefix>\n          <Button.Label\n            className=\"test\"\n            style={{ backgroundColor: 'khaki' }}\n            data-testid=\"button-label\"\n          >\n            test\n          </Button.Label>\n          <Button.Suffix\n            className=\"test\"\n            style={{ backgroundColor: 'khaki' }}\n            data-testid=\"button-suffix\"\n          >\n            y\n          </Button.Suffix>\n        </Button>,\n      );\n\n      const root = screen.getByRole('button');\n      expect(root).toHaveClass('test');\n      expect(root).toHaveStyle('background-color: rgb(240, 230, 140)');\n\n      const prefix = screen.getByTestId('button-prefix');\n      expect(prefix).toHaveClass('test');\n      expect(prefix).toHaveStyle('background-color: rgb(240, 230, 140)');\n\n      const label = screen.getByTestId('button-label');\n      expect(label).toHaveClass('test');\n      expect(label).toHaveStyle('background-color: rgb(240, 230, 140)');\n\n      const suffix = screen.getByTestId('button-suffix');\n      expect(suffix).toHaveClass('test');\n      expect(suffix).toHaveStyle('background-color: rgb(240, 230, 140)');\n    });\n  });\n});\n"],
+  "mappings": "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",
+  "names": ["getByText"]
+}

package/esm/buttons/button/Button.sty.js

@@ -3,10 +3,10 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Button.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = _7a468({ defaultClassName: "_10kgnsa0-3-13-3", variantClassNames: { textAlign: { start: "_10kgnsa1-3-13-3", center: "_10kgnsa2-3-13-3" }, size: { condensed: "_10kgnsa3-3-13-3", "default": "_10kgnsa4-3-13-3" }, disabled: { true: "_10kgnsa5-3-13-3" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = _7a468({ defaultClassName: "_10kgnsa9-3-13-3", variantClassNames: { textual: { true: "_oqqp1n0-3-13-3", false: "_10kgnsab-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-13-3";
-var widths = { full: "_10kgnsa6-3-13-3", content: "_10kgnsa7-3-13-3" };
+var button = _7a468({ defaultClassName: "_10kgnsa0-3-14-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-14-1", center: "_10kgnsa2-3-14-1" }, size: { condensed: "_10kgnsa3-3-14-1", "default": "_10kgnsa4-3-14-1" }, disabled: { true: "_10kgnsa5-3-14-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = _7a468({ defaultClassName: "_10kgnsa9-3-14-1", variantClassNames: { textual: { true: "_oqqp1n0-3-14-1", false: "_10kgnsab-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-14-1";
+var widths = { full: "_10kgnsa6-3-14-1", content: "_10kgnsa7-3-14-1" };
 export {
   button,
   label,