Health component, table cleanup, form cleanup (#158)

- Adds `EuiHealth` components for status checks.
- Visual cleanup of checkboxes, switches and radios.
- Form disabled states are much more consistant.
- Page / title padding adjusted to be more compact.
- Table spacing compressed visually.
- Dark theme forms now have better contrast with their borders.
- New app icons added to match Kibana's app directory.

CHANGELOG.md

@@ -1,6 +1,13 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.3`.
+- Adds `EuiHealth` components for status checks. [(#158)](https://github.com/elastic/eui/pull/158)
+- Visual cleanup of checkboxes, switches and radios. [(#158)](https://github.com/elastic/eui/pull/158)
+- Form disabled states are much more consistant. [(#158)](https://github.com/elastic/eui/pull/158)
+- Page / title padding adjusted to be more compact. [(#158)](https://github.com/elastic/eui/pull/158)
+- Table spacing compressed visually. [(#158)](https://github.com/elastic/eui/pull/158)
+- Dark theme forms now have better contrast with their borders. [(#158)](https://github.com/elastic/eui/pull/158)
+- New app icons added to match Kibana's app directory. [(#162)](https://github.com/elastic/eui/pull/162)
+
 
 # [`0.0.3`](https://github.com/elastic/eui/tree/v0.0.3)
 

src-docs/src/services/routes/routes.js

@@ -50,6 +50,9 @@ import IconExample
 import HeaderExample
   from '../../views/header/header_example';
 
+import HealthExample
+  from '../../views/health/health_example';
+
 import HorizontalRuleExample
   from '../../views/horizontal_rule/horizontal_rule_example';
 
@@ -155,6 +158,9 @@ const components = [{
 }, {
   name: 'Header',
   component: HeaderExample,
+}, {
+  name: 'Health',
+  component: HealthExample,
 }, {
   name: 'HorizontalRule',
   component: HorizontalRuleExample,

src-docs/src/views/flex/flex_gutter.js

@@ -17,6 +17,15 @@ export default () => (
 
     <EuiSpacer />
 
+    <EuiFlexGroup gutterSize="xs">
+      <EuiFlexItem>Extra small</EuiFlexItem>
+      <EuiFlexItem>Extra small</EuiFlexItem>
+      <EuiFlexItem>Extra small</EuiFlexItem>
+      <EuiFlexItem>Extra small</EuiFlexItem>
+    </EuiFlexGroup>
+
+    <EuiSpacer />
+
     <EuiFlexGroup gutterSize="s">
       <EuiFlexItem>Small</EuiFlexItem>
       <EuiFlexItem>Small</EuiFlexItem>

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

@@ -142,8 +142,8 @@ export default class extends Component {
 
         <EuiSwitch
           label="Switch control"
-          checked={this.state.isSwitchChecked}
           onChange={this.onSwitchChange}
+          checked
           disabled
         />
 

src-docs/src/views/health/health.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  EuiHealth,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiHealth color="subdued">
+      Unknown
+    </EuiHealth>
+
+    <EuiSpacer />
+
+    <EuiHealth color="success">
+      Healthy
+    </EuiHealth>
+
+    <EuiSpacer />
+
+    <EuiHealth color="warning">
+      Warning
+    </EuiHealth>
+
+    <EuiSpacer />
+
+    <EuiHealth color="danger">
+      Failure
+    </EuiHealth>
+  </div>
+);

src-docs/src/views/health/health_example.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+} from '../../../../src/components';
+
+import Health from './health';
+const healthSource = require('!!raw-loader!./health');
+const healthHtml = renderToHtml(Health);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Health"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: healthSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: healthHtml,
+      }]}
+      text={
+        <p>
+          The <EuiCode>Health</EuiCode> component should be used when showing comparitive
+          health of listed objects (like servers, nodes, indexes..etc). Because icons are
+          vague and bulky and color alone does not work, we think color plus text provides
+          a recognizable, lightweight combo that works in most situations.
+        </p>
+      }
+      demo={<Health />}
+    />
+  </GuidePage>
+);

src-docs/src/views/icon/icons.js

@@ -9,6 +9,7 @@ import {
 } from '../../../../src/components';
 
 const iconTypes = [
+  'alert',
   'apps',
   'arrowDown',
   'arrowLeft',
@@ -47,6 +48,7 @@ const iconTypes = [
   'pencil',
   'pin',
   'plusInCircle',
+  'questionInCircle',
   'search',
   'shard',
   'share',
@@ -56,6 +58,7 @@ const iconTypes = [
   'tear',
   'trash',
   'user',
+  'wrench',
 ];
 
 export default () => (

src-docs/src/views/kibana/watches.js

@@ -11,13 +11,16 @@ import {
   EuiPage,
   EuiPageBody,
   EuiPageContent,
+  EuiPageHeader,
+  EuiPageHeaderSection,
   EuiPageContentBody,
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiPageSideBar,
   EuiPopover,
   EuiSpacer,
   EuiText,
+  EuiTitle,
 } from '../../../../src/components';
 
 import {
@@ -121,6 +124,13 @@ export default class extends Component {
   renderPage() {
     return (
       <EuiPage>
+        <EuiPageHeader>
+          <EuiPageHeaderSection>
+            <EuiTitle size="l">
+              <h1>Management</h1>
+            </EuiTitle>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
         <EuiPageBody>
           <EuiPageSideBar>
             <ManagementSideNav />

src-docs/src/views/table/compressed.js

@@ -18,7 +18,6 @@ import {
 
 import {
   LEFT_ALIGNMENT,
-  RIGHT_ALIGNMENT,
 } from '../../../../src/services';
 
 export default class extends Component {
@@ -35,8 +34,7 @@ export default class extends Component {
       id: 0,
       title: 'A very long line which will wrap on narrower screens and NOT become truncated using an ellipsis',
       type: 'user',
-      dateCreated: 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 1,
+      dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)',
     }, {
       id: 1,
       title: {
@@ -45,7 +43,6 @@ export default class extends Component {
       },
       type: 'user',
       dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 1,
     }, {
       id: 2,
       title: {
@@ -54,7 +51,6 @@ export default class extends Component {
       },
       type: 'user',
       dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10,
     }, {
       id: 3,
       title: {
@@ -63,7 +59,6 @@ export default class extends Component {
       },
       type: 'user',
       dateCreated: 'Tue Dec 16 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 100,
     }, {
       id: 4,
       title: {
@@ -72,7 +67,6 @@ export default class extends Component {
       },
       type: 'user',
       dateCreated: 'Tue Dec 13 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 1000,
     }];
 
     this.columns = [{
@@ -93,10 +87,6 @@ export default class extends Component {
       id: 'dateCreated',
       label: 'Date created',
       alignment: LEFT_ALIGNMENT,
-    }, {
-      id: 'magnitude',
-      label: 'Orders of magnitude',
-      alignment: RIGHT_ALIGNMENT,
     }];
   }