diff --git a/CHANGELOG.md b/CHANGELOG.md index 55141d6ba84..943bc61dff9 100644 --- a/CHANGELOG.md +++ b/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** diff --git a/src-docs/src/views/form_controls/field_password.js b/src-docs/src/views/form_controls/field_password.js index 5b8b44e589c..66a0b58dd2d 100644 --- a/src-docs/src/views/form_controls/field_password.js +++ b/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 */ - + `; + +exports[`EuiFieldPassword props prepend and append is rendered 1`] = ` + + + + + +`; diff --git a/src/components/form/field_password/field_password.test.tsx b/src/components/form/field_password/field_password.test.tsx index 44b141f11cd..da3f7ab82d9 100644 --- a/src/components/form/field_password/field_password.test.tsx +++ b/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( + + ); + + expect(component).toMatchSnapshot(); + }); }); }); diff --git a/src/components/form/field_password/field_password.tsx b/src/components/form/field_password/field_password.tsx index 483e898bb86..d7b8222508e 100644 --- a/src/components/form/field_password/field_password.tsx +++ b/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 & isLoading?: boolean; compressed?: boolean; inputRef?: Ref; + + /** + * 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 = ({ @@ -26,6 +41,8 @@ export const EuiFieldPassword: FunctionComponent = ({ isLoading, compressed, inputRef, + prepend, + append, ...rest }) => { const classes = classNames( @@ -34,6 +51,7 @@ export const EuiFieldPassword: FunctionComponent = ({ 'euiFieldPassword--fullWidth': fullWidth, 'euiFieldPassword--compressed': compressed, 'euiFieldPassword-isLoading': isLoading, + 'euiFieldPassword--inGroup': prepend || append, }, className ); @@ -43,7 +61,9 @@ export const EuiFieldPassword: FunctionComponent = ({ icon="lock" fullWidth={fullWidth} isLoading={isLoading} - compressed={compressed}> + compressed={compressed} + prepend={prepend} + append={append}>