Adding readOnly prop styles to form inputs

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375))
 - Changed look and feel of pagination. Added compressed prop for smaller footprint pagination. ([#380](https://github.com/elastic/eui/pull/380))
 - Added `EuiBasicTable` as an opinionated, high level component for constructing tables. Its addition deprecates `EuiTableOfRecords` which is still avaiable, but now marked for removal. ([#377](https://github.com/elastic/eui/pull/377))
+- Add styles for `readOnly` states of form controls. ([#391](https://github.com/elastic/eui/pull/391))
 
 **Bug fixes**
 

src-docs/src/views/form/form_controls_readonly.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {
+  EuiFieldPassword,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiButton,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+
+    <EuiFlexGroup style={{ maxWidth: 600 }}>
+      <EuiFlexItem>
+        <EuiFormRow>
+          <EuiFieldText
+            readOnly
+            defaultValue="example@example.com"
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFormRow>
+          <EuiFieldPassword
+            defaultValue="password"
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFormRow>
+          <EuiButton>Save</EuiButton>
+        </EuiFormRow>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
+  </div>
+);

src-docs/src/views/form/form_example.js

@@ -60,6 +60,10 @@ import Loading from './form_controls_loading';
 const loadingSource = require('!!raw-loader!./form_controls_loading');
 const loadingHtml = renderToHtml(Loading);
 
+import ReadOnly from './form_controls_readonly';
+const readOnlySource = require('!!raw-loader!./form_controls_readonly');
+const readOnlyHtml = renderToHtml(ReadOnly);
+
 export const FormExample = {
   title: 'Form',
   sections: [{
@@ -252,6 +256,24 @@ export const FormExample = {
       </p>
     ),
     demo: <InlineFormPopover />,
+  }, {
+    title: 'Fields can be in a readonly state',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: readOnlySource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: readOnlyHtml,
+    }],
+    text: (
+      <p>
+        Add <EuiCode>readOnly</EuiCode> to almost any field level (text, number)
+        component to put it in a readonly state. This will just display the content of the
+        control and remove any interactions. It is especially handy when using inline forms
+        with non-editable fields.
+      </p>
+    ),
+    demo: <ReadOnly />,
   }],
 };
 

src/components/form/_index.scss

@@ -78,6 +78,13 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
     background: darken($euiColorLightestShade, 2%);
     box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92);
   }
+
+  &[readOnly] {
+    cursor: default;
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
 }
 
 @import 'checkbox/index';