[wb1812.1.deprecate] Deprecate ID hooks

Khan · Dec 13, 2024 · 50269c0 · 50269c0
1 parent d0bad9d
commit 50269c0
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 0 deletions.
diff --git a/__docs__/wonder-blocks-core/use-unique-id.stories.tsx b/__docs__/wonder-blocks-core/use-unique-id.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 
 import {Meta} from "@storybook/react";

diff --git a/packages/wonder-blocks-accordion/src/components/accordion-section.tsx b/packages/wonder-blocks-accordion/src/components/accordion-section.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {StyleDeclaration} from "aphrodite";
 
+// eslint-disable-next-line import/no-deprecated
 import {useUniqueIdWithMock, View} from "@khanacademy/wonder-blocks-core";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
@@ -203,6 +204,7 @@ const AccordionSection = React.forwardRef(function AccordionSection(
 
     const controlledMode = expanded !== undefined && onToggle;
 
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock();
     const sectionId = id ?? ids.get("accordion-section");
     // We need an ID for the header so that the content section's

diff --git a/packages/wonder-blocks-core/src/hooks/use-unique-id.ts b/packages/wonder-blocks-core/src/hooks/use-unique-id.ts
@@ -10,6 +10,9 @@ import {RenderState} from "../components/render-state-context";
 import type {IIdentifierFactory} from "../util/types";
 
 /**
+ * @deprecated Use `useId` for your ID needs. If you are in a class-based
+ * component and cannot use hooks, then use the `Id` component.
+ *
  * Returns a unique identifier factory.  If the parent component hasn't
  * been mounted yet, the global SsrIDFactory will be returned until the
  * component becomes mounted.
@@ -33,6 +36,9 @@ export const useUniqueIdWithMock = (scope?: string): IIdentifierFactory => {
 };
 
 /**
+ * @deprecated Use `useId` for your ID needs. If you are in a class-based
+ * component and cannot use hooks, then use the `Id` component.
+ *
  * Returns a unique identifier factory.  If the parent component hasn't
  * been mounted yet, null will be returned.
  *

diff --git a/packages/wonder-blocks-dropdown/src/components/combobox.tsx b/packages/wonder-blocks-dropdown/src/components/combobox.tsx
@@ -6,6 +6,7 @@ import xIcon from "@phosphor-icons/core/regular/x.svg";
 
 import {
     StyleType,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
     View,
 } from "@khanacademy/wonder-blocks-core";
@@ -175,6 +176,7 @@ export default function Combobox({
     testId,
     value = "",
 }: Props) {
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock("combobox");
     const uniqueId = id ?? ids.get("listbox");
     // Ref to the combobox input element.

diff --git a/packages/wonder-blocks-dropdown/src/components/listbox.tsx b/packages/wonder-blocks-dropdown/src/components/listbox.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {
     StyleType,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
     View,
 } from "@khanacademy/wonder-blocks-core";
@@ -103,6 +104,7 @@ function StandaloneListbox(props: Props) {
         "aria-labelledby": ariaLabelledby,
     } = props;
 
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock("listbox");
     const uniqueId = id ?? ids.get("id");
 

diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx
@@ -4,6 +4,7 @@ import {StyleSheet} from "aphrodite";
 import {
     AriaProps,
     StyleType,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
     addStyle,
     View,
@@ -244,6 +245,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
         const hasError = error || !!errorMessage;
 
+        // eslint-disable-next-line import/no-deprecated
         const ids = useUniqueIdWithMock("text-area");
         const uniqueId = id ?? ids.get("id");
 

diff --git a/packages/wonder-blocks-switch/src/components/switch.tsx b/packages/wonder-blocks-switch/src/components/switch.tsx
@@ -5,6 +5,7 @@ import {
     AriaProps,
     View,
     addStyle,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
 } from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
@@ -69,6 +70,7 @@ const SwitchCore = React.forwardRef(function SwitchCore(
         testId,
     } = props;
 
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock("labeled-field");
     const uniqueId = id ?? ids.get("labeled-field-id");
 

diff --git a/packages/wonder-blocks-testing/src/harness/adapters/__tests__/render-state.test.tsx b/packages/wonder-blocks-testing/src/harness/adapters/__tests__/render-state.test.tsx
@@ -48,6 +48,7 @@ describe("SSR.adapter", () => {
     it("should enable harnessing of components that require RenderStateRoot", () => {
         // Arrange
         const ComponentNeedsSsr = (props: any) => {
+            // eslint-disable-next-line import/no-deprecated
             const idf = WBCore.useUniqueIdWithoutMock();
             return <div>{idf?.get("my-id")}</div>;
         };