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

* chore(search-bar): cleaned up props * fix(lint): added missing prop * fix(SearchBar): fix tests
carbon-design-system · May 13, 2024 · a7c9c01 · a7c9c01
1 parent 5d31c3c
commit a7c9c01
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.stories.jsx b/packages/ibm-products/src/components/SearchBar/SearchBar.stories.jsx
@@ -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),

diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.test.js b/packages/ibm-products/src/components/SearchBar/SearchBar.test.js
@@ -24,7 +24,7 @@ const value = 'carbon';
 
 const defaultProps = {
   clearButtonLabelText: 'Clear',
-  placeHolderText: 'Search...',
+  placeholderText: 'Search...',
   submitLabel: 'Search',
   onChange: mockOnChange,
   onSubmit: mockOnSubmit,
@@ -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();

diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.tsx b/packages/ibm-products/src/components/SearchBar/SearchBar.tsx
@@ -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;
@@ -107,7 +107,7 @@ export let SearchBar = React.forwardRef<HTMLFormElement, SearchBarProps>(
       labelText,
       onChange = defaults.onChange,
       onSubmit = defaults.onSubmit,
-      placeHolderText,
+      placeholderText,
       scopes = [],
       scopesTypeLabel,
       scopeToString,
@@ -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}
@@ -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}
@@ -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"
         />
@@ -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.
@@ -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,
@@ -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,
 };