@khanacademy/wonder-blocks-button 6.2.10 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-button
 
+## 6.3.0
+
+### Minor Changes
+
+-   58075352: Change testId to render the default Testing Library HTML attribute: data-testid (was data-test-id)
+
+### Patch Changes
+
+-   Updated dependencies [58075352]
+    -   @khanacademy/wonder-blocks-progress-spinner@2.1.0
+    -   @khanacademy/wonder-blocks-clickable@4.2.0
+    -   @khanacademy/wonder-blocks-core@6.4.0
+    -   @khanacademy/wonder-blocks-icon@4.1.0
+    -   @khanacademy/wonder-blocks-typography@2.1.11
+
+## 6.2.11
+
+### Patch Changes
+
+-   Updated dependencies [874081aa]
+-   Updated dependencies [874081aa]
+-   Updated dependencies [a9bf603a]
+    -   @khanacademy/wonder-blocks-theming@2.0.2
+    -   @khanacademy/wonder-blocks-tokens@1.2.0
+    -   @khanacademy/wonder-blocks-clickable@4.1.3
+    -   @khanacademy/wonder-blocks-progress-spinner@2.0.29
+
 ## 6.2.10
 
 ### Patch Changes

package/dist/es/index.js

@@ -273,7 +273,7 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
     const disabled = spinner || disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && !pressed && focused && [buttonStyles.focus, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
     const commonProps = _extends({
-      "data-test-id": testId,
+      "data-testid": testId,
       id: id,
       role: "button",
       style: [defaultStyle, style]

package/dist/index.js

@@ -296,7 +296,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
     const disabled = spinner || disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && !pressed && focused && [buttonStyles.focus, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
     const commonProps = _extends({
-      "data-test-id": testId,
+      "data-testid": testId,
       id: id,
       role: "button",
       style: [defaultStyle, style]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "6.2.10",
+  "version": "6.3.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,13 +16,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.1.2",
-    "@khanacademy/wonder-blocks-core": "^6.3.1",
-    "@khanacademy/wonder-blocks-icon": "^4.0.1",
-    "@khanacademy/wonder-blocks-progress-spinner": "^2.0.28",
-    "@khanacademy/wonder-blocks-theming": "^2.0.1",
-    "@khanacademy/wonder-blocks-tokens": "^1.1.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.10"
+    "@khanacademy/wonder-blocks-clickable": "^4.2.0",
+    "@khanacademy/wonder-blocks-core": "^6.4.0",
+    "@khanacademy/wonder-blocks-icon": "^4.1.0",
+    "@khanacademy/wonder-blocks-progress-spinner": "^2.1.0",
+    "@khanacademy/wonder-blocks-theming": "^2.0.2",
+    "@khanacademy/wonder-blocks-tokens": "^1.2.0",
+    "@khanacademy/wonder-blocks-typography": "^2.1.11"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap

@@ -3952,7 +3952,7 @@ exports[`ButtonCore kind:primary size:medium spinner:true 1`] = `
     }
   >
     <svg
-      data-test-id="button-spinner"
+      data-testid="button-spinner"
       height={24}
       viewBox="0 0 24 24"
       width={24}
@@ -4082,7 +4082,7 @@ exports[`ButtonCore kind:primary size:small spinner:true 1`] = `
     }
   >
     <svg
-      data-test-id="button-spinner"
+      data-testid="button-spinner"
       height={16}
       viewBox="0 0 16 16"
       width={16}
@@ -8093,7 +8093,7 @@ exports[`ButtonCore kind:secondary size:medium spinner:true 1`] = `
     }
   >
     <svg
-      data-test-id="button-spinner"
+      data-testid="button-spinner"
       height={24}
       viewBox="0 0 24 24"
       width={24}
@@ -8228,7 +8228,7 @@ exports[`ButtonCore kind:secondary size:small spinner:true 1`] = `
     }
   >
     <svg
-      data-test-id="button-spinner"
+      data-testid="button-spinner"
       height={16}
       viewBox="0 0 16 16"
       width={16}
@@ -12223,7 +12223,7 @@ exports[`ButtonCore kind:tertiary size:medium spinner:true 1`] = `
     }
   >
     <svg
-      data-test-id="button-spinner"
+      data-testid="button-spinner"
       height={24}
       viewBox="0 0 24 24"
       width={24}
@@ -12354,7 +12354,7 @@ exports[`ButtonCore kind:tertiary size:small spinner:true 1`] = `
     }
   >
     <svg
-      data-test-id="button-spinner"
+      data-testid="button-spinner"
       height={16}
       viewBox="0 0 16 16"
       width={16}

package/src/components/__tests__/button-with-icon.test.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {userEvent} from "@testing-library/user-event";
 import plus from "@phosphor-icons/core/regular/plus.svg";
 
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
@@ -14,7 +14,7 @@ import {color} from "@khanacademy/wonder-blocks-tokens";
 import Button from "../button";
 
 describe("button with icon", () => {
-    test("start icon should be hidden from Screen Readers", () => {
+    test("start icon should be hidden from Screen Readers", async () => {
         // Arrange
         render(
             <Button testId={"button-focus-test"} startIcon={plus}>
@@ -23,13 +23,13 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-focus-test-start-icon");
+        const icon = await screen.findByTestId("button-focus-test-start-icon");
 
         // Assert
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
 
-    test("end icon should be hidden from Screen Readers", () => {
+    test("end icon should be hidden from Screen Readers", async () => {
         // Arrange
         render(
             <Button testId={"button-focus-test"} endIcon={plus}>
@@ -38,7 +38,7 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-focus-test-end-icon");
+        const icon = await screen.findByTestId("button-focus-test-end-icon");
 
         // Assert
         expect(icon).toHaveAttribute("aria-hidden", "true");
@@ -48,7 +48,7 @@ describe("button with icon", () => {
      * Primary button
      */
 
-    test("icon is displayed when button contains startIcon", () => {
+    test("icon is displayed when button contains startIcon", async () => {
         // Arrange
         render(
             <Button testId={"button-focus-test"} startIcon={plus}>
@@ -57,14 +57,14 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-focus-test-start-icon");
+        const icon = await screen.findByTestId("button-focus-test-start-icon");
 
         // Assert
         expect(icon).toBeInTheDocument();
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
 
-    test("icon is displayed when button contains endIcon", () => {
+    test("icon is displayed when button contains endIcon", async () => {
         // Arrange
         render(
             <Button testId={"button-focus-test"} endIcon={plus}>
@@ -73,14 +73,14 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-focus-test-end-icon");
+        const icon = await screen.findByTestId("button-focus-test-end-icon");
 
         // Assert
         expect(icon).toBeInTheDocument();
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
 
-    test("both icons are displayed when button contains startIcon and endIcon", () => {
+    test("both icons are displayed when button contains startIcon and endIcon", async () => {
         // Arrange
         render(
             <Button
@@ -93,8 +93,10 @@ describe("button with icon", () => {
         );
 
         // Act
-        const startIcon = screen.getByTestId("button-focus-test-start-icon");
-        const endIcon = screen.getByTestId("button-focus-test-end-icon");
+        const startIcon = await screen.findByTestId(
+            "button-focus-test-start-icon",
+        );
+        const endIcon = await screen.findByTestId("button-focus-test-end-icon");
 
         // Assert
         expect(startIcon).toBeInTheDocument();
@@ -105,7 +107,7 @@ describe("button with icon", () => {
      * Secondary button
      */
 
-    test("icon is displayed when secondary button contains startIcon", () => {
+    test("icon is displayed when secondary button contains startIcon", async () => {
         // Arrange
         render(
             <Button
@@ -118,14 +120,14 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-icon-test-start-icon");
+        const icon = await screen.findByTestId("button-icon-test-start-icon");
 
         // Assert
         expect(icon).toBeInTheDocument();
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
 
-    test("icon is displayed when secondary button contains endIcon", () => {
+    test("icon is displayed when secondary button contains endIcon", async () => {
         // Arrange
         render(
             <Button kind="secondary" testId={"button-icon-test"} endIcon={plus}>
@@ -134,14 +136,14 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-icon-test-end-icon");
+        const icon = await screen.findByTestId("button-icon-test-end-icon");
 
         // Assert
         expect(icon).toBeInTheDocument();
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
 
-    test("default theme secondary button icon has no hover style", () => {
+    test("default theme secondary button icon has no hover style", async () => {
         // Arrange
         render(
             <Button kind="secondary" testId={"button-icon-test"} endIcon={plus}>
@@ -150,17 +152,17 @@ describe("button with icon", () => {
         );
 
         // Act
-        const button = screen.getByTestId("button-icon-test");
-        const iconWrapper = screen.getByTestId(
+        const button = await screen.findByTestId("button-icon-test");
+        const iconWrapper = await screen.findByTestId(
             "button-icon-test-end-icon-wrapper",
         );
-        userEvent.hover(button);
+        await userEvent.hover(button);
 
         // Assert
         expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
     });
 
-    test("Khanmigo secondary button icon has hover style", () => {
+    test("Khanmigo secondary button icon has hover style", async () => {
         // Arrange
         render(
             <ThemeSwitcherContext.Provider value="khanmigo">
@@ -175,11 +177,11 @@ describe("button with icon", () => {
         );
 
         // Act
-        const button = screen.getByTestId("button-icon-test");
-        const iconWrapper = screen.getByTestId(
+        const button = await screen.findByTestId("button-icon-test");
+        const iconWrapper = await screen.findByTestId(
             "button-icon-test-end-icon-wrapper",
         );
-        userEvent.hover(button);
+        await userEvent.hover(button);
 
         // Assert
         expect(iconWrapper).toHaveStyle(
@@ -191,7 +193,7 @@ describe("button with icon", () => {
      * Tertiary button
      */
 
-    test("icon is displayed when tertiary button contains startIcon", () => {
+    test("icon is displayed when tertiary button contains startIcon", async () => {
         // Arrange
         render(
             <Button
@@ -204,14 +206,14 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-focus-test-start-icon");
+        const icon = await screen.findByTestId("button-focus-test-start-icon");
 
         // Assert
         expect(icon).toBeInTheDocument();
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
 
-    test("icon is displayed when tertiary button contains endIcon", () => {
+    test("icon is displayed when tertiary button contains endIcon", async () => {
         // Arrange
         render(
             <Button kind="tertiary" testId={"button-focus-test"} endIcon={plus}>
@@ -220,14 +222,14 @@ describe("button with icon", () => {
         );
 
         // Act
-        const icon = screen.getByTestId("button-focus-test-end-icon");
+        const icon = await screen.findByTestId("button-focus-test-end-icon");
 
         // Assert
         expect(icon).toBeInTheDocument();
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
 
-    test("default theme tertiary button icon has no hover style", () => {
+    test("default theme tertiary button icon has no hover style", async () => {
         // Arrange
         render(
             <Button kind="tertiary" testId={"button-icon-test"} endIcon={plus}>
@@ -236,17 +238,17 @@ describe("button with icon", () => {
         );
 
         // Act
-        const button = screen.getByTestId("button-icon-test");
-        const iconWrapper = screen.getByTestId(
+        const button = await screen.findByTestId("button-icon-test");
+        const iconWrapper = await screen.findByTestId(
             "button-icon-test-end-icon-wrapper",
         );
-        userEvent.hover(button);
+        await userEvent.hover(button);
 
         // Assert
         expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
     });
 
-    test("Khanmigo tertiary button icon has hover style", () => {
+    test("Khanmigo tertiary button icon has hover style", async () => {
         // Arrange
         render(
             <ThemeSwitcherContext.Provider value="khanmigo">
@@ -261,11 +263,11 @@ describe("button with icon", () => {
         );
 
         // Act
-        const button = screen.getByTestId("button-icon-test");
-        const iconWrapper = screen.getByTestId(
+        const button = await screen.findByTestId("button-icon-test");
+        const iconWrapper = await screen.findByTestId(
             "button-icon-test-end-icon-wrapper",
         );
-        userEvent.hover(button);
+        await userEvent.hover(button);
 
         // Assert
         expect(iconWrapper).toHaveStyle(