feat: Support placeholder for inline search input (dowjones#404)

Co-authored-by: Hrusikesh Panda <mrchief@users.noreply.github.com>
m4theushw · Feb 6, 2021 · 3ae4ebb · 3ae4ebb
1 parent bec2b10
commit 3ae4ebb
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -299,10 +299,11 @@ The `texts` object requires the following structure:
 
 ```js
 {
-  placeholder,  // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
-  noMatches,    // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found`
-  label,        // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
-  labelRemove,  // optional: The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
+  placeholder,              // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
+  inlineSearchPlaceholder,  // optional: The text to display as placeholder on the inline search box. Only applicable with the `inlineSearchInput` setting. Defaults to `Search...`
+  noMatches,                // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found`
+  label,                    // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
+  labelRemove,              // optional: The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
 }
 ```
 
@@ -592,6 +593,7 @@ Released 2017 by [Hrusikesh Panda](https://github.com/mrchief) @ [Dow Jones](htt
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+
 <!-- prettier-ignore -->
 | [<img src="https://avatars0.githubusercontent.com/u/966550?v=4" width="100px;" alt="toofff"/><br /><sub><b>toofff</b></sub>](http://www.yanoucrea.fr)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Atoofff "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=toofff "Code") [📖](https://github.com/dowjones/react-dropdown-tree-select/commits?author=toofff "Documentation") [🤔](#ideas-toofff "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/1257968?v=4" width="100px;" alt="Grégory Copin"/><br /><sub><b>Grégory Copin</b></sub>](http://www.les-tilleuls.coop)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AGregcop1 "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=Gregcop1 "Code") | [<img src="https://avatars1.githubusercontent.com/u/7589718?v=4" width="100px;" alt="PRIYANSHU AGRAWAL"/><br /><sub><b>PRIYANSHU AGRAWAL</b></sub>](https://github.com/priyanshu92)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Apriyanshu92 "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=priyanshu92 "Code") [🤔](#ideas-priyanshu92 "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/425261?v=4" width="100px;" alt="James Greenaway"/><br /><sub><b>James Greenaway</b></sub>](http://james.greenaway.io)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Ajvgreenaway "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=jvgreenaway "Code") [🤔](#ideas-jvgreenaway "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/36223986?v=4" width="100px;" alt="itrombitas"/><br /><sub><b>itrombitas</b></sub>](https://github.com/itrombitas)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=itrombitas "Code") | [<img src="https://avatars2.githubusercontent.com/u/18341459?v=4" width="100px;" alt="Dave Henton"/><br /><sub><b>Dave Henton</b></sub>](https://github.com/davehenton)<br />[🚇](#infra-davehenton "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars3.githubusercontent.com/u/4869717?v=4" width="100px;" alt="Swetha Kolli"/><br /><sub><b>Swetha Kolli</b></sub>](https://github.com/nagaskolli)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=nagaskolli "Code") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
@@ -600,6 +602,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | [<img src="https://avatars3.githubusercontent.com/u/491877?v=4" width="100px;" alt="Lutz Lengemann"/><br /><sub><b>Lutz Lengemann</b></sub>](http://www.dealzeit.de)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=mobilutz "Code") | [<img src="https://avatars0.githubusercontent.com/u/26381655?v=4" width="100px;" alt="Akshay Dipta"/><br /><sub><b>Akshay Dipta</b></sub>](https://github.com/Eainde)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AEainde "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/137158?v=4" width="100px;" alt="Ian Langworth ☠"/><br /><sub><b>Ian Langworth ☠</b></sub>](https://langworth.com/)<br />[🤔](#ideas-statico "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/5932031?v=4" width="100px;" alt="Stoyan Berov"/><br /><sub><b>Stoyan Berov</b></sub>](https://github.com/stoberov)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Astoberov "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/17863113?v=4" width="100px;" alt="ellinge"/><br /><sub><b>ellinge</b></sub>](https://github.com/ellinge)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=ellinge "Code") [🤔](#ideas-ellinge "Ideas, Planning, & Feedback") [🚧](#maintenance-ellinge "Maintenance") | [<img src="https://avatars3.githubusercontent.com/u/5017449?v=4" width="100px;" alt="Sandy M"/><br /><sub><b>Sandy M</b></sub>](https://github.com/moonjy1993)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=moonjy1993 "Code") [🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Amoonjy1993 "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/529614?v=4" width="100px;" alt="Gustav Tonér"/><br /><sub><b>Gustav Tonér</b></sub>](https://www.gazab.se)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=gazab "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/3390897?v=4" width="100px;" alt="Kestutis Kasiulynas"/><br /><sub><b>Kestutis Kasiulynas</b></sub>](http://kYem.net)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AkYem "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=kYem "Code") | [<img src="https://avatars3.githubusercontent.com/u/20484267?v=4" width="100px;" alt="Jesus Cabrera Gonzalez"/><br /><sub><b>Jesus Cabrera Gonzalez</b></sub>](https://github.com/isuscbrmid)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=isuscbrmid "Code") | [<img src="https://avatars2.githubusercontent.com/u/27359753?v=4" width="100px;" alt="MJRuskin"/><br /><sub><b>MJRuskin</b></sub>](https://github.com/MJRuskin)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=MJRuskin "Code") | [<img src="https://avatars1.githubusercontent.com/u/64946671?v=4" width="100px;" alt="akarshjairaj"/><br /><sub><b>akarshjairaj</b></sub>](https://github.com/akarshjairaj)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=akarshjairaj "Code") | [<img src="https://avatars1.githubusercontent.com/u/539090?v=4" width="100px;" alt="Artem Berdyshev"/><br /><sub><b>Artem Berdyshev</b></sub>](https://github.com/berdyshev)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=berdyshev "Code") [🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Aberdyshev "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/42154031?v=4" width="100px;" alt="Matheus Wichman"/><br /><sub><b>Matheus Wichman</b></sub>](https://matheushw.com/)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=m4theushw "Code") | [<img src="https://avatars1.githubusercontent.com/u/60662654?v=4" width="100px;" alt="aarce-uncharted"/><br /><sub><b>aarce-uncharted</b></sub>](https://github.com/aarce-uncharted)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=aarce-uncharted "Code") |
 | [<img src="https://avatars0.githubusercontent.com/u/1795294?v=4" width="100px;" alt="Mohamad Othman"/><br /><sub><b>Mohamad Othman</b></sub>](http://osmancode.me)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=osmancode "Code") [🤔](#ideas-osmancode "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/8286468?v=4" width="100px;" alt="kathleenlu"/><br /><sub><b>kathleenlu</b></sub>](https://github.com/smurfs2549)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=smurfs2549 "Code") [🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Asmurfs2549 "Bug reports") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md
@@ -30,6 +30,7 @@ Generated by [AVA](https://ava.li).
           >
             <Input
               clientId="rdts"
+              inlineSearchInput={false}
               inputRef={Function inputRef {}}
               onBlur={Function {}}
               onFocus={Function {}}
@@ -203,6 +204,7 @@ Generated by [AVA](https://ava.li).
         >
           <Input
             clientId="rdts"
+            inlineSearchInput={true}
             inputRef={Function inputRef {}}
             onBlur={Function {}}
             onFocus={Function {}}
@@ -370,6 +372,7 @@ Generated by [AVA](https://ava.li).
             <Input
               clientId="rdts"
               disabled={true}
+              inlineSearchInput={false}
               inputRef={Function inputRef {}}
               onBlur={Function {}}
               onFocus={Function {}}
@@ -506,6 +509,7 @@ Generated by [AVA](https://ava.li).
                   >
                     <Input
                       clientId="rdts"
+                      inlineSearchInput={false}
                       inputRef={Function inputRef {}}
                       mode="radioSelect"
                       onBlur={Function {}}
@@ -655,6 +659,7 @@ Generated by [AVA](https://ava.li).
                   >
                     <Input
                       clientId="rdts"
+                      inlineSearchInput={false}
                       inputRef={Function inputRef {}}
                       onBlur={Function {}}
                       onFocus={Function {}}
@@ -708,6 +713,7 @@ Generated by [AVA](https://ava.li).
           >
             <Input
               clientId="rdts"
+              inlineSearchInput={false}
               inputRef={Function inputRef {}}
               onBlur={Function {}}
               onFocus={Function {}}

diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap
diff --git a/__snapshots__/src/input/index.test.js.md b/__snapshots__/src/input/index.test.js.md
@@ -4,6 +4,17 @@ The actual snapshot is saved in `index.test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## renders inline search placeholder
+
+> Snapshot 1
+
+    <input
+      className="search"
+      onChange={Function {}}
+      placeholder="Search something"
+      type="text"
+    />
+
 ## renders input
 
 > Snapshot 1

diff --git a/__snapshots__/src/input/index.test.js.snap b/__snapshots__/src/input/index.test.js.snap
diff --git a/docs/src/stories/Options/index.js b/docs/src/stories/Options/index.js
@@ -20,6 +20,8 @@ class WithOptions extends PureComponent {
       disabled: false,
       readOnly: false,
       hierarchical: false,
+      placeholder: 'Choose...',
+      inlineSearchPlaceholder: 'Search...',
     }
   }
 
@@ -50,6 +52,8 @@ class WithOptions extends PureComponent {
       readOnly,
       showDropdown,
       inlineSearchInput,
+      placeholder,
+      inlineSearchPlaceholder,
     } = this.state
 
     return (
@@ -85,6 +89,24 @@ class WithOptions extends PureComponent {
               <option value="always">Always</option>
             </select>
           </div>
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor="placeholder">Placeholder text: </label>
+            <input
+              id="placeholder"
+              type="text"
+              value={placeholder}
+              onChange={e => this.setState({ placeholder: e.target.value })}
+            />
+          </div>
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor="inlinePlaceholderText">Inline placeholder text: </label>
+            <input
+              id="inlineSearchPlaceholder"
+              type="text"
+              value={inlineSearchPlaceholder}
+              onChange={e => this.setState({ inlineSearchPlaceholder: e.target.value })}
+            />
+          </div>
           <Checkbox
             label="Inline Search Input"
             value="inlineSearchInput"
@@ -134,7 +156,7 @@ class WithOptions extends PureComponent {
             readOnly={readOnly}
             inlineSearchInput={inlineSearchInput}
             showDropdown={showDropdown}
-            texts={{ label: 'Demo Dropdown' }}
+            texts={{ label: 'Demo Dropdown', placeholder, inlineSearchPlaceholder }}
           />
         </div>
       </div>

diff --git a/src/index.js b/src/index.js
@@ -29,6 +29,7 @@ class DropdownTreeSelect extends Component {
     keepOpenOnSelect: PropTypes.bool,
     texts: PropTypes.shape({
       placeholder: PropTypes.string,
+      inlineSearchPlaceholder: PropTypes.string,
       noMatches: PropTypes.string,
       label: PropTypes.string,
       labelRemove: PropTypes.string,
@@ -306,6 +307,7 @@ class DropdownTreeSelect extends Component {
         onBlur={this.onInputBlur}
         onKeyDown={this.onKeyboardKeyDown}
         {...commonProps}
+        inlineSearchInput={inlineSearchInput}
       />
     )
     return (

diff --git a/src/input/index.js b/src/input/index.js
@@ -25,14 +25,15 @@ const Input = props => {
     onKeyDown,
     activeDescendant,
     onInputChange,
+    inlineSearchInput,
   } = props
   return (
     <input
       type="text"
       disabled={disabled}
       ref={inputRef}
       className="search"
-      placeholder={texts.placeholder || 'Choose...'}
+      placeholder={inlineSearchInput ? texts.inlineSearchPlaceholder || 'Search...' : texts.placeholder || 'Choose...'}
       onKeyDown={onKeyDown}
       onChange={handleChange(onInputChange)}
       onFocus={onFocus}
@@ -60,6 +61,7 @@ Input.propTypes = {
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
   activeDescendant: PropTypes.string,
+  inlineSearchInput: PropTypes.bool,
 }
 
 export default memo(Input)
diff --git a/src/input/index.test.js b/src/input/index.test.js
@@ -17,6 +17,12 @@ test('renders placeholder', t => {
   t.snapshot(wrapper)
 })
 
+test('renders inline search placeholder', t => {
+  const placeholderText = 'Search something'
+  const wrapper = toJson(shallow(<Input inlineSearchInput texts={{ inlineSearchPlaceholder: placeholderText }} />))
+  t.snapshot(wrapper)
+})
+
 test('raises onchange', t => {
   const onChange = spy()
   const wrapper = shallow(<Input onInputChange={onChange} />)