Fix readonly input groups (#2057)

* Fix style of append/prepend for EuiFormControlLayout in readOnly state

CHANGELOG.md

@@ -9,6 +9,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)
 

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

@@ -92,6 +92,19 @@ export default () => (
 
     <EuiSpacer size="m" />
 
+    <EuiFormControlLayout
+      readOnly
+      prepend={<EuiFormLabel htmlFor="textField19a">Read only</EuiFormLabel>}>
+      <input
+        type="text"
+        className="euiFieldText euiFieldText--inGroup"
+        id="textField19a"
+        readOnly
+      />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
     <EuiFormControlLayout
       append={
         <EuiText size="xs">

src/components/color_picker/__snapshots__/color_picker.test.js.snap

@@ -525,8 +525,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
     class="euiPopover__anchor euiColorPicker__popoverAnchor"
   >
     <div
-      class="euiFormControlLayout"
-      readonly=""
+      class="euiFormControlLayout euiFormControlLayout--readOnly"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
@@ -535,7 +534,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
           style="color:#ffeedd"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--readOnly"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"

src/components/form/_mixins.scss

@@ -43,11 +43,11 @@
       height: $euiFormControlCompressedHeight;
     }
 
-    &--inGroup {
+    &--inGroup:not(:read-only) {
       height: $euiFormControlHeight - 2px; /* 2 */
     }
 
-    &--inGroup#{&}--compressed {
+    &--inGroup#{&}--compressed:not(:read-only) {
       height: $euiFormControlCompressedHeight - 2px; /* 2 */
     }
   }

src/components/form/_variables.scss

@@ -21,6 +21,7 @@ $euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);
+$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);
 
 //** DEPRECATED **//
 //** DEPRECATED **//

src/components/form/field_number/__snapshots__/field_number.test.js.snap

@@ -71,6 +71,23 @@ exports[`EuiFieldNumber props isLoading is rendered 1`] = `
 </eui-form-control-layout>
 `;
 
+exports[`EuiFieldNumber props readOnly is rendered 1`] = `
+<eui-form-control-layout
+  compressed="false"
+  fullwidth="false"
+  isloading="false"
+  readonly="true"
+>
+  <eui-validatable-control>
+    <input
+      class="euiFieldNumber"
+      readonly=""
+      type="number"
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
+
 exports[`EuiFieldNumber props value no initial value 1`] = `
 <eui-form-control-layout
   compressed="false"

src/components/form/field_number/field_number.js

@@ -22,6 +22,7 @@ export const EuiFieldNumber = ({
   prepend,
   append,
   inputRef,
+  readOnly,
   ...rest
 }) => {
   const classes = classNames('euiFieldNumber', className, {
@@ -38,6 +39,7 @@ export const EuiFieldNumber = ({
       fullWidth={fullWidth}
       isLoading={isLoading}
       compressed={compressed}
+      readOnly={readOnly}
       prepend={prepend}
       append={append}>
       <EuiValidatableControl isInvalid={isInvalid}>
@@ -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
    */

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(<EuiFieldNumber readOnly />);
+
+      expect(component).toMatchSnapshot();
+    });
+
     describe('value', () => {
       test('value is number', () => {
         const component = render(

src/components/form/field_text/__snapshots__/field_text.test.js.snap

@@ -68,3 +68,20 @@ exports[`EuiFieldText props isLoading is rendered 1`] = `
   </eui-validatable-control>
 </eui-form-control-layout>
 `;
+
+exports[`EuiFieldText props readOnly is rendered 1`] = `
+<eui-form-control-layout
+  compressed="false"
+  fullwidth="false"
+  isloading="false"
+  readonly="true"
+>
+  <eui-validatable-control>
+    <input
+      class="euiFieldText"
+      readonly=""
+      type="text"
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;

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}>
       <EuiValidatableControl isInvalid={isInvalid}>
@@ -47,6 +49,7 @@ export const EuiFieldText = ({
           className={classes}
           value={value}
           ref={inputRef}
+          readOnly={readOnly}
           {...rest}
         />
       </EuiValidatableControl>
@@ -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
    */

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(<EuiFieldText readOnly />);
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('isLoading is rendered', () => {
       const component = render(<EuiFieldText isLoading />);
 

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`] = `
   />
 </div>
 `;
+
+exports[`EuiFormControlLayout props readOnly is rendered 1`] = `
+<div
+  class="euiFormControlLayout euiFormControlLayout--readOnly"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  />
+</div>
+`;

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
+    }
+  }
 }

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

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(<EuiFormControlLayout readOnly />);
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('one prepend is rendered', () => {
       const component = render(
         <EuiFormControlLayout prepend={<span>1</span>} />

src/components/form/select/__snapshots__/select.test.js.snap

@@ -119,6 +119,23 @@ exports[`EuiSelect props options are rendered 1`] = `
 </eui-form-control-layout>
 `;
 
+exports[`EuiSelect props readOnly is rendered 1`] = `
+<eui-form-control-layout
+  compressed="false"
+  fullwidth="false"
+  icon="[object Object]"
+  isloading="false"
+  readonly="true"
+>
+  <eui-validatable-control>
+    <select
+      class="euiSelect"
+      readonly=""
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
+
 exports[`EuiSelect props value option is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"

src/components/form/select/select.js

@@ -22,6 +22,7 @@ export const EuiSelect = ({
   prepend,
   append,
   onMouseUp,
+  readOnly,
   ...rest
 }) => {
   const handleMouseUp = e => {
@@ -71,6 +72,7 @@ export const EuiSelect = ({
       fullWidth={fullWidth}
       isLoading={isLoading}
       compressed={compressed}
+      readOnly={readOnly}
       prepend={prepend}
       append={append}>
       <EuiValidatableControl isInvalid={isInvalid}>
@@ -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
    */

src/components/form/select/select.test.js

@@ -52,6 +52,12 @@ describe('EuiSelect', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('readOnly is rendered', () => {
+      const component = render(<EuiSelect readOnly />);
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('disabled options are rendered', () => {
       const component = render(
         <EuiSelect