Adds utility CSS classes to EUI (#774)

* utility classes and docs

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added utility CSS classes for text and alignment concerns.  ([#774](https://github.com/elastic/eui/pull/774))
+
 **Bug fixes**
 
 - Added aria labeling requirements for `EuiBadge` , as well as a generic prop_type function `requiresAriaLabel` in `utils` to check for it. ([#777](https://github.com/elastic/eui/pull/777))

src-docs/src/routes.js

@@ -39,6 +39,10 @@ import WritingGuidelines
 import { IsColorDarkExample }
   from './views/is_color_dark/is_color_dark_example';
 
+
+import { UtilityClassesExample }
+  from './views/utility_classes/utility_classes_example';
+
 // Component examples
 
 import { AccessibilityExample }
@@ -336,6 +340,7 @@ const navigation = [{
     IsColorDarkExample,
     OutsideClickDetectorExample,
     PortalExample,
+    UtilityClassesExample,
   ].map(example => createExample(example)),
 }, {
   name: 'Package',

src-docs/src/views/utility_classes/utility_classes.js

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import {
+  EuiText,
+  EuiCode,
+  EuiSpacer,
+  EuiIcon,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiText>
+
+    <h4>Text</h4>
+
+    <EuiSpacer />
+
+    <div className="eui-textLeft">
+      <EuiCode>.eui-textLeft</EuiCode>
+    </div>
+
+    <div className="eui-textCenter">
+      <EuiCode>.eui-textCenter</EuiCode>
+    </div>
+    <div className="eui-textRight">
+      <EuiCode>.eui-textRight</EuiCode>
+    </div>
+
+    <EuiSpacer />
+
+    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textNoWrap">
+      <EuiCode>.eui-textNoWrap</EuiCode> will force text not to wrap even in small containers.
+    </div>
+
+    <EuiSpacer />
+
+    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textBreakAll">
+      <EuiCode>.eui-textBreakAll</EuiCode> will break up anything. It is useful for long urls like http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+    </div>
+
+    <EuiSpacer />
+
+    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textBreakWord">
+      <EuiCode>.eui-textBreakWord</EuiCode> will only break up at the end of words. Long urls will still break http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+    </div>
+
+    <EuiSpacer />
+
+    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textTruncate">
+      <EuiCode>.eui-textTruncate</EuiCode> will ellipsis after a certain point.
+    </div>
+
+    <h4>Vertical alignment</h4>
+
+    <EuiSpacer />
+
+    <div>
+      <EuiIcon type="logoElasticStack" size="xxl" className="eui-alignTop" />
+      <EuiCode>.eui-alignTop</EuiCode>
+    </div>
+
+    <EuiSpacer />
+
+    <div>
+      <EuiIcon type="logoElasticStack" size="xxl" className="eui-alignMiddle" />
+      <EuiCode>.eui-alignMiddle</EuiCode>
+    </div>
+
+    <EuiSpacer />
+
+    <div>
+      <EuiIcon type="logoElasticStack" size="xxl"  className="eui-alignBottom" />
+      <EuiCode>.eui-alignBottom</EuiCode>
+    </div>
+
+    <EuiSpacer />
+
+    <div>
+      <EuiIcon type="logoElasticStack" size="xxl" className="eui-alignBaseline" />
+      <EuiCode>.eui-alignBaseline</EuiCode>
+    </div>
+
+    <EuiSpacer />
+
+    <h4>Display</h4>
+
+    <EuiCode className="eui-displayBlock">.eui-displayBlock</EuiCode>
+
+    <EuiSpacer />
+
+    <EuiCode className="eui-displayInline">.eui-displayInline</EuiCode>
+
+    <EuiSpacer />
+
+    <EuiCode className="eui-displayInlineBlock">.eui-displayInlineBlock</EuiCode>
+
+  </EuiText>
+);

src-docs/src/views/utility_classes/utility_classes_example.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import UtilityClasses from './utility_classes';
+const utilityClassesSource = require('!!raw-loader!./utility_classes');
+const utilityClassesHtml = renderToHtml(UtilityClasses);
+
+export const UtilityClassesExample = {
+  title: 'CSS utility classes',
+  sections: [{
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: utilityClassesSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: utilityClassesHtml,
+    }],
+    text: (
+      <p>
+        The following CSS-only classes are provided as helper utilities. They are
+        useful for making micro-adjustments to existing React components.
+      </p>
+    ),
+    demo: <UtilityClasses />,
+  }],
+};

src/global_styling/index.scss

@@ -9,5 +9,8 @@
 // Mixins provide generic code expansion through helpers
 @import 'mixins/index';
 
+// Utility classes provide one-off selectors for common css problems
+@import 'utility/index';
+
 // The reset file makes use of variables and mixins
 @import 'reset/index';

src/global_styling/utility/_index.scss

@@ -0,0 +1 @@
+@import 'utility';

src/global_styling/utility/_utility.scss

@@ -0,0 +1,38 @@
+// Vertical alignment
+.eui-alignBaseline { vertical-align: baseline !important; }
+.eui-alignBottom { vertical-align: bottom !important; }
+.eui-alignMiddle { vertical-align: middle !important; }
+.eui-alignTop { vertical-align: top !important; }
+
+// Display
+.eui-displayBlock {display: block !important;}
+.eui-displayInline {display: inline !important;}
+.eui-displayInlineBlock {display: inline-block !important;}
+
+// Text
+.eui-textCenter {text-align: center !important;}
+.eui-textLeft {text-align: left !important;}
+.eui-textRight {text-align: right !important;}
+.eui-textBreakWord {word-break: break-word !important;}
+.eui-textBreakAll {word-break: break-all !important;}
+.eui-textNoWrap {white-space: nowrap !important;}
+.eui-textInheritColor {color: inherit !important;}
+
+/**
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an
+ * ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can
+ *    occur.
+ * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
+ *    nodes.
+ */
+.eui-textTruncate {
+  max-width: 100%; /* 1 */
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  word-wrap: normal !important; /* 2 */
+}