Refactor to use getLgIds instead of constant LGIDs

.changeset/perfect-badgers-relate.md

@@ -5,4 +5,4 @@
 Stub for Drawer changeset
 
 - Exports `getTestUtils`, a util to reliably interact with LG `Drawer` component instances in a product test suite. For more details, check out the [README](https://github.com/mongodb/leafygreen-ui/tree/main/packages/drawer#test-harnesses)
-- Exports the constant, `LGIDs`, which stores `data-lgid` values.
+- Exports `getLgIds`, a util to instantiate an object of `data-lgid` values for a given LG `Drawer` component instance.

packages/drawer/src/Drawer/Drawer.constants.ts

@@ -1,8 +1 @@
-const LGID_ROOT = 'lg-drawer';
-
-export const LGIDs = {
-  root: LGID_ROOT,
-  closeButton: `${LGID_ROOT}-close_button`,
-} as const;
-
 export const PANEL_WIDTH = 432;

packages/drawer/src/Drawer/Drawer.spec.tsx

@@ -3,9 +3,9 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
-import { getTestUtils } from '../utils';
+import { getLgIds, getTestUtils } from '../utils';
 
-import { Drawer, DrawerProps, LGIDs } from '.';
+import { Drawer, DrawerProps } from '.';
 
 const drawerContent = 'Drawer content';
 
@@ -52,8 +52,9 @@ describe('packages/drawer', () => {
       });
 
       test('close button is not rendered when onClose is not provided', () => {
+        const lgIds = getLgIds();
         const { queryByTestId } = renderDrawer({ open: true });
-        expect(queryByTestId(LGIDs.closeButton)).toBeNull();
+        expect(queryByTestId(lgIds.closeButton)).not.toBeInTheDocument();
       });
 
       test('calls onClose when close button is clicked', () => {

packages/drawer/src/Drawer/Drawer.tsx

@@ -9,7 +9,8 @@ import LeafyGreenProvider, {
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { Body } from '@leafygreen-ui/typography';
 
-import { LGIDs } from './Drawer.constants';
+import { DEFAULT_LGID_ROOT, getLgIds } from '../utils';
+
 import { getDrawerStyles, getHeaderStyles } from './Drawer.styles';
 import { DrawerProps } from './Drawer.types';
 
@@ -18,7 +19,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
     {
       children,
       className,
-      'data-lgid': dataLgId = LGIDs.root,
+      'data-lgid': dataLgId = DEFAULT_LGID_ROOT,
       id: idProp,
       onClose,
       open = false,
@@ -29,6 +30,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
   ) => {
     const { darkMode, theme } = useDarkMode();
 
+    const lgIds = getLgIds(dataLgId);
     const id = useIdAllocator({ prefix: 'drawer', id: idProp });
     const titleId = useIdAllocator({ prefix: 'drawer' });
 
@@ -40,7 +42,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
           aria-hidden={!open}
           aria-labelledby={titleId}
           className={getDrawerStyles({ className, open, theme })}
-          data-lgid={dataLgId}
+          data-lgid={lgIds.root}
           id={id}
           ref={fwdRef}
           role="dialog"
@@ -58,8 +60,8 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
             {showCloseButton && (
               <IconButton
                 aria-label="Close drawer"
-                data-lgid={LGIDs.closeButton}
-                data-testid={LGIDs.closeButton}
+                data-lgid={lgIds.closeButton}
+                data-testid={lgIds.closeButton}
                 onClick={onClose}
               >
                 <XIcon />

packages/drawer/src/Drawer/index.ts

@@ -1,3 +1,2 @@
 export { Drawer } from './Drawer';
-export { LGIDs } from './Drawer.constants';
 export { type DrawerProps } from './Drawer.types';

packages/drawer/src/index.ts

@@ -1,2 +1,2 @@
-export { Drawer, type DrawerProps, LGIDs } from './Drawer';
-export { getTestUtils } from './utils';
+export { Drawer, type DrawerProps } from './Drawer';
+export { getLgIds, getTestUtils, type GetTestUtilsReturnType } from './utils';

packages/drawer/src/utils/getLgIds.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_LGID_ROOT = 'drawer';
+
+export const getLgIds = (root = DEFAULT_LGID_ROOT) => ({
+  root,
+  closeButton: `${root}-close_button`,
+});

packages/drawer/src/utils/getTestUtils.tsx

@@ -2,24 +2,25 @@ import { getByLgId } from '@lg-tools/test-harnesses';
 
 import { getTestUtils as getButtonTestUtils } from '@leafygreen-ui/button';
 
-import { LGIDs } from '../Drawer';
-
+import { DEFAULT_LGID_ROOT, getLgIds } from './getLgIds';
 import { GetTestUtilsReturnType } from './getTestUtils.types';
 
 export const getTestUtils = <T extends HTMLElement = HTMLElement>(
-  lgId: string = LGIDs.root,
+  lgId: string = DEFAULT_LGID_ROOT,
 ): GetTestUtilsReturnType<T> => {
+  const lgIds = getLgIds(lgId);
+
   /**
    * Queries the DOM for the element using the `data-lgid` data attribute.
    * Will throw if no element is found.
    */
-  const element: T = getByLgId!(lgId);
+  const element: T = getByLgId!(lgIds.root);
 
   /**
    * Returns the button test utils for the close button.
    */
   const getCloseButtonUtils = () =>
-    getButtonTestUtils<HTMLButtonElement>(LGIDs.closeButton);
+    getButtonTestUtils<HTMLButtonElement>(lgIds.closeButton);
 
   /**
    * Returns the aria-hidden attribute on the drawer.

packages/drawer/src/utils/index.ts

@@ -1 +1,3 @@
+export { DEFAULT_LGID_ROOT, getLgIds } from './getLgIds';
 export { getTestUtils } from './getTestUtils';
+export type { GetTestUtilsReturnType } from './getTestUtils.types';