Skip to content

Commit 164b15f

Browse files
shaneezashaneeza
authored
LG-4899: getLgIds (#2786)
* checkboc lgids * confirmation modal lgids * checkbox specs * checkbox testUtils type * form-field lgids * confirmation modal use root for lgids * form footer getLgIds * add DEFAULT_LGID_ROOT import * passwordInput getLgIds * tabs getLgIds * textArea getLgIds * textInput getLgIds * toggle getLgIds * table getLgIds * menu getLgIds * splitButton getLgIds * select getLgIds * typography getLgIds * fix failing tests * some clean up * fix test * lint * some cleanup * fix failing tests * styleguide * update code and select * remove constants folder and update exports * changeset for date picker * update styleguide * fix lint and update styleguide * styleguide * add LgIdString type and update styleguide * use root as default * fix build error * remove memo * fix failing text-area tests * update code lgIds to use root * update changeset * update label to description in typography * lint * remove default dataLgId * no longer passing IDs to copyButton spec * add drawer changeset * update changesets related to getLgIds * add data-testid * fix failing tests * move getLgIds in modal, move test ids in confirmation moda * fix failing tests
1 parent 0faa944 commit 164b15f

File tree

157 files changed

+1026
-505
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

157 files changed

+1026
-505
lines changed

‎.changeset/big-stars-share.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/toggle': patch
3+
---
4+
5+
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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/lib': patch
3+
---
4+
5+
Export `LgIdString` type

‎.changeset/old-mangos-vanish.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
'@leafygreen-ui/code': major
3+
---
4+
5+
- Move `lgIds` to context, use `LgIdString` type, and remove setting `DEFAULT_LGID_ROOT`.
6+
- Update all IDs to return the unique root identifier passed to `data-lgid`:
7+
8+
**Before**
9+
```tsx
10+
export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
11+
const ids = {
12+
root,
13+
panel: `${DEFAULT_LGID_ROOT}-panel`,
14+
select: `${root}-select`,
15+
copyButton: `${DEFAULT_LGID_ROOT}-copy_button`,
16+
copyTooltip: `${DEFAULT_LGID_ROOT}-copy_tooltip`,
17+
expandButton: `${root}-expand_button`,
18+
skeleton: `${root}-skeleton`,
19+
pre: `${root}-pre`,
20+
title: `${DEFAULT_LGID_ROOT}-title`,
21+
} as const;
22+
return ids;
23+
};
24+
```
25+
26+
**After**
27+
```tsx
28+
export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
29+
const ids = {
30+
root,
31+
panel: `${root}-panel`, // Updated to use unique root identifier
32+
select: `${root}-select`,
33+
copyButton: `${root}-copy_button`, // Updated to use unique root identifier
34+
copyTooltip: `${root}-copy_tooltip`, // Updated to use unique root identifier
35+
expandButton: `${root}-expand_button`,
36+
skeleton: `${root}-skeleton`,
37+
pre: `${root}-pre`,
38+
title: `${root}-title`, // Updated to use unique root identifier
39+
} as const;
40+
return ids;
41+
};
42+
```

‎.changeset/short-baboons-kiss.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@leafygreen-ui/button': patch
3+
'@leafygreen-ui/drawer': patch
4+
---
5+
6+
Use `LgIdString` type and remove setting `DEFAULT_LGID_ROOT`.

‎.changeset/shy-gorillas-lie.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
'@leafygreen-ui/confirmation-modal': major
3+
'@leafygreen-ui/gallery-indicator': major
4+
'@leafygreen-ui/password-input': major
5+
'@leafygreen-ui/split-button': major
6+
'@leafygreen-ui/form-footer': major
7+
'@leafygreen-ui/form-field': major
8+
'@leafygreen-ui/text-input': major
9+
'@leafygreen-ui/typography': major
10+
'@leafygreen-ui/text-area': major
11+
'@leafygreen-ui/checkbox': major
12+
'@leafygreen-ui/select': major
13+
'@leafygreen-ui/table': major
14+
'@leafygreen-ui/modal': major
15+
'@leafygreen-ui/menu': major
16+
'@leafygreen-ui/tabs': major
17+
---
18+
19+
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).
20+
21+
Removes public exports for:
22+
- `LGIDs`
23+
- `LGIDS_CHECKBOX`
24+
- `LGIDS_FORM_FIELD`
25+
- `LGIDS_SELECT`
26+
- `LGIDS_TYPOGRAPHY`

‎.changeset/tough-dryers-wonder.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/date-picker': patch
3+
---
4+
5+
Updates spec file to use updated test ids for `@leafygreen-ui/form-field` components

‎STYLEGUIDE.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
- [Passing darkMode to children](#passing-darkMode-to-children)
1919
- [File Structure](https://github.com/mongodb/leafygreen-ui/blob/main/stories/Folder-Structure.stories.mdx)
2020
- [API Patterns](#api-patterns)
21+
- [Input errors](#input-errors)
22+
- [getLgIds](#getlgids)
2123
- [References](#references)
2224

2325
# Contribution Guide
@@ -637,6 +639,81 @@ return (
637639
- Use `errorMessage` prop to set the error message that is displayed next to the input.
638640
- If `state='error'` but `errorMessage` is not defined, require `aria-describedby`
639641

642+
## getLgIds
643+
644+
The `getLgIds` utility function generates test IDs for components in the LeafyGreen UI library.
645+
646+
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.
647+
648+
#### Usage
649+
650+
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.
651+
652+
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).
653+
654+
```js
655+
// getLgIds.ts
656+
657+
export const DEFAULT_LGID_ROOT = 'lg-component';
658+
659+
export const getLgIds = (root: `lg-${string}` = DEFAULT_LGID_ROOT) => {
660+
const ids = {
661+
root,
662+
button: `${root}-button`,
663+
input: `${root}-input`,
664+
} as const;
665+
return ids;
666+
};
667+
668+
export type GetLgIdsReturnType = ReturnType<typeof getLgIds>;
669+
```
670+
671+
Inside the component you can use the test IDs by calling `getLgIds()`:
672+
673+
```js
674+
// Component.tsx
675+
676+
const lgIds = getLgIds();
677+
678+
// lgIds.root = 'lg-component'
679+
// lgIds.button = 'lg-component-button'
680+
// lgIds.input -> 'lg-component-input'
681+
```
682+
683+
#### Component.tsx
684+
685+
```js
686+
export const Component = forwardRef<
687+
HTMLDivElement,
688+
ComponentProps,
689+
>(
690+
(
691+
{
692+
'data-lgid': dataLgId,
693+
...rest
694+
},
695+
fwdRef: React.Ref<any>,
696+
) => {
697+
const lgIds = getLgIds(dataLgId);
698+
699+
return (
700+
<div
701+
data-testid={lgIds.root}
702+
data-lgid={lgIds.root}
703+
ref={fwdRef}
704+
>
705+
<button
706+
data-testid={lgIds.button}
707+
data-lgid={lgIds.button}
708+
>
709+
Click Me I'm Irish
710+
</button>
711+
</div>
712+
);
713+
},
714+
);
715+
```
716+
640717
## References
641718
642719
- [Airbnb Javascript Style Guide](https://github.com/airbnb/javascript)

‎packages/button/src/Button/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { BaseFontSize } from '@leafygreen-ui/tokens';
1111
import { ButtonContent } from '../ButtonContent/ButtonContent';
1212
import { ButtonClassName } from '../styles';
1313
import { BaseButtonProps, Size, Variant } from '../types';
14-
import { DEFAULT_LGID_ROOT, getLgIds } from '../utils';
14+
import { getLgIds } from '../utils';
1515

1616
import { getClassName } from './Button.styles';
1717

@@ -24,7 +24,7 @@ export const Button = InferredPolymorphic<BaseButtonProps, 'button'>(
2424
variant = Variant.Default,
2525
size = Size.Default,
2626
darkMode: darkModeProp,
27-
'data-lgid': dataLgId = DEFAULT_LGID_ROOT,
27+
'data-lgid': dataLgId,
2828
baseFontSize = BaseFontSize.Body1,
2929
disabled = false,
3030
onClick,

‎packages/button/src/utils/getLgIds.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { LgIdString } from '@leafygreen-ui/lib';
2+
13
export const DEFAULT_LGID_ROOT = 'lg-button';
24

3-
export const getLgIds = (root: `lg-${string}` = DEFAULT_LGID_ROOT) => {
5+
export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
46
return {
57
root,
68
} as const;

‎packages/button/src/utils/getTestUtils.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
// import { queryByLgId } from '@lg-tools/test-harnesses';
2-
// import { findByLgId } from '@lg-tools/test-harnesses';
31
import { findByLgId, getByLgId, queryByLgId } from '@lg-tools/test-harnesses';
42

3+
import { LgIdString } from '@leafygreen-ui/lib';
4+
55
import { DEFAULT_LGID_ROOT, getLgIds } from './getLgIds';
66
import { GetTestUtilsReturnType } from './getTestUtils.types';
77

88
export const getTestUtils = <T extends HTMLElement = HTMLElement>(
9-
lgId: `lg-${string}` = DEFAULT_LGID_ROOT,
9+
lgId: LgIdString = DEFAULT_LGID_ROOT,
1010
): GetTestUtilsReturnType<T> => {
1111
const lgIds = getLgIds(lgId);
1212

‎packages/checkbox/src/Checkbox/Checkbox.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from '@leafygreen-ui/typography';
1414

1515
import { Check } from '../Check';
16-
import { LGIDS_CHECKBOX } from '../constants';
16+
import { getLgIds } from '../utils/getLgIds';
1717

1818
import {
1919
checkWrapperClassName,
@@ -45,7 +45,7 @@ const Checkbox = React.forwardRef(
4545
checked: checkedProp,
4646
className,
4747
darkMode: darkModeProp,
48-
'data-lgid': dataLgId = LGIDS_CHECKBOX.root,
48+
'data-lgid': dataLgId,
4949
description,
5050
disabled = false,
5151
id: idProp,
@@ -63,6 +63,8 @@ const Checkbox = React.forwardRef(
6363
const { darkMode, theme } = useDarkMode(darkModeProp);
6464
const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp);
6565

66+
const lgIds = getLgIds(dataLgId);
67+
6668
const [checked, setChecked] = React.useState(defaultChecked);
6769
const isChecked = React.useMemo(
6870
() => (checkedProp != null ? checkedProp : checked),
@@ -124,7 +126,8 @@ const Checkbox = React.forwardRef(
124126
},
125127
className,
126128
)}
127-
data-lgid={dataLgId}
129+
data-lgid={lgIds.root}
130+
data-testid={lgIds.root}
128131
style={style}
129132
>
130133
<Label
@@ -134,6 +137,8 @@ const Checkbox = React.forwardRef(
134137
className={cx(labelStyle, labelHoverStyle[theme], {
135138
[disabledLabelStyle]: disabled,
136139
})}
140+
data-lgid={lgIds.root}
141+
data-testid={lgIds.root}
137142
>
138143
<input
139144
{...rest}
@@ -178,7 +183,12 @@ const Checkbox = React.forwardRef(
178183
</Label>
179184

180185
{description && (
181-
<Description className={descriptionStyle} disabled={disabled}>
186+
<Description
187+
className={descriptionStyle}
188+
disabled={disabled}
189+
data-lgid={lgIds.root}
190+
data-testid={lgIds.root}
191+
>
182192
{description}
183193
</Description>
184194
)}

‎packages/checkbox/src/constants.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,3 @@ export const insetPct = 100 - hypotenusePct;
77
export const rippleScale = 2.25;
88
export const rippleTransitionScale = 4;
99
export const rippleTransitionDelay = -rippleTransitionScale / rippleScale;
10-
11-
const LGID_ROOT = 'lg-checkbox';
12-
13-
export const LGIDS_CHECKBOX = {
14-
root: LGID_ROOT,
15-
} as const;

‎packages/checkbox/src/index.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
export { type CheckboxProps, checkWrapperClassName, default } from './Checkbox';
2-
export { LGIDS_CHECKBOX } from './constants';
3-
export { getTestUtils } from './utils';
2+
export {
3+
DEFAULT_LGID_ROOT,
4+
getLgIds,
5+
type GetLgIdsReturnType,
6+
getTestUtils,
7+
} from './utils';

‎packages/checkbox/src/utils/getLgIds.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LgIdString } from '@leafygreen-ui/lib';
2+
3+
export const DEFAULT_LGID_ROOT = 'lg-checkbox';
4+
5+
export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
6+
const ids = {
7+
root,
8+
} as const;
9+
return ids;
10+
};
11+
12+
export type GetLgIdsReturnType = ReturnType<typeof getLgIds>;

‎packages/checkbox/src/utils/getTestUtils.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
11
import { getByLgId, queryBySelector } from '@lg-tools/test-harnesses';
22

3-
import { LGIDS_TYPOGRAPHY } from '@leafygreen-ui/typography';
4-
5-
import { LGIDS_CHECKBOX } from '../constants';
3+
import { LgIdString } from '@leafygreen-ui/lib';
4+
import { getLgIds as getLgTypographyLgIds } from '@leafygreen-ui/typography';
65

6+
import { DEFAULT_LGID_ROOT, getLgIds } from './getLgIds';
77
import { CheckboxTestUtilsReturnType } from './getTestUtils.types';
88

99
export const getTestUtils = (
10-
lgId: string = LGIDS_CHECKBOX.root,
10+
lgId: LgIdString = DEFAULT_LGID_ROOT,
1111
): CheckboxTestUtilsReturnType => {
12+
const lgIds = getLgIds(lgId);
13+
const typographyLgIds = getLgTypographyLgIds(lgIds.root);
1214
/**
1315
* Queries the DOM for the element using the `data-lgid` data attribute.
1416
* Will throw if no element is found.
1517
*/
16-
const element = getByLgId!(lgId);
18+
const element = getByLgId!(lgIds.root);
1719

1820
/**
1921
* Queries the `element` for the label element. Will return `null` if the label is not found.
2022
*/
2123
const getLabel = queryBySelector<HTMLLabelElement>(
2224
element,
23-
`[data-lgid=${LGIDS_TYPOGRAPHY.label}]`,
25+
`[data-lgid=${typographyLgIds.label}]`,
2426
);
2527

2628
/**
2729
* Queries the `element` for the description element. Will return `null` if the desription is not found.
2830
*/
2931
const getDescription = queryBySelector<HTMLElement>(
3032
element,
31-
`[data-lgid=${LGIDS_TYPOGRAPHY.description}]`,
33+
`[data-lgid=${typographyLgIds.description}]`,
3234
);
3335

3436
/**

‎packages/checkbox/src/utils/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1+
export {
2+
DEFAULT_LGID_ROOT,
3+
getLgIds,
4+
type GetLgIdsReturnType,
5+
} from './getLgIds';
16
export { getTestUtils } from './getTestUtils';

0 commit comments

Comments
 (0)