Codemods

Search Transform

Converts a v6 Search component to a v7 Search or v7 DefaultSearch component.

Automatic Changes

• Renames loading to isLoading
• Renames labelText to label
• Renames buttonSearch to showSearchButton
• Renames disabled to aria-disabled
• Renames searchButtonLabel to labelOverrides.searchButtonScreenReaderLabel
• Renames clearButtonLabel to labelOverrides.clearButtonScreenReaderLabel
• Deletes the showLabelText prop. There must always be visible label text.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Deletes the SearchResults component. SearchResult components should now be direct children of the Search component.
• If Search has no children, renames component to DefaultSearch.

For example:

1import {
2  Search,
3  SearchResults,
4  SearchResult,
5} from '@americanexpress/dls-react6';
6
7export default function Page() {
8  return (
9    <Search
10      loading={loading}
11      labelText={labelText}
12      buttonSearch={buttonSearch}
13      disabled={disabled}
14      searchButtonLabel="Search"
15      clearButtonLabel="Clear Search"
16      showLabelText={showLabelText}
17      theme={{ color: 'red' }}
18      {...otherProps}
19    >
20      <SearchResults>
21        <SearchResult key="1" id="result-1" {...otherProps} />
22        <SearchResult key="2" id="result-2" {...otherProps} />
23        <SearchResult key="3" id="result-3" {...otherProps} />
24      </SearchResults>
25    </Search>
26  );
27}

Transforms into:

1import { Search, SearchResult } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Search
6      isLoading={loading}
7      label={labelText}
8      showSearchButton={buttonSearch}
9      aria-disabled={disabled}
10      labelOverrides={{
11        searchButtonScreenReaderLabel: 'Search',
12        clearButtonScreenReaderLabel: 'Clear Search',
13      }}
14      {...otherProps}
15    >
16      <SearchResult key="1" id="result-1" {...otherProps} />
17      <SearchResult key="2" id="result-2" {...otherProps} />
18      <SearchResult key="3" id="result-3" {...otherProps} />
19    </Search>
20  );
21}