From 2b98ea36a9a64e6a91a0dfe4b289b184a0c32d89 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Jun 2019 19:06:22 -0400 Subject: [PATCH 1/4] Fix style of append/prepend for EuiFormControlLayout in readOnly state --- .../__snapshots__/color_picker.test.js.snap | 5 ++--- src/components/form/_mixins.scss | 4 ++-- src/components/form/_variables.scss | 1 + .../__snapshots__/field_number.test.js.snap | 17 +++++++++++++++++ .../form/field_number/field_number.js | 4 ++++ .../form/field_number/field_number.test.js | 6 ++++++ .../__snapshots__/field_text.test.js.snap | 17 +++++++++++++++++ src/components/form/field_text/field_text.js | 4 ++++ .../form/field_text/field_text.test.js | 6 ++++++ .../form_control_layout.test.js.snap | 10 ++++++++++ .../_form_control_layout.scss | 15 ++++++++++++++- .../form_control_layout/form_control_layout.js | 2 ++ .../form_control_layout.test.js | 6 ++++++ .../select/__snapshots__/select.test.js.snap | 17 +++++++++++++++++ src/components/form/select/select.js | 4 ++++ src/components/form/select/select.test.js | 6 ++++++ 16 files changed, 118 insertions(+), 6 deletions(-) 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..071e03110d5 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; // Matchin 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`] = ` + + + + + + + From 57a866eef92fce7476c790e4dd7af88e9090974a Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Jun 2019 19:37:00 -0400 Subject: [PATCH 3/4] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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) From d289403419ea9f1a68f8cdeb9b8e3095f1a7933e Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 19 Jun 2019 11:39:53 -0400 Subject: [PATCH 4/4] Fix comment --- src-docs/src/views/form_controls/form_control_layout.js | 4 ++-- .../form/form_control_layout/_form_control_layout.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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 36a69b871b4..e79feedb1b7 100644 --- a/src-docs/src/views/form_controls/form_control_layout.js +++ b/src-docs/src/views/form_controls/form_control_layout.js @@ -94,11 +94,11 @@ export default () => ( Read only}> + prepend={Read only}> 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 071e03110d5..ffbaa6a8903 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -85,7 +85,7 @@ .euiFormControlLayout__prepend, .euiFormControlLayout__append { - height: $euiFormControlHeight; // Matchin input height, as euiFormControlSize() does not apply to the smaller height to readOnly states + height: $euiFormControlHeight; // Matching input height, as euiFormControlSize() does not apply to the smaller height to readOnly states } } }