[EuiFieldPassword] Support toggling of obfuscation

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added possibility to hide "Rows per page" select in `EuiDataGrid` ([#3700](https://github.com/elastic/eui/pull/3700))
 - Updated lodash to `v4.17.19` ([#3764](https://github.com/elastic/eui/pull/3764))
 - Added `returnKey` glyph to `EuiIcon` ([#3783](https://github.com/elastic/eui/pull/3783))
+- Added `type` prop to `EuiFieldPassword` to support toggling of obfuscation ([#3751](https://github.com/elastic/eui/pull/3751))
 
 **Bug fixes**
 

src-docs/src/views/datagrid/styling.js

@@ -428,7 +428,6 @@ export default class DataGrid extends Component {
               button={styleButton}
               isOpen={this.state.isPopoverOpen}
               anchorPosition="rightUp"
-              zIndex={3}
               closePopover={this.closePopover.bind(this)}>
               <div style={{ width: 300 }}>
                 <EuiFormRow label="Border" display="columnCompressed">
@@ -505,7 +504,6 @@ export default class DataGrid extends Component {
               button={toolbarButton}
               isOpen={this.state.isToolbarPopoverOpen}
               anchorPosition="rightUp"
-              zIndex={3}
               closePopover={this.closeToolbarPopover.bind(this)}>
               <div style={{ width: 400 }}>
                 <EuiFormRow

src-docs/src/views/form_controls/field_password.js

@@ -1,22 +1,32 @@
 import React, { useState } from 'react';
 
-import { EuiFieldPassword } from '../../../../src/components';
+import { EuiFieldPassword, EuiSwitch } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
 
 export default function() {
   const [value, setValue] = useState('');
-
-  const onChange = e => {
-    setValue(e.target.value);
-  };
+  const [dual, setDual] = useState(true);
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canAppend canPrepend>
+    <DisplayToggles
+      canAppend
+      canPrepend
+      extras={[
+        <EuiSwitch
+          compressed
+          label={'dual'}
+          checked={dual}
+          onChange={e => {
+            setDual(e.target.checked);
+          }}
+        />,
+      ]}>
       <EuiFieldPassword
         placeholder="Placeholder text"
+        type={dual ? 'dual' : undefined}
         value={value}
-        onChange={e => onChange(e)}
+        onChange={e => setValue(e.target.value)}
         aria-label="Use aria labels when no actual label is in use"
       />
     </DisplayToggles>

src-docs/src/views/form_controls/form_controls_example.js

@@ -72,6 +72,7 @@ const fieldPasswordSnippet = [
   placeholder="Placeholder text"
   value={value}
   onChange={onChange}
+  type="dual"
 />`,
 ];