docs: Add options to playground

Author: Lesley

docs/src/stories/Options/index.js

@@ -20,6 +20,8 @@ class WithOptions extends PureComponent {
       disabled: false,
       readOnly: false,
       hierarchical: false,
+      placeholderText: 'Choose...',
+      inlinePlaceholderText: 'Search...',
     }
   }
 
@@ -48,6 +50,8 @@ class WithOptions extends PureComponent {
       readOnly,
       showDropdown,
       inlineSearchInput,
+      placeholderText,
+      inlinePlaceholderText,
     } = this.state
 
     return (
@@ -83,6 +87,22 @@ class WithOptions extends PureComponent {
               <option value="always">Always</option>
             </select>
           </div>
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor="placeholderText">Placeholder text: </label>
+            <input
+              id="placeholderText"
+              value={placeholderText}
+              onChange={e => this.setState({ placeholderText: e.target.value })}
+            />
+          </div>
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor="inlinePlaceholderText">Inline placeholder text: </label>
+            <input
+              id="inlinePlaceholderText"
+              value={inlinePlaceholderText}
+              onChange={e => this.setState({ inlinePlaceholderText: e.target.value })}
+            />
+          </div>
           <Checkbox
             label="Inline Search Input"
             value="inlineSearchInput"
@@ -130,6 +150,8 @@ class WithOptions extends PureComponent {
             showPartiallySelected={showPartiallySelected}
             disabled={disabled}
             readOnly={readOnly}
+            placeholder={placeholderText}
+            inlineSearchPlaceholder={inlinePlaceholderText}
             inlineSearchInput={inlineSearchInput}
             showDropdown={showDropdown}
             texts={{ label: 'Demo Dropdown' }}