From b6009b7794b5e7d51517b33e9e0402cf0f8441e9 Mon Sep 17 00:00:00 2001 From: Jeff Yates Date: Mon, 16 Dec 2024 09:24:02 -0600 Subject: [PATCH] [wb1812.1.deprecate] Mark ID stuff as deprecated (#2388) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: This is the first step in removing our custom ID utilities in favour of using the `useId` hook from React's API. This PR is not going to be merged/released on its own. Another PR will be coming to add an `Id` component that wraps `useId` so that there's an easier path for consumers to migrate. The difficult bit is moving from the provider architecture that gives an ID factory, to the `useId`/`Id` approach. However, long term, it should simplify things greatly. ### Upgrade note: Upgrading to this will cause deprecation notices in consuming code. If a lint rule is set up to block deprecated usage (which it probably is), then those errors will have to be suppressed. A find/replace may help in some circumstances, but this may also be a manual process. The alternative, of course, is to actually modify stuff to the new approach. Issue: WB-1812 ## Test plan: `yarn test` `yarn lint` Author: somewhatabstract Reviewers: jandrade Required Reviewers: Approved By: jandrade Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2388 --- .changeset/light-goats-serve.md | 14 ++++++++++++++ .../wonder-blocks-core/id-provider.stories.tsx | 1 + .../unique-id-provider.stories.tsx | 1 + .../wonder-blocks-core/use-unique-id.stories.tsx | 1 + .../with-action-scheduler.stories.tsx | 1 + .../src/components/accordion-section.tsx | 2 ++ .../src/components/__tests__/id-provider.test.tsx | 1 + .../__tests__/unique-id-provider.test.tsx | 1 + .../src/components/id-provider.tsx | 3 +++ .../src/components/unique-id-provider.tsx | 4 ++++ .../src/hooks/__tests__/use-unique-id.test.tsx | 1 + .../wonder-blocks-core/src/hooks/use-unique-id.ts | 7 +++++++ packages/wonder-blocks-core/src/index.ts | 2 ++ .../src/util/__tests__/unique-id-factory.test.ts | 1 + .../wonder-blocks-core/src/util/ssr-id-factory.ts | 3 +++ packages/wonder-blocks-core/src/util/types.ts | 2 ++ .../src/util/unique-id-factory.ts | 4 ++++ .../src/components/action-menu.tsx | 1 + .../src/components/combobox.tsx | 2 ++ .../src/components/listbox.tsx | 2 ++ .../src/components/multi-select.tsx | 1 + .../src/components/single-select.tsx | 1 + .../src/components/choice-internal.tsx | 1 + .../src/components/labeled-text-field.tsx | 1 + .../src/components/text-area.tsx | 2 ++ .../src/components/text-field.tsx | 1 + .../src/components/one-pane-dialog.tsx | 1 + .../src/components/popover.tsx | 1 + .../src/components/search-field.tsx | 1 + .../wonder-blocks-switch/src/components/switch.tsx | 2 ++ .../adapters/__tests__/render-state.test.tsx | 1 + .../src/components/tooltip.tsx | 1 + 32 files changed, 68 insertions(+) create mode 100644 .changeset/light-goats-serve.md diff --git a/.changeset/light-goats-serve.md b/.changeset/light-goats-serve.md new file mode 100644 index 000000000..d9c80a854 --- /dev/null +++ b/.changeset/light-goats-serve.md @@ -0,0 +1,14 @@ +--- +"@khanacademy/wonder-blocks-core": major +"@khanacademy/wonder-blocks-search-field": patch +"@khanacademy/wonder-blocks-accordion": patch +"@khanacademy/wonder-blocks-dropdown": patch +"@khanacademy/wonder-blocks-popover": patch +"@khanacademy/wonder-blocks-testing": patch +"@khanacademy/wonder-blocks-tooltip": patch +"@khanacademy/wonder-blocks-switch": patch +"@khanacademy/wonder-blocks-modal": patch +"@khanacademy/wonder-blocks-form": patch +--- + +Deprecate the ID provider and unique ID utilities diff --git a/__docs__/wonder-blocks-core/id-provider.stories.tsx b/__docs__/wonder-blocks-core/id-provider.stories.tsx index bc9c2919b..073a23114 100644 --- a/__docs__/wonder-blocks-core/id-provider.stories.tsx +++ b/__docs__/wonder-blocks-core/id-provider.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import type {Meta, StoryObj} from "@storybook/react"; diff --git a/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx b/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx index 93853c79d..9c564ce9d 100644 --- a/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx +++ b/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import type {Meta, StoryObj} from "@storybook/react"; diff --git a/__docs__/wonder-blocks-core/use-unique-id.stories.tsx b/__docs__/wonder-blocks-core/use-unique-id.stories.tsx index 3a2f0cb1c..b14fc140f 100644 --- 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/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx b/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx index c67a5540e..a95601300 100644 --- a/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx +++ b/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import {Meta} from "@storybook/react"; import {IDProvider, View} from "@khanacademy/wonder-blocks-core"; diff --git a/packages/wonder-blocks-accordion/src/components/accordion-section.tsx b/packages/wonder-blocks-accordion/src/components/accordion-section.tsx index 1f214acc5..3ccf97940 100644 --- 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/components/__tests__/id-provider.test.tsx b/packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx index 493aee7fc..e49c92047 100644 --- a/packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx +++ b/packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import {render} from "@testing-library/react"; diff --git a/packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx b/packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx index a44adce41..9eeb5855d 100644 --- a/packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx +++ b/packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import * as ReactDOMServer from "react-dom/server"; import {render} from "@testing-library/react"; diff --git a/packages/wonder-blocks-core/src/components/id-provider.tsx b/packages/wonder-blocks-core/src/components/id-provider.tsx index 1d69e624c..7b87c9e26 100644 --- a/packages/wonder-blocks-core/src/components/id-provider.tsx +++ b/packages/wonder-blocks-core/src/components/id-provider.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import UniqueIDProvider from "./unique-id-provider"; @@ -54,6 +55,8 @@ type Props = { * * ``` * + * @deprecated Use `useId` for your ID needs. If you are in a class-based + * component and cannot use hooks, then use the `Id` component. */ export default class IDProvider extends React.Component { static defaultId = "wb-id"; diff --git a/packages/wonder-blocks-core/src/components/unique-id-provider.tsx b/packages/wonder-blocks-core/src/components/unique-id-provider.tsx index 953cc494f..fb086c4fd 100644 --- a/packages/wonder-blocks-core/src/components/unique-id-provider.tsx +++ b/packages/wonder-blocks-core/src/components/unique-id-provider.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import InitialFallback from "./initial-fallback"; @@ -69,6 +70,9 @@ type Props = { * )} * * ``` + * + * @deprecated Use `useId` for your ID needs. If you are in a class-based + * component and cannot use hooks, then use the `Id` component. */ export default class UniqueIDProvider extends React.Component { // @ts-expect-error [FEI-5019] - TS2564 - Property '_idFactory' has no initializer and is not definitely assigned in the constructor. diff --git a/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx b/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx index 0698317df..c541b1428 100644 --- a/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx +++ b/packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import * as React from "react"; import {render} from "@testing-library/react"; import {renderHookStatic} from "@khanacademy/wonder-blocks-testing-core"; diff --git a/packages/wonder-blocks-core/src/hooks/use-unique-id.ts b/packages/wonder-blocks-core/src/hooks/use-unique-id.ts index ac07b8e3b..7980bac2d 100644 --- a/packages/wonder-blocks-core/src/hooks/use-unique-id.ts +++ b/packages/wonder-blocks-core/src/hooks/use-unique-id.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import {useRef} from "react"; import {useRenderState} from "./use-render-state"; @@ -9,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. @@ -32,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-core/src/index.ts b/packages/wonder-blocks-core/src/index.ts index 533d80632..1d68fbef8 100644 --- a/packages/wonder-blocks-core/src/index.ts +++ b/packages/wonder-blocks-core/src/index.ts @@ -1,5 +1,6 @@ import type { AriaProps, + // eslint-disable-next-line import/no-deprecated IIdentifierFactory, StyleType, PropsFor, @@ -27,4 +28,5 @@ export {RenderStateRoot} from "./components/render-state-root"; export {RenderState} from "./components/render-state-context"; export type {AriaRole, AriaAttributes} from "./util/aria-types"; +// eslint-disable-next-line import/no-deprecated export type {AriaProps, IIdentifierFactory, StyleType, PropsFor}; diff --git a/packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts b/packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts index cce544c11..00af2b8dd 100644 --- a/packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts +++ b/packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import UniqueIDFactory from "../unique-id-factory"; describe("UniqueIDFactory", () => { diff --git a/packages/wonder-blocks-core/src/util/ssr-id-factory.ts b/packages/wonder-blocks-core/src/util/ssr-id-factory.ts index 24d279d84..58ada4346 100644 --- a/packages/wonder-blocks-core/src/util/ssr-id-factory.ts +++ b/packages/wonder-blocks-core/src/util/ssr-id-factory.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-deprecated */ import type {IIdentifierFactory} from "./types"; /** @@ -9,6 +10,8 @@ import type {IIdentifierFactory} from "./types"; * * The identifiers are not guaranteed to be unique, but they will match between * server and the first client render. + * @deprecated Use `useId` for your ID needs. If you are in a class-based + * component and cannot use hooks, then use the `Id` component. */ class SsrIDFactory implements IIdentifierFactory { static Default: IIdentifierFactory = new SsrIDFactory(); diff --git a/packages/wonder-blocks-core/src/util/types.ts b/packages/wonder-blocks-core/src/util/types.ts index b6d8db5d1..5570a0f25 100644 --- a/packages/wonder-blocks-core/src/util/types.ts +++ b/packages/wonder-blocks-core/src/util/types.ts @@ -104,6 +104,8 @@ export type TextViewSharedProps = { /** * Interface implemented by types that can provide identifiers. + * @deprecated Use `useId` for your ID needs. If you are in a class-based + * component and cannot use hooks, then use the `Id` component. */ export interface IIdentifierFactory { get(id: string): string; diff --git a/packages/wonder-blocks-core/src/util/unique-id-factory.ts b/packages/wonder-blocks-core/src/util/unique-id-factory.ts index 253267842..2c3820bcb 100644 --- a/packages/wonder-blocks-core/src/util/unique-id-factory.ts +++ b/packages/wonder-blocks-core/src/util/unique-id-factory.ts @@ -1,9 +1,13 @@ +/* eslint-disable import/no-deprecated */ import type {IIdentifierFactory} from "./types"; /** * This is NOT for direct use. Instead, see the UniqueIDProvider component. * * Implements IIdentifierFactory to provide unique identifiers. + * + * @deprecated Use `useId` for your ID needs. If you are in a class-based + * component and cannot use hooks, then use the `Id` component. */ export default class UniqueIDFactory implements IIdentifierFactory { _uniqueFactoryName: string; diff --git a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx index ffbe93099..91011864e 100644 --- a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx +++ b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import {StyleSheet} from "aphrodite"; import { + // eslint-disable-next-line import/no-deprecated IDProvider, type AriaProps, type StyleType, diff --git a/packages/wonder-blocks-dropdown/src/components/combobox.tsx b/packages/wonder-blocks-dropdown/src/components/combobox.tsx index 8560726ed..890b03e54 100644 --- 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 index 37ec2a762..fd64b2380 100644 --- 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-dropdown/src/components/multi-select.tsx b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx index 5c58dcb1e..e749b05fe 100644 --- a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx +++ b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { + // eslint-disable-next-line import/no-deprecated IDProvider, type AriaProps, type StyleType, diff --git a/packages/wonder-blocks-dropdown/src/components/single-select.tsx b/packages/wonder-blocks-dropdown/src/components/single-select.tsx index baddc613a..dc4660276 100644 --- a/packages/wonder-blocks-dropdown/src/components/single-select.tsx +++ b/packages/wonder-blocks-dropdown/src/components/single-select.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { + // eslint-disable-next-line import/no-deprecated IDProvider, type AriaProps, type StyleType, diff --git a/packages/wonder-blocks-form/src/components/choice-internal.tsx b/packages/wonder-blocks-form/src/components/choice-internal.tsx index eaf6edd56..7f20fea29 100644 --- a/packages/wonder-blocks-form/src/components/choice-internal.tsx +++ b/packages/wonder-blocks-form/src/components/choice-internal.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import {StyleSheet} from "aphrodite"; +// eslint-disable-next-line import/no-deprecated import {View, UniqueIDProvider} from "@khanacademy/wonder-blocks-core"; import {Strut} from "@khanacademy/wonder-blocks-layout"; import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; diff --git a/packages/wonder-blocks-form/src/components/labeled-text-field.tsx b/packages/wonder-blocks-form/src/components/labeled-text-field.tsx index abda285bc..b7ad9373a 100644 --- a/packages/wonder-blocks-form/src/components/labeled-text-field.tsx +++ b/packages/wonder-blocks-form/src/components/labeled-text-field.tsx @@ -1,5 +1,6 @@ import * as React from "react"; +// eslint-disable-next-line import/no-deprecated import {IDProvider, StyleType} from "@khanacademy/wonder-blocks-core"; import FieldHeading from "./field-heading"; diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx index f5afffc1f..fb101994c 100644 --- 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( 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-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx index 014ac2e69..a7b97554b 100644 --- a/packages/wonder-blocks-form/src/components/text-field.tsx +++ b/packages/wonder-blocks-form/src/components/text-field.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import {StyleSheet} from "aphrodite"; +// eslint-disable-next-line import/no-deprecated import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core"; import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens"; import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography"; diff --git a/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx b/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx index 93737beb2..a68ed01bc 100644 --- a/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx +++ b/packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx @@ -4,6 +4,7 @@ import {Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs"; import {MediaLayout} from "@khanacademy/wonder-blocks-layout"; import type {StyleType} from "@khanacademy/wonder-blocks-core"; +// eslint-disable-next-line import/no-deprecated import {IDProvider} from "@khanacademy/wonder-blocks-core"; import ModalDialog from "./modal-dialog"; import ModalPanel from "./modal-panel"; diff --git a/packages/wonder-blocks-popover/src/components/popover.tsx b/packages/wonder-blocks-popover/src/components/popover.tsx index cce0ff98a..ab05e03c8 100644 --- a/packages/wonder-blocks-popover/src/components/popover.tsx +++ b/packages/wonder-blocks-popover/src/components/popover.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +// eslint-disable-next-line import/no-deprecated import {IDProvider} from "@khanacademy/wonder-blocks-core"; import {TooltipPopper} from "@khanacademy/wonder-blocks-tooltip"; import {maybeGetPortalMountedModalHostElement} from "@khanacademy/wonder-blocks-modal"; diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx index 6bfce5974..aae39522a 100644 --- a/packages/wonder-blocks-search-field/src/components/search-field.tsx +++ b/packages/wonder-blocks-search-field/src/components/search-field.tsx @@ -5,6 +5,7 @@ import xIcon from "@phosphor-icons/core/regular/x.svg"; import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold.svg"; import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography"; +// eslint-disable-next-line import/no-deprecated import {View, IDProvider} from "@khanacademy/wonder-blocks-core"; import IconButton from "@khanacademy/wonder-blocks-icon-button"; import {TextField} from "@khanacademy/wonder-blocks-form"; diff --git a/packages/wonder-blocks-switch/src/components/switch.tsx b/packages/wonder-blocks-switch/src/components/switch.tsx index 2ad36405f..09a7cd2e2 100644 --- 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 index e4f668ed7..20878bae5 100644 --- 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
{idf?.get("my-id")}
; }; diff --git a/packages/wonder-blocks-tooltip/src/components/tooltip.tsx b/packages/wonder-blocks-tooltip/src/components/tooltip.tsx index 4aba3a9c9..75098105d 100644 --- a/packages/wonder-blocks-tooltip/src/components/tooltip.tsx +++ b/packages/wonder-blocks-tooltip/src/components/tooltip.tsx @@ -21,6 +21,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { + // eslint-disable-next-line import/no-deprecated UniqueIDProvider, IIdentifierFactory, } from "@khanacademy/wonder-blocks-core";