LG-4899: getLgIds

.changeset/big-stars-share.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/toggle': patch
+---
+
+Updates `data-lgid` and `data-testid` to use scope based test IDs. These test IDs are generated using the helper utility `getLgIds`. For more information [check out the section in the styleguide about getLgIds](https://github.com/mongodb/leafygreen-ui/blob/main/STYLEGUIDE.md#getlgids).

.changeset/breezy-paws-attend.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': patch
+---
+
+Export `LgIdString` type

.changeset/old-mangos-vanish.md

@@ -0,0 +1,42 @@
+---
+'@leafygreen-ui/code': major
+---
+
+- Move `lgIds` to context, use `LgIdString` type, and remove setting `DEFAULT_LGID_ROOT`. 
+- Update all IDs to return the unique root identifier passed to `data-lgid`: 
+
+  **Before**
+    ```tsx
+    export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
+      const ids = {
+        root,
+        panel: `${DEFAULT_LGID_ROOT}-panel`,
+        select: `${root}-select`,
+        copyButton: `${DEFAULT_LGID_ROOT}-copy_button`,
+        copyTooltip: `${DEFAULT_LGID_ROOT}-copy_tooltip`,
+        expandButton: `${root}-expand_button`,
+        skeleton: `${root}-skeleton`,
+        pre: `${root}-pre`,
+        title: `${DEFAULT_LGID_ROOT}-title`,
+      } as const;
+      return ids;
+    };
+    ```
+
+  **After**
+    ```tsx
+    export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
+      const ids = {
+        root,
+        panel: `${root}-panel`, // Updated to use unique root identifier
+        select: `${root}-select`,
+        copyButton: `${root}-copy_button`, // Updated to use unique root identifier
+        copyTooltip: `${root}-copy_tooltip`, // Updated to use unique root identifier
+        expandButton: `${root}-expand_button`,
+        skeleton: `${root}-skeleton`,
+        pre: `${root}-pre`,
+        title: `${root}-title`, // Updated to use unique root identifier
+      } as const;
+      return ids;
+    };
+    ```

.changeset/short-baboons-kiss.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/button': patch
+'@leafygreen-ui/drawer': patch
+---
+
+Use `LgIdString` type and remove setting `DEFAULT_LGID_ROOT`.

.changeset/shy-gorillas-lie.md

@@ -0,0 +1,26 @@
+---
+'@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/table': major
+'@leafygreen-ui/modal': major
+'@leafygreen-ui/menu': major
+'@leafygreen-ui/tabs': major
+---
+
+Updates `data-lgid` and `data-testid` to use scope based test IDs. These test IDs are generated using the helper utility `getLgIds`. For more information [check out the section in the styleguide about getLgIds](https://github.com/mongodb/leafygreen-ui/blob/main/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,81 @@ 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 includes a `getLgIds.ts` file that exports the `getLgIds` utility. This function returns an object containing IDs for each trackable element within the component.
+
+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
+// getLgIds.ts
+
+export const DEFAULT_LGID_ROOT = 'lg-component';
+
+export const getLgIds = (root: `lg-${string}` = DEFAULT_LGID_ROOT) => {
+  const ids = {
+    root,
+    button: `${root}-button`,
+    input: `${root}-input`,
+  } as const;
+  return ids;
+};
+
+export type GetLgIdsReturnType = ReturnType<typeof getLgIds>;
+```
+
+Inside the component you can use the test IDs by calling `getLgIds()`:
+
+```js
+// Component.tsx
+
+const lgIds = getLgIds();
+
+// lgIds.root = 'lg-component'
+// lgIds.button = 'lg-component-button'
+// lgIds.input -> 'lg-component-input'
+```
+
+#### Component.tsx
+
+```js
+export const Component = forwardRef<
+  HTMLDivElement,
+  ComponentProps,
+>(
+  (
+    {
+      'data-lgid': dataLgId,
+      ...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/button/src/Button/Button.tsx

@@ -11,7 +11,7 @@ import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { ButtonContent } from '../ButtonContent/ButtonContent';
 import { ButtonClassName } from '../styles';
 import { BaseButtonProps, Size, Variant } from '../types';
-import { DEFAULT_LGID_ROOT, getLgIds } from '../utils';
+import { getLgIds } from '../utils';
 
 import { getClassName } from './Button.styles';
 
@@ -24,7 +24,7 @@ export const Button = InferredPolymorphic<BaseButtonProps, 'button'>(
       variant = Variant.Default,
       size = Size.Default,
       darkMode: darkModeProp,
-      'data-lgid': dataLgId = DEFAULT_LGID_ROOT,
+      'data-lgid': dataLgId,
       baseFontSize = BaseFontSize.Body1,
       disabled = false,
       onClick,

packages/button/src/utils/getLgIds.ts

@@ -1,6 +1,8 @@
+import { LgIdString } from '@leafygreen-ui/lib';
+
 export const DEFAULT_LGID_ROOT = 'lg-button';
 
-export const getLgIds = (root: `lg-${string}` = DEFAULT_LGID_ROOT) => {
+export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
   return {
     root,
   } as const;

packages/button/src/utils/getTestUtils.ts

@@ -1,12 +1,12 @@
-// import { queryByLgId } from '@lg-tools/test-harnesses';
-// import { findByLgId } from '@lg-tools/test-harnesses';
 import { findByLgId, getByLgId, queryByLgId } from '@lg-tools/test-harnesses';
 
+import { LgIdString } from '@leafygreen-ui/lib';
+
 import { DEFAULT_LGID_ROOT, getLgIds } from './getLgIds';
 import { GetTestUtilsReturnType } from './getTestUtils.types';
 
 export const getTestUtils = <T extends HTMLElement = HTMLElement>(
-  lgId: `lg-${string}` = DEFAULT_LGID_ROOT,
+  lgId: LgIdString = DEFAULT_LGID_ROOT,
 ): GetTestUtilsReturnType<T> => {
   const lgIds = getLgIds(lgId);
 

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 { 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,
       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,8 @@ const Checkbox = React.forwardRef(
             },
             className,
           )}
-          data-lgid={dataLgId}
+          data-lgid={lgIds.root}
+          data-testid={lgIds.root}
           style={style}
         >
           <Label
@@ -134,6 +137,8 @@ const Checkbox = React.forwardRef(
             className={cx(labelStyle, labelHoverStyle[theme], {
               [disabledLabelStyle]: disabled,
             })}
+            data-lgid={lgIds.root}
+            data-testid={lgIds.root}
           >
             <input
               {...rest}
@@ -178,7 +183,12 @@ const Checkbox = React.forwardRef(
           </Label>
 
           {description && (
-            <Description className={descriptionStyle} disabled={disabled}>
+            <Description
+              className={descriptionStyle}
+              disabled={disabled}
+              data-lgid={lgIds.root}
+              data-testid={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,12 @@
+import { LgIdString } from '@leafygreen-ui/lib';
+
+export const DEFAULT_LGID_ROOT = 'lg-checkbox';
+
+export const getLgIds = (root: LgIdString = 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,36 @@
 import { getByLgId, queryBySelector } from '@lg-tools/test-harnesses';
 
-import { LGIDS_TYPOGRAPHY } from '@leafygreen-ui/typography';
-
-import { LGIDS_CHECKBOX } from '../constants';
+import { LgIdString } from '@leafygreen-ui/lib';
+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: LgIdString = 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';