Added prepend and append support for EuiFieldPassword (#3122)

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `prepend` and `append` ability to `EuiFieldPassword` ([#3122](https://github.com/elastic/eui/pull/3122))
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 
 **Bug Fixes**

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

@@ -21,7 +21,7 @@ export default class extends Component {
   render() {
     return (
       /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles>
+      <DisplayToggles canAppend canPrepend>
         <EuiFieldPassword
           placeholder="Placeholder text"
           value={this.state.value}

src/components/form/field_password/__snapshots__/field_password.test.tsx.snap

@@ -71,3 +71,21 @@ exports[`EuiFieldPassword props isLoading is rendered 1`] = `
   </eui-validatable-control>
 </eui-form-control-layout>
 `;
+
+exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
+<eui-form-control-layout
+  append="String"
+  compressed="false"
+  fullwidth="false"
+  icon="lock"
+  isloading="false"
+  prepend="String"
+>
+  <eui-validatable-control>
+    <input
+      class="euiFieldPassword euiFieldPassword--inGroup"
+      type="password"
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;

src/components/form/field_password/field_password.test.tsx

@@ -45,5 +45,13 @@ describe('EuiFieldPassword', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('prepend and append is rendered', () => {
+      const component = render(
+        <EuiFieldPassword prepend="String" append="String" />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });

src/components/form/field_password/field_password.tsx

@@ -2,7 +2,10 @@ import React, { InputHTMLAttributes, Ref, FunctionComponent } from 'react';
 import { CommonProps } from '../../common';
 import classNames from 'classnames';
 
-import { EuiFormControlLayout } from '../form_control_layout';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from '../form_control_layout';
 
 import { EuiValidatableControl } from '../validatable_control';
 
@@ -13,6 +16,18 @@ export type EuiFieldPasswordProps = InputHTMLAttributes<HTMLInputElement> &
     isLoading?: boolean;
     compressed?: boolean;
     inputRef?: Ref<HTMLInputElement>;
+
+    /**
+     * Creates an input group with element(s) coming before input.
+     * `string` | `ReactElement` or an array of these
+     */
+    prepend?: EuiFormControlLayoutProps['prepend'];
+
+    /**
+     * Creates an input group with element(s) coming after input.
+     * `string` | `ReactElement` or an array of these
+     */
+    append?: EuiFormControlLayoutProps['append'];
   };
 
 export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = ({
@@ -26,6 +41,8 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = ({
   isLoading,
   compressed,
   inputRef,
+  prepend,
+  append,
   ...rest
 }) => {
   const classes = classNames(
@@ -34,6 +51,7 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = ({
       'euiFieldPassword--fullWidth': fullWidth,
       'euiFieldPassword--compressed': compressed,
       'euiFieldPassword-isLoading': isLoading,
+      'euiFieldPassword--inGroup': prepend || append,
     },
     className
   );
@@ -43,7 +61,9 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = ({
       icon="lock"
       fullWidth={fullWidth}
       isLoading={isLoading}
-      compressed={compressed}>
+      compressed={compressed}
+      prepend={prepend}
+      append={append}>
       <EuiValidatableControl isInvalid={isInvalid}>
         <input
           type="password"