`;
+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`] = `
+
+
+
+
+
+`;
+
exports[`EuiSelect props value option is rendered 1`] = `
{
const handleMouseUp = e => {
@@ -71,6 +72,7 @@ export const EuiSelect = ({
fullWidth={fullWidth}
isLoading={isLoading}
compressed={compressed}
+ readOnly={readOnly}
prepend={prepend}
append={append}>
@@ -81,6 +83,7 @@ export const EuiSelect = ({
ref={inputRef}
defaultValue={selectDefaultValue}
value={value}
+ readOnly={readOnly}
onMouseUp={handleMouseUp}
{...rest}>
{emptyOptionNode}
@@ -119,6 +122,7 @@ EuiSelect.propTypes = {
* when `true` creates a shorter height input
*/
compressed: PropTypes.bool,
+ readOnly: PropTypes.bool,
/**
* Creates an input group with element(s) coming before select
*/
diff --git a/src/components/form/select/select.test.js b/src/components/form/select/select.test.js
index 2baeef0b5d4..c08fba21b47 100644
--- a/src/components/form/select/select.test.js
+++ b/src/components/form/select/select.test.js
@@ -52,6 +52,12 @@ describe('EuiSelect', () => {
expect(component).toMatchSnapshot();
});
+ test('readOnly is rendered', () => {
+ const component = render();
+
+ expect(component).toMatchSnapshot();
+ });
+
test('disabled options are rendered', () => {
const component = render(