diff --git a/CHANGELOG.md b/CHANGELOG.md index 91264f0b3e3..7e8e5e93de5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Fixed proptype for `EuiCopy`'s `children` ([#2048](https://github.com/elastic/eui/pull/2048)) - Fixed `EuiInMemoryTable` to allow sorting on computed columns ([#2044](https://github.com/elastic/eui/pull/2044)) - Fixed TypeScript `Toast` member export ([#2052](https://github.com/elastic/eui/pull/2052)) +- Fixed style of readOnly input groups via `EuiFormControlLayout` and `prepend`/`append` ([#2057](https://github.com/elastic/eui/pull/2057)) ## [`12.0.0`](https://github.com/elastic/eui/tree/v12.0.0) diff --git a/src-docs/src/views/form_controls/form_control_layout.js b/src-docs/src/views/form_controls/form_control_layout.js index 16a4a584c04..e79feedb1b7 100644 --- a/src-docs/src/views/form_controls/form_control_layout.js +++ b/src-docs/src/views/form_controls/form_control_layout.js @@ -92,6 +92,19 @@ export default () => ( + Read only}> + + + + + diff --git a/src/components/color_picker/__snapshots__/color_picker.test.js.snap b/src/components/color_picker/__snapshots__/color_picker.test.js.snap index ab06475172a..c2e89422428 100644 --- a/src/components/color_picker/__snapshots__/color_picker.test.js.snap +++ b/src/components/color_picker/__snapshots__/color_picker.test.js.snap @@ -525,8 +525,7 @@ exports[`renders readOnly EuiColorPicker 1`] = ` class="euiPopover__anchor euiColorPicker__popoverAnchor" >
`; +exports[`EuiFieldNumber props readOnly is rendered 1`] = ` + + + + + +`; + exports[`EuiFieldNumber props value no initial value 1`] = ` { const classes = classNames('euiFieldNumber', className, { @@ -38,6 +39,7 @@ export const EuiFieldNumber = ({ fullWidth={fullWidth} isLoading={isLoading} compressed={compressed} + readOnly={readOnly} prepend={prepend} append={append}> @@ -49,6 +51,7 @@ export const EuiFieldNumber = ({ name={name} value={value} placeholder={placeholder} + readOnly={readOnly} className={classes} ref={inputRef} {...rest} @@ -91,6 +94,7 @@ EuiFieldNumber.propTypes = { isInvalid: PropTypes.bool, fullWidth: PropTypes.bool, isLoading: PropTypes.bool, + readOnly: PropTypes.bool, /** * when `true` creates a shorter height input */ diff --git a/src/components/form/field_number/field_number.test.js b/src/components/form/field_number/field_number.test.js index 2d37aeea290..a1082c3c986 100644 --- a/src/components/form/field_number/field_number.test.js +++ b/src/components/form/field_number/field_number.test.js @@ -53,6 +53,12 @@ describe('EuiFieldNumber', () => { expect(component).toMatchSnapshot(); }); + test('readOnly is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + describe('value', () => { test('value is number', () => { const component = render( diff --git a/src/components/form/field_text/__snapshots__/field_text.test.js.snap b/src/components/form/field_text/__snapshots__/field_text.test.js.snap index db915096025..bcaa4d8dc34 100644 --- a/src/components/form/field_text/__snapshots__/field_text.test.js.snap +++ b/src/components/form/field_text/__snapshots__/field_text.test.js.snap @@ -68,3 +68,20 @@ exports[`EuiFieldText props isLoading is rendered 1`] = ` `; + +exports[`EuiFieldText props readOnly is rendered 1`] = ` + + + + + +`; diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.js index 57f60b36046..25c240f279f 100644 --- a/src/components/form/field_text/field_text.js +++ b/src/components/form/field_text/field_text.js @@ -20,6 +20,7 @@ export const EuiFieldText = ({ compressed, prepend, append, + readOnly, ...rest }) => { const classes = classNames('euiFieldText', className, { @@ -36,6 +37,7 @@ export const EuiFieldText = ({ fullWidth={fullWidth} isLoading={isLoading} compressed={compressed} + readOnly={readOnly} prepend={prepend} append={append}> @@ -47,6 +49,7 @@ export const EuiFieldText = ({ className={classes} value={value} ref={inputRef} + readOnly={readOnly} {...rest} /> @@ -64,6 +67,7 @@ EuiFieldText.propTypes = { inputRef: PropTypes.func, fullWidth: PropTypes.bool, isLoading: PropTypes.bool, + readOnly: PropTypes.bool, /** * when `true` creates a shorter height input */ diff --git a/src/components/form/field_text/field_text.test.js b/src/components/form/field_text/field_text.test.js index 5361fb79339..3694e82731d 100644 --- a/src/components/form/field_text/field_text.test.js +++ b/src/components/form/field_text/field_text.test.js @@ -46,6 +46,12 @@ describe('EuiFieldText', () => { expect(component).toMatchSnapshot(); }); + test('readOnly is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + test('isLoading is rendered', () => { const component = render(); diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap index cc1d1f175bf..0aeb606629a 100644 --- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap +++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap @@ -254,3 +254,13 @@ exports[`EuiFormControlLayout props one prepend is rendered 1`] = ` />
`; + +exports[`EuiFormControlLayout props readOnly is rendered 1`] = ` +
+
+
+`; diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index 7da52ad4c02..ffbaa6a8903 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -44,7 +44,7 @@ margin-bottom: 0; padding: $euiFormControlPadding; border: none; - background-color: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%); + background-color: $euiFormInputGroupLabelBackground; line-height: $euiFontSize; } } @@ -75,4 +75,17 @@ } } } + + // + // ReadOnly alterations + &.euiFormControlLayout--readOnly { + @include euiFormControlReadOnlyStyle; + padding: 0; /* 1 */ + background-color: transparent; // Ensures the input and layout don't double up on background color + + .euiFormControlLayout__prepend, + .euiFormControlLayout__append { + height: $euiFormControlHeight; // Matching input height, as euiFormControlSize() does not apply to the smaller height to readOnly states + } + } } diff --git a/src/components/form/form_control_layout/form_control_layout.js b/src/components/form/form_control_layout/form_control_layout.js index 4b84dcfdd5d..355fe33ae4c 100644 --- a/src/components/form/form_control_layout/form_control_layout.js +++ b/src/components/form/form_control_layout/form_control_layout.js @@ -18,6 +18,7 @@ export class EuiFormControlLayout extends Component { className, prepend, append, + readOnly, ...rest } = this.props; @@ -26,6 +27,7 @@ export class EuiFormControlLayout extends Component { { 'euiFormControlLayout--fullWidth': fullWidth, 'euiFormControlLayout--compressed': compressed, + 'euiFormControlLayout--readOnly': readOnly, 'euiFormControlLayout--group': prepend || append, }, className diff --git a/src/components/form/form_control_layout/form_control_layout.test.js b/src/components/form/form_control_layout/form_control_layout.test.js index 7fbb0cfe1ee..a6eed4ee343 100644 --- a/src/components/form/form_control_layout/form_control_layout.test.js +++ b/src/components/form/form_control_layout/form_control_layout.test.js @@ -117,6 +117,12 @@ describe('EuiFormControlLayout', () => { expect(component).toMatchSnapshot(); }); + test('readOnly is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + test('one prepend is rendered', () => { const component = render( 1} /> diff --git a/src/components/form/select/__snapshots__/select.test.js.snap b/src/components/form/select/__snapshots__/select.test.js.snap index 54355d36095..230f65ef8ba 100644 --- a/src/components/form/select/__snapshots__/select.test.js.snap +++ b/src/components/form/select/__snapshots__/select.test.js.snap @@ -119,6 +119,23 @@ exports[`EuiSelect props options are rendered 1`] = ` `; +exports[`EuiSelect props readOnly is rendered 1`] = ` + + +