LG-4899: getLgIds

.changeset/shy-gorillas-lie.md

@@ -0,0 +1,27 @@
+---
+'@leafygreen-ui/confirmation-modal': major
+'@leafygreen-ui/gallery-indicator': major
+'@leafygreen-ui/password-input': major
+'@leafygreen-ui/split-button': major
+'@leafygreen-ui/form-footer': major
+'@leafygreen-ui/form-field': major
+'@leafygreen-ui/text-input': major
+'@leafygreen-ui/typography': major
+'@leafygreen-ui/text-area': major
+'@leafygreen-ui/checkbox': major
+'@leafygreen-ui/select': major
+'@leafygreen-ui/toggle': major
+'@leafygreen-ui/table': major
+'@leafygreen-ui/code': major
+'@leafygreen-ui/menu': major
+'@leafygreen-ui/tabs': major
+---
+
+Updates `data-lgid` to use scope based test ids. These test ids are generated uisng the helper function `getLgIds`. For more information [check out the section in the styleguide about getLgIds](https://github.com/mongodb/leafygreen-ui/blob/d55ae3319908bf68460d15520c499f0092355ca6/STYLEGUIDE.md#getlgids).
+
+Removes public exports for:
+- `LGIDs`
+- `LGIDS_CHECKBOX`
+- `LGIDS_FORM_FIELD`
+- `LGIDS_SELECT`
+- `LGIDS_TYPOGRAPHY`

.changeset/tough-dryers-wonder.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/date-picker': patch
+---
+
+Updates spec file to use updated test ids for `@leafygreen-ui/form-field` components

STYLEGUIDE.md

@@ -18,6 +18,8 @@
   - [Passing darkMode to children](#passing-darkMode-to-children)
   - [File Structure](https://github.com/mongodb/leafygreen-ui/blob/main/stories/Folder-Structure.stories.mdx)
   - [API Patterns](#api-patterns)
+    - [Input errors](#input-errors)
+  - [getLgIds](#getlgids)
 - [References](#references)
 
 # Contribution Guide
@@ -637,6 +639,66 @@ return (
 - Use `errorMessage` prop to set the error message that is displayed next to the input.
 - If `state='error'` but `errorMessage` is not defined, require `aria-describedby`
 
+## getLgIds
+
+The `getLgIds` utility function generates test IDs for components in the LeafyGreen UI library.
+
+The function accepts an optional root identifier, allowing consumers to set a unique base ID for each instance of a component. This base is then used to generate, scoped test IDs, ensuring predictable targeting in tests.
+
+#### Usage
+
+Each component should export a `getLgIds.ts` file. For more information on naming test IDs, [check out the section on BEM-ish patterns](#follow-bem-ish-patterns-when-hard-coding-a-data-testid-or-data-lgid)
+
+```js
+export const DEFAULT_LGID_ROOT = 'lg-component';
+
+export const getLgIds = (root: `lg-${string}` = DEFAULT_LGID_ROOT) => {
+  const ids = {
+    root,
+    button: `${root}-button`,
+  } as const;
+  return ids;
+};
+
+export type GetLgIdsReturnType = ReturnType<typeof getLgIds>;
+```
+
+Inside the component you would use the test IDs by calling `getLgIds()`
+
+#### Component.tsx
+
+```js
+export const Component = forwardRef<
+  HTMLDivElement,
+  ComponentProps,
+>(
+  (
+    {
+      'data-lgid': dataLgId = DEFAULT_LGID_ROOT,
+      ...rest
+    },
+    fwdRef: React.Ref<any>,
+  ) => {
+    const lgIds = getLgIds(dataLgId);
+
+    return (
+      <div
+        data-testid={lgIds.root}
+        data-lgid={lgIds.root}
+        ref={fwdRef}
+      >
+        <button
+          data-testid={lgIds.button}
+          data-lgid={lgIds.button}
+        >
+          Click Me I'm Irish
+       </button>
+      </div>
+    );
+  },
+);
+```
+
 ## References
 
 - [Airbnb Javascript Style Guide](https://github.com/airbnb/javascript)

packages/checkbox/src/Checkbox/Checkbox.tsx

@@ -13,7 +13,7 @@ import {
 } from '@leafygreen-ui/typography';
 
 import { Check } from '../Check';
-import { LGIDS_CHECKBOX } from '../constants';
+import { DEFAULT_LGID_ROOT, getLgIds } from '../utils/getLgIds';
 
 import {
   checkWrapperClassName,
@@ -45,7 +45,7 @@ const Checkbox = React.forwardRef(
       checked: checkedProp,
       className,
       darkMode: darkModeProp,
-      'data-lgid': dataLgId = LGIDS_CHECKBOX.root,
+      'data-lgid': dataLgId = DEFAULT_LGID_ROOT,
       description,
       disabled = false,
       id: idProp,
@@ -63,6 +63,8 @@ const Checkbox = React.forwardRef(
     const { darkMode, theme } = useDarkMode(darkModeProp);
     const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp);
 
+    const lgIds = getLgIds(dataLgId);
+
     const [checked, setChecked] = React.useState(defaultChecked);
     const isChecked = React.useMemo(
       () => (checkedProp != null ? checkedProp : checked),
@@ -124,7 +126,7 @@ const Checkbox = React.forwardRef(
             },
             className,
           )}
-          data-lgid={dataLgId}
+          data-lgid={lgIds.root}
           style={style}
         >
           <Label
@@ -134,6 +136,7 @@ const Checkbox = React.forwardRef(
             className={cx(labelStyle, labelHoverStyle[theme], {
               [disabledLabelStyle]: disabled,
             })}
+            data-lgid={lgIds.root}
           >
             <input
               {...rest}
@@ -178,7 +181,11 @@ const Checkbox = React.forwardRef(
           </Label>
 
           {description && (
-            <Description className={descriptionStyle} disabled={disabled}>
+            <Description
+              className={descriptionStyle}
+              disabled={disabled}
+              data-lgid={lgIds.root}
+            >
               {description}
             </Description>
           )}

packages/checkbox/src/constants.ts

@@ -7,9 +7,3 @@ export const insetPct = 100 - hypotenusePct;
 export const rippleScale = 2.25;
 export const rippleTransitionScale = 4;
 export const rippleTransitionDelay = -rippleTransitionScale / rippleScale;
-
-const LGID_ROOT = 'lg-checkbox';
-
-export const LGIDS_CHECKBOX = {
-  root: LGID_ROOT,
-} as const;

packages/checkbox/src/index.ts

@@ -1,3 +1,7 @@
 export { type CheckboxProps, checkWrapperClassName, default } from './Checkbox';
-export { LGIDS_CHECKBOX } from './constants';
-export { getTestUtils } from './utils';
+export {
+  DEFAULT_LGID_ROOT,
+  getLgIds,
+  type GetLgIdsReturnType,
+  getTestUtils,
+} from './utils';

packages/checkbox/src/utils/getLgIds.ts

@@ -0,0 +1,10 @@
+export const DEFAULT_LGID_ROOT = 'lg-checkbox';
+
+export const getLgIds = (root: `lg-${string}` = DEFAULT_LGID_ROOT) => {
+  const ids = {
+    root,
+  } as const;
+  return ids;
+};
+
+export type GetLgIdsReturnType = ReturnType<typeof getLgIds>;

packages/checkbox/src/utils/getTestUtils.tsx

@@ -1,34 +1,35 @@
 import { getByLgId, queryBySelector } from '@lg-tools/test-harnesses';
 
-import { LGIDS_TYPOGRAPHY } from '@leafygreen-ui/typography';
-
-import { LGIDS_CHECKBOX } from '../constants';
+import { getLgIds as getLgTypographyLgIds } from '@leafygreen-ui/typography';
 
+import { DEFAULT_LGID_ROOT, getLgIds } from './getLgIds';
 import { CheckboxTestUtilsReturnType } from './getTestUtils.types';
 
 export const getTestUtils = (
-  lgId: string = LGIDS_CHECKBOX.root,
+  lgId: `lg-${string}` = DEFAULT_LGID_ROOT,
 ): CheckboxTestUtilsReturnType => {
+  const lgIds = getLgIds(lgId);
+  const typographyLgIds = getLgTypographyLgIds(lgIds.root);
   /**
    * Queries the DOM for the element using the `data-lgid` data attribute.
    * Will throw if no element is found.
    */
-  const element = getByLgId!(lgId);
+  const element = getByLgId!(lgIds.root);
 
   /**
    * Queries the `element` for the label element. Will return `null` if the label is not found.
    */
   const getLabel = queryBySelector<HTMLLabelElement>(
     element,
-    `[data-lgid=${LGIDS_TYPOGRAPHY.label}]`,
+    `[data-lgid=${typographyLgIds.label}]`,
   );
 
   /**
    * Queries the `element` for the description element. Will return `null` if the desription is not found.
    */
   const getDescription = queryBySelector<HTMLElement>(
     element,
-    `[data-lgid=${LGIDS_TYPOGRAPHY.description}]`,
+    `[data-lgid=${typographyLgIds.description}]`,
   );
 
   /**

packages/checkbox/src/utils/index.ts

@@ -1 +1,6 @@
+export {
+  DEFAULT_LGID_ROOT,
+  getLgIds,
+  type GetLgIdsReturnType,
+} from './getLgIds';
 export { getTestUtils } from './getTestUtils';

packages/code/src/Code/Code.tsx

@@ -60,7 +60,7 @@ function Code({
   const { theme, darkMode } = useDarkMode(darkModeProp);
   const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp);
 
-  const lgIds = getLgIds(dataLgId);
+  const lgIds = React.useMemo(() => getLgIds(dataLgId), [dataLgId]);
 
   const showPanel = !!panel;
 
@@ -189,7 +189,7 @@ function Code({
       <div
         className={getWrapperStyles({ theme, className })}
         data-language={languageProp}
-        data-lgid={dataLgId}
+        data-lgid={lgIds.root}
       >
         <div
           className={getCodeStyles({

packages/code/src/CopyButton/CopyButton.tsx

@@ -39,7 +39,7 @@ function CopyButton({ onCopy, contents, className, ...rest }: CopyProps) {
   const { portalContainer } = usePopoverPortalContainer();
   const { showPanel, isLoading } = useCodeContext();
 
-  const lgids = getLgIds();
+  const lgIds = getLgIds();
 
   /**
    * toggles `tooltipOpen` state
@@ -129,8 +129,8 @@ function CopyButton({ onCopy, contents, className, ...rest }: CopyProps) {
 
   const sharedButtonProps = {
     'aria-label': COPY_TEXT,
-    'data-testid': lgids.copyButton,
-    'data-lgid': lgids.copyButton,
+    'data-testid': lgIds.copyButton,
+    'data-lgid': lgIds.copyButton,
     className: getCopyButtonStyles({
       theme,
       copied,
@@ -149,7 +149,7 @@ function CopyButton({ onCopy, contents, className, ...rest }: CopyProps) {
   return (
     <Tooltip
       align={Align.Top}
-      data-testid={lgids.copyTooltip}
+      data-testid={lgIds.copyTooltip}
       justify={Justify.Middle}
       open={tooltipOpen}
       renderMode={RenderMode.TopLayer}

packages/code/src/Panel/Panel.tsx

@@ -32,7 +32,7 @@ function Panel({
   const { theme } = useDarkMode();
   const { contents, language } = useCodeContext();
 
-  const lgids = getLgIds();
+  const lgIds = getLgIds();
 
   const hasTitle = !!title;
 
@@ -57,14 +57,14 @@ function Panel({
   return (
     <div
       className={cx(getBasePanelStyle({ hasTitle, theme, className }))}
-      data-lgid={lgids.panel}
-      data-testid={lgids.panel}
+      data-lgid={lgIds.panel}
+      data-testid={lgIds.panel}
       {...rest}
     >
       {hasTitle && (
         <Body
-          data-lgid={lgids.title}
-          data-testid={lgids.title}
+          data-lgid={lgIds.title}
+          data-testid={lgIds.title}
           className={getPanelTitleStyles(theme)}
         >
           {title}

packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx

@@ -8,11 +8,13 @@ import {
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
-import { getLgIds } from '@leafygreen-ui/modal';
+import { getLgIds as getLgModalIds } from '@leafygreen-ui/modal';
 
-import { LGIDS_CONFIRMATION_MODAL } from '../constants';
+import { getLgIds } from '..';
 import ConfirmationModal from '..';
 
+const lgIds = getLgIds();
+
 const WrappedModal = ({
   open: initialOpen,
   ...props
@@ -256,9 +258,9 @@ describe('packages/confirmation-modal', () => {
     ];
 
     const buttonClickCases = [
-      { testCase: 'on cancel', testId: LGIDS_CONFIRMATION_MODAL.cancel },
-      { testCase: 'on confirm', testId: LGIDS_CONFIRMATION_MODAL.confirm },
-      { testCase: 'on modal close', testId: getLgIds().close },
+      { testCase: 'on cancel', testId: lgIds.cancel },
+      { testCase: 'on confirm', testId: lgIds.confirm },
+      { testCase: 'on modal close', testId: getLgModalIds().close },
     ];
 
     describe.each(requiredInputTextCases)(
@@ -272,9 +274,7 @@ describe('packages/confirmation-modal', () => {
             });
 
           const modal = getByRole('dialog');
-          const confirmationButton = await findByTestId(
-            LGIDS_CONFIRMATION_MODAL.confirm,
-          );
+          const confirmationButton = await findByTestId(lgIds.confirm);
           const buttonToClick = await findByTestId(testId);
           expect(confirmationButton).toHaveAttribute(
             'aria-disabled',