Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(search-bar): cleaned up props #4923

Merged
merged 6 commits into from
May 13, 2024
Merged

chore(search-bar): cleaned up props #4923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5f37c96
chore(search-bar): cleaned up props
IgnacioBecerra Apr 17, 2024
7b7f9e7
Merge remote-tracking branch 'upstream' into search-bar-prop-clean
IgnacioBecerra Apr 29, 2024
0c0a9cb
fix(lint): added missing prop
IgnacioBecerra Apr 29, 2024
ad28a69
fix(SearchBar): fix tests
IgnacioBecerra May 6, 2024
95c9577
Merge branch 'main' of https://github.com/carbon-design-system/ibm-pr…
IgnacioBecerra May 6, 2024
ab3e0dd
Merge branch 'main' into search-bar-prop-clean
IgnacioBecerra May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/ibm-products/src/components/SearchBar/SearchBar.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const scopes = [

const defaultProps = {
clearButtonLabelText: 'Clear',
placeHolderText: 'Search...',
placeholderText: 'Search...',
submitLabel: 'Search',
onChange: (newVal) => action('onChange')(newVal),
onSubmit: (newVal) => action('onSubmit')(newVal),
Expand Down
4 changes: 2 additions & 2 deletions packages/ibm-products/src/components/SearchBar/SearchBar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const value = 'carbon';

const defaultProps = {
clearButtonLabelText: 'Clear',
placeHolderText: 'Search...',
placeholderText: 'Search...',
submitLabel: 'Search',
onChange: mockOnChange,
onSubmit: mockOnSubmit,
Expand Down Expand Up @@ -64,7 +64,7 @@ describe(componentName, () => {

expect(searchBox).toBeInTheDocument();
expect(searchBox.value).toBe('');
expect(searchBox.placeholder).toBe(defaultProps.placeHolderText);
expect(searchBox.placeholder).toBe(defaultProps.placeholderText);
expect(submitButton).toHaveTextContent(defaultProps.submitLabel);
expect(submitButton).toBeInTheDocument();
expect(submitButton).toBeDisabled();
Expand Down
40 changes: 25 additions & 15 deletions packages/ibm-products/src/components/SearchBar/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ interface SearchBarProps extends PropsWithChildren {
onSubmit?: (event: any) => void;

/** @type {string} Placeholder text to be displayed in the search input. */
placeHolderText: string;
placeholderText: string;

/** @type {Function} Function to get the text for each scope to display in dropdown. */
scopeToString?: () => void;
Expand Down Expand Up @@ -107,7 +107,7 @@ export let SearchBar = React.forwardRef<HTMLFormElement, SearchBarProps>(
labelText,
onChange = defaults.onChange,
onSubmit = defaults.onSubmit,
placeHolderText,
placeholderText,
scopes = [],
scopesTypeLabel,
scopeToString,
Expand Down Expand Up @@ -180,6 +180,15 @@ export let SearchBar = React.forwardRef<HTMLFormElement, SearchBarProps>(
onChange(eventObject);
};

const multiSelectProps = {
initialSelectedItems: selectedScopes,
items: scopes,
itemToString: scopeToString,
label: scopesTypeLabel,
sortItems,
translateWithId,
}

return (
<form
{...rest}
Expand All @@ -192,16 +201,11 @@ export let SearchBar = React.forwardRef<HTMLFormElement, SearchBarProps>(
>
{scopes?.length ? (
<MultiSelect
{...multiSelectProps}
id={`${blockClass}__multi-select`}
name="search-scopes"
className={`${blockClass}__scopes`}
label={scopesTypeLabel}
onChange={handleSearchScopeChange}
initialSelectedItems={selectedScopes}
items={scopes}
itemToString={scopeToString}
translateWithId={translateWithId}
sortItems={sortItems}
size="lg"
/>
) : null}
Expand All @@ -211,7 +215,7 @@ export let SearchBar = React.forwardRef<HTMLFormElement, SearchBarProps>(
labelText={labelText || ''}
name="search-input"
onChange={handleInputChange}
placeholder={placeHolderText}
placeholder={placeholderText}
value={text}
size="lg"
/>
Expand Down Expand Up @@ -251,6 +255,15 @@ const conditionalScopePropValidator = (
return PropTypes.string(props, propName, componentName, ...rest);
};

export const deprecatedProps = {
/**
* **Deprecated**
*
* Provide accessible label text for the scopes MultiSelect.
*/
titleText: PropTypes.string,
};

// The types and DocGen commentary for the component props,
// in alphabetical order (for consistency).
// See https://www.npmjs.com/package/prop-types#usage.
Expand All @@ -276,7 +289,7 @@ SearchBar.propTypes = {
onSubmit: PropTypes.func,

/** @type {string} Placeholder text to be displayed in the search input. */
placeHolderText: PropTypes.string.isRequired,
placeholderText: PropTypes.string.isRequired,

/** @type {Function} Function to get the text for each scope to display in dropdown. */
scopeToString: PropTypes.func,
Expand Down Expand Up @@ -307,14 +320,11 @@ SearchBar.propTypes = {
/** @type {string} The label text for the search submit button. */
submitLabel: PropTypes.string.isRequired,

/**
* Provide accessible label text for the scopes MultiSelect.
*/
titleText: PropTypes.string,

/** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
translateWithId: PropTypes.func, // eslint-disable-line react/require-default-props

/** @type {string} Search query value. */
value: PropTypes.string,

...deprecatedProps,
};
Loading