[TEMP] Compress all the docs

cchaos · Jul 29, 2019 · 2121702 · 2121702
1 parent e1bb513
commit 2121702
Show file tree

Hide file tree

Showing 10 changed files with 218 additions and 27 deletions.
diff --git a/src-docs/src/views/form_controls/field_number.js b/src-docs/src/views/form_controls/field_number.js
@@ -8,6 +8,7 @@ export default class extends Component {
 
     this.state = {
       value: '',
+      rangeValue: undefined,
     };
   }
 
@@ -18,10 +19,17 @@ export default class extends Component {
     });
   };
 
+  onRangeChange = value => {
+    this.setState({
+      rangeValue: value,
+    });
+  };
+
   render() {
     return (
       <Fragment>
         <EuiFieldNumber
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -31,6 +39,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -41,6 +50,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Loading"
           value={this.state.value}
           onChange={this.onChange}
@@ -51,6 +61,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Loading and disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -62,6 +73,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           placeholder="Read-only"
           value={this.state.value}
           onChange={this.onChange}
@@ -76,11 +88,14 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
         />
 
         <EuiSpacer size="m" />
 
         <EuiFieldNumber
+          compressed
           style={{ textAlign: 'right' }}
           append={
             <EuiText size="xs">

diff --git a/src-docs/src/views/form_controls/field_password.js b/src-docs/src/views/form_controls/field_password.js
@@ -7,7 +7,7 @@ export default class extends Component {
     super(props);
 
     this.state = {
-      value: '',
+      value: 'password',
     };
   }
 
@@ -21,6 +21,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiFieldPassword
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -34,6 +35,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          compressed
           aria-label="Use aria labels when no actual label is in use"
         />
 
@@ -44,6 +46,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           isLoading
+          compressed
           aria-label="Use aria labels when no actual label is in use"
         />
 
@@ -55,6 +58,7 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           disabled
+          compressed
           aria-label="Use aria labels when no actual label is in use"
         />
 
@@ -65,6 +69,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          readOnly
         />
 
         <EuiSpacer size="m" />
@@ -73,7 +78,8 @@ export default class extends Component {
           placeholder="Compressed and loading"
           value={this.state.value}
           onChange={this.onChange}
-          isLoading
+          isInvalid
+          fullWidth
           compressed
         />
       </Fragment>

diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
@@ -21,6 +21,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiFieldSearch
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -30,6 +31,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -40,6 +42,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Loading"
           value={this.state.value}
           onChange={this.onChange}
@@ -50,6 +53,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Loading and disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -61,6 +65,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldSearch
+          compressed
           placeholder="Read-only"
           value={this.state.value}
           onChange={this.onChange}
@@ -75,6 +80,8 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/field_text.js b/src-docs/src/views/form_controls/field_text.js
@@ -1,6 +1,13 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiFieldText, EuiSpacer } from '../../../../src/components';
+import {
+  EuiFieldText,
+  EuiSpacer,
+  EuiFormLabel,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+} from '../../../../src/components';
+import { EuiIcon } from '../../../../src/components/icon';
 
 export default class extends Component {
   constructor(props) {
@@ -21,6 +28,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiFieldText
+          compressed
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
@@ -30,6 +38,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -40,6 +49,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Loading"
           value={this.state.value}
           onChange={this.onChange}
@@ -50,6 +60,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Loading and disabled"
           value={this.state.value}
           onChange={this.onChange}
@@ -61,6 +72,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiFieldText
+          compressed
           placeholder="Read-only"
           value={this.state.value}
           onChange={this.onChange}
@@ -75,6 +87,104 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
+          isInvalid
+          fullWidth
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          compressed
+          placeholder="Prepend"
+          value={this.state.value}
+          onChange={this.onChange}
+          prepend={<EuiFormLabel>Label</EuiFormLabel>}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          compressed
+          placeholder="Prepend"
+          value={this.state.value}
+          onChange={this.onChange}
+          prepend={<EuiIcon type="vector" />}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          append={<EuiFormLabel>px square</EuiFormLabel>}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          append={<EuiIcon type="vector" />}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Prepend & Append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          prepend={<EuiIcon type="vector" />}
+          append={<EuiFormLabel>px square</EuiFormLabel>}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Prepend & Append button"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          prepend={
+            <EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
+              Button
+            </EuiButtonEmpty>
+          }
+          append={
+            <EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
+              Button
+            </EuiButtonEmpty>
+          }
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Icon button and label in prepend"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          prepend={[
+            <EuiButtonIcon iconType="magnet" />,
+            <EuiFormLabel>field.name</EuiFormLabel>,
+          ]}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Icon button and label in append"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          append={[
+            <EuiFormLabel>field.name</EuiFormLabel>,
+            <EuiButtonIcon iconType="magnet" />,
+          ]}
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
@@ -49,6 +49,7 @@ export class FilePicker extends Component {
             <EuiFilePicker
               id="asdf2"
               multiple
+              compressed
               initialPromptText="Select or drag and drop multiple files"
               onChange={files => {
                 this.onChange(files);
@@ -65,13 +66,14 @@ export class FilePicker extends Component {
 
         <EuiSpacer size="m" />
 
-        <EuiFilePicker disabled initialPromptText="Disabled" />
+        <EuiFilePicker disabled compressed initialPromptText="Disabled" />
 
         <EuiSpacer size="m" />
 
         <EuiFilePicker
           display="default"
           initialPromptText="Select some files"
+          compressed
           onChange={files => {
             this.onChange(files);
           }}
@@ -80,8 +82,12 @@ export class FilePicker extends Component {
         <EuiSpacer size="m" />
 
         <EuiFilePicker
+          id="asdf4"
           compressed
-          initialPromptText="Select some files"
+          display="default"
+          isInvalid
+          fullWidth
+          initialPromptText="Select a file"
           onChange={files => {
             this.onChange(files);
           }}