diff --git a/.changeset/big-stars-share.md b/.changeset/big-stars-share.md new file mode 100644 index 0000000000..56e0705cc3 --- /dev/null +++ b/.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). diff --git a/.changeset/breezy-paws-attend.md b/.changeset/breezy-paws-attend.md new file mode 100644 index 0000000000..20bd4d615b --- /dev/null +++ b/.changeset/breezy-paws-attend.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/lib': patch +--- + +Export `LgIdString` type diff --git a/.changeset/old-mangos-vanish.md b/.changeset/old-mangos-vanish.md new file mode 100644 index 0000000000..786836a2e7 --- /dev/null +++ b/.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; + }; + ``` \ No newline at end of file diff --git a/.changeset/short-baboons-kiss.md b/.changeset/short-baboons-kiss.md new file mode 100644 index 0000000000..772efb35c7 --- /dev/null +++ b/.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`. diff --git a/.changeset/shy-gorillas-lie.md b/.changeset/shy-gorillas-lie.md new file mode 100644 index 0000000000..bc60e0988b --- /dev/null +++ b/.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` \ No newline at end of file diff --git a/.changeset/tough-dryers-wonder.md b/.changeset/tough-dryers-wonder.md new file mode 100644 index 0000000000..c8e8bb3167 --- /dev/null +++ b/.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 diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md index 5ecbe547bc..42a4249411 100644 --- a/STYLEGUIDE.md +++ b/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; +``` + +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, + ) => { + const lgIds = getLgIds(dataLgId); + + return ( +
+ +
+ ); + }, +); +``` + ## References - [Airbnb Javascript Style Guide](https://github.com/airbnb/javascript) diff --git a/packages/button/src/Button/Button.tsx b/packages/button/src/Button/Button.tsx index 057a92982e..a709e19474 100644 --- a/packages/button/src/Button/Button.tsx +++ b/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( variant = Variant.Default, size = Size.Default, darkMode: darkModeProp, - 'data-lgid': dataLgId = DEFAULT_LGID_ROOT, + 'data-lgid': dataLgId, baseFontSize = BaseFontSize.Body1, disabled = false, onClick, diff --git a/packages/button/src/utils/getLgIds.ts b/packages/button/src/utils/getLgIds.ts index 34ae600129..4123b30b1b 100644 --- a/packages/button/src/utils/getLgIds.ts +++ b/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; diff --git a/packages/button/src/utils/getTestUtils.ts b/packages/button/src/utils/getTestUtils.ts index 60654c16d1..d95106485f 100644 --- a/packages/button/src/utils/getTestUtils.ts +++ b/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 = ( - lgId: `lg-${string}` = DEFAULT_LGID_ROOT, + lgId: LgIdString = DEFAULT_LGID_ROOT, ): GetTestUtilsReturnType => { const lgIds = getLgIds(lgId); diff --git a/packages/checkbox/src/Checkbox/Checkbox.tsx b/packages/checkbox/src/Checkbox/Checkbox.tsx index f3ccdb5cae..30deb9c76b 100644 --- a/packages/checkbox/src/Checkbox/Checkbox.tsx +++ b/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} >