From 7fd83e4a2e08842c5aa1fd76c39eece50f87ddf9 Mon Sep 17 00:00:00 2001
From: Rohan Ravindran <rohan.ravindran24@gmail.com>
Date: Fri, 14 Jan 2022 07:17:30 -0500
Subject: [PATCH] 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 <rohanravindran@Rohans-MacBook-Pro-3.local>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
---
 .../modules/Search/Types/SearchExampleStandard.js        | 1 +
 src/modules/Search/Search.d.ts                           | 3 +++
 src/modules/Search/Search.js                             | 7 ++++++-
 test/specs/modules/Search/Search-test.js                 | 9 ++++++++-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
index 82caaa76a1..2e61fb7edb 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
+++ b/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 })
           }
diff --git a/src/modules/Search/Search.d.ts b/src/modules/Search/Search.d.ts
index 673a50228c..ab83b7d57f 100644
--- a/src/modules/Search/Search.d.ts
+++ b/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 {
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 39261bdfe8..0d185ebfdb 100644
--- a/src/modules/Search/Search.js
+++ b/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']
diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js
index 44a0a7a267..fd9f9d4f64 100644
--- a/test/specs/modules/Search/Search-test.js
+++ b/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', () => {