From 388b55686ff91e6c132b8f06e2fa86fcdbf9ef00 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Fri, 10 Jul 2020 11:00:43 +0200
Subject: [PATCH] fix: add prop placeholder to Filter and filterPlaceholder to
 Transfer

---
 packages/widgets/src/Transfer/Filter.js           | 4 +++-
 packages/widgets/src/Transfer/Transfer.js         | 4 ++++
 packages/widgets/src/Transfer/Transfer.stories.js | 3 +++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/widgets/src/Transfer/Filter.js b/packages/widgets/src/Transfer/Filter.js
index 00e2c38137..b919e63d68 100644
--- a/packages/widgets/src/Transfer/Filter.js
+++ b/packages/widgets/src/Transfer/Filter.js
@@ -3,12 +3,13 @@ import { spacers } from '@dhis2/ui-constants'
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 
-export const Filter = ({ dataTest, filter, onChange, label }) => (
+export const Filter = ({ dataTest, filter, onChange, label, placeholder }) => (
     <div data-test={dataTest}>
         <Field label={label} name={dataTest} dataTest={`${dataTest}-field`}>
             <Input
                 dataTest={`${dataTest}-input`}
                 type="search"
+                placeholder={placeholder}
                 name={dataTest}
                 value={filter}
                 onChange={onChange}
@@ -32,4 +33,5 @@ Filter.propTypes = {
     filter: propTypes.string.isRequired,
     onChange: propTypes.func.isRequired,
     label: propTypes.string,
+    placeholder: propTypes.string,
 }
diff --git a/packages/widgets/src/Transfer/Transfer.js b/packages/widgets/src/Transfer/Transfer.js
index 984dc4ebca..d41fae580b 100644
--- a/packages/widgets/src/Transfer/Transfer.js
+++ b/packages/widgets/src/Transfer/Transfer.js
@@ -74,6 +74,7 @@ export const Transfer = ({
     selectedEmptyComponent,
     enableOrderChange,
     filterLabel,
+    filterPlaceholder,
     filterCallback,
     filterable,
     height,
@@ -185,6 +186,7 @@ export const Transfer = ({
                         {filterable && !hideFilterInput && (
                             <Filter
                                 label={filterLabel}
+                                placeholder={filterPlaceholder}
                                 dataTest={`${dataTest}-filter`}
                                 filter={actualFilter}
                                 onChange={
@@ -387,6 +389,7 @@ Transfer.defaultProps = {
  * @prop {bool} [hideFilterInput] Automatically true when "hideFilterInput" is true
  * @prop {bool} [enableOrderChange]
  * @prop {string} [filterLabel]
+ * @prop {string} [filterPlaceholder]
  * @prop {Function} [filterCallback]
  * @prop {string} [height]
  * @prop {bool} [hideFilterInput]
@@ -421,6 +424,7 @@ Transfer.propTypes = {
     enableOrderChange: propTypes.bool,
     filterCallback: propTypes.func,
     filterLabel: propTypes.string,
+    filterPlaceholder: propTypes.string,
     filterable: propTypes.bool,
     height: propTypes.string,
     hideFilterInput: propTypes.bool,
diff --git a/packages/widgets/src/Transfer/Transfer.stories.js b/packages/widgets/src/Transfer/Transfer.stories.js
index 2c3c02f0c8..584c7582e6 100644
--- a/packages/widgets/src/Transfer/Transfer.stories.js
+++ b/packages/widgets/src/Transfer/Transfer.stories.js
@@ -172,6 +172,8 @@ export const Filtered = () => (
             initialSearchTerm="ANC"
             leftHeader={<h3>Header on the left side</h3>}
             options={options}
+            filterLabel="Filter with label and placeholder"
+            filterPlaceholder="Filter placeholder"
         />
     </StatefulWrapper>
 )
@@ -408,6 +410,7 @@ const createCustomFilteringInHeader = hideFilterInput => {
                 onFilterChange={({ value }) => setFilter(value)}
                 height="400px"
                 filterLabel="Filter options"
+                filterPlaceholder="Search"
             />
         )
     }