feat(Search): add "placeholder" & documentation (#4282)

* docs: add search placeholder API documentation

* Update docs/src/examples/modules/Search/Types/SearchExampleStandard.js

* add a unit test

Co-authored-by: Rohan Ravindran <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: 3 people

docs/src/examples/modules/Search/Types/SearchExampleStandard.js

@@ -67,6 +67,7 @@ function SearchExampleStandard() {
       <Grid.Column width={6}>
         <Search
           loading={loading}
+          placeholder='Search...'
           onResultSelect={(e, data) =>
             dispatch({ type: 'UPDATE_SELECTION', selection: data.result.title })
           }

src/modules/Search/Search.d.ts

@@ -159,6 +159,9 @@ export interface StrictSearchProps {
 
   /** A search can have different sizes. */
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'
+
+  /** A search can show placeholder text when empty. */
+  placeholder?: string
 }
 
 export interface SearchResultData extends SearchProps {

src/modules/Search/Search.js

@@ -369,7 +369,7 @@ export default class Search extends Component {
   // ----------------------------------------
 
   renderSearchInput = (rest) => {
-    const { icon, input } = this.props
+    const { icon, input, placeholder } = this.props
     const { value } = this.state
 
     return Input.create(input, {
@@ -382,6 +382,7 @@ export default class Search extends Component {
         onClick: this.handleInputClick,
         tabIndex: '0',
         value,
+        placeholder,
       },
       // Nested shorthand props need special treatment to survive the shallow merge
       overrideProps: overrideSearchInputProps,
@@ -666,6 +667,9 @@ Search.propTypes = {
 
   /** A search can have different sizes. */
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
+
+  /** A search can show placeholder text when empty. */
+  placeholder: PropTypes.string,
 }
 
 Search.defaultProps = {
@@ -674,6 +678,7 @@ Search.defaultProps = {
   minCharacters: 1,
   noResultsMessage: 'No results found.',
   showNoResults: true,
+  placeholder: '',
 }
 
 Search.autoControlledProps = ['open', 'value']

test/specs/modules/Search/Search-test.js

@@ -743,7 +743,7 @@ describe('Search', () => {
     })
 
     it(`will not merge for a function`, () => {
-      // TODO: V3 remove this test and simplify the implementation
+      // TODO: V4 remove this test and simplify the implementation
       consoleUtil.disableOnce()
 
       wrapperMount(<Search input={{ input: (Component, props) => <Component {...props} /> }} />)
@@ -752,6 +752,13 @@ describe('Search', () => {
       input.should.have.prop('autoComplete', 'off')
       input.should.have.not.className('prompt')
     })
+
+    it(`"placeholder" in passed to an "input"`, () => {
+      wrapperMount(<Search placeholder="foo" />)
+      const input = wrapper.find('input')
+
+      input.should.have.prop('placeholder', 'foo')
+    })
   })
 
   describe('input props', () => {