From 5f37c96a29627f0b317aefca40ceb5a4058487ca Mon Sep 17 00:00:00 2001 From: Ignacio Becerra Date: Wed, 17 Apr 2024 00:28:41 -0700 Subject: [PATCH 1/3] chore(search-bar): cleaned up props --- .../src/components/SearchBar/SearchBar.js | 38 ++++++++++++------- .../components/SearchBar/SearchBar.stories.js | 2 +- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.js b/packages/ibm-products/src/components/SearchBar/SearchBar.js index c91befe6b5..07c7cd81e6 100644 --- a/packages/ibm-products/src/components/SearchBar/SearchBar.js +++ b/packages/ibm-products/src/components/SearchBar/SearchBar.js @@ -46,7 +46,7 @@ export let SearchBar = React.forwardRef( labelText, onChange = defaults.onChange, onSubmit = defaults.onSubmit, - placeHolderText, + placeholderText, scopes = defaults.scopes, scopesTypeLabel, scopeToString, @@ -116,6 +116,15 @@ export let SearchBar = React.forwardRef( onChange(eventObject); }; + const multiSelectProps = { + label: scopesTypeLabel, + initialSelectedItems: selectedScopes, + items: scopes, + itemToString: scopeToString, + translateWithId, + ...rest + } + return (
{scopes?.length ? ( ) : null} @@ -147,7 +151,7 @@ export let SearchBar = React.forwardRef( labelText={labelText || ''} name="search-input" onChange={handleInputChange} - placeholder={placeHolderText} + placeholder={placeholderText} value={text} size="lg" /> @@ -187,6 +191,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. @@ -212,7 +225,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, @@ -241,14 +254,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, }; diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.stories.js b/packages/ibm-products/src/components/SearchBar/SearchBar.stories.js index 09e2cd8de1..25addc4ee0 100644 --- a/packages/ibm-products/src/components/SearchBar/SearchBar.stories.js +++ b/packages/ibm-products/src/components/SearchBar/SearchBar.stories.js @@ -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), From 0c0a9cb295f9939e4b606266dc76801f7a4f3973 Mon Sep 17 00:00:00 2001 From: Ignacio Becerra Date: Mon, 29 Apr 2024 15:19:21 -0700 Subject: [PATCH 2/3] fix(lint): added missing prop --- packages/ibm-products/src/components/SearchBar/SearchBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.tsx b/packages/ibm-products/src/components/SearchBar/SearchBar.tsx index 832a4bdd44..af601ff94f 100644 --- a/packages/ibm-products/src/components/SearchBar/SearchBar.tsx +++ b/packages/ibm-products/src/components/SearchBar/SearchBar.tsx @@ -181,10 +181,11 @@ export let SearchBar = React.forwardRef( }; const multiSelectProps = { - label: scopesTypeLabel, initialSelectedItems: selectedScopes, items: scopes, itemToString: scopeToString, + label: scopesTypeLabel, + sortItems, translateWithId, } From ad28a69c8af14b87b79bf0be4726fd1b7b0e95ae Mon Sep 17 00:00:00 2001 From: Ignacio Becerra Date: Mon, 6 May 2024 15:51:53 -0700 Subject: [PATCH 3/3] fix(SearchBar): fix tests --- .../ibm-products/src/components/SearchBar/SearchBar.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.test.js b/packages/ibm-products/src/components/SearchBar/SearchBar.test.js index c61d3a3c86..83cb22e819 100644 --- 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();