From 3933e943f1c3813f1ef75111afdbd4e2c5566915 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 May 2018 16:35:33 -0700 Subject: [PATCH 1/5] utility classes and docs --- src-docs/src/routes.js | 5 + .../views/utility_classes/utility_classes.js | 97 +++++++++++++++++++ .../utility_classes_example.js | 35 +++++++ src/global_styling/index.scss | 3 + src/global_styling/utility/_index.scss | 1 + src/global_styling/utility/_utility.scss | 38 ++++++++ 6 files changed, 179 insertions(+) create mode 100644 src-docs/src/views/utility_classes/utility_classes.js create mode 100644 src-docs/src/views/utility_classes/utility_classes_example.js create mode 100644 src/global_styling/utility/_index.scss create mode 100644 src/global_styling/utility/_utility.scss diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index c5823c64d00..bde014ec8a9 100644 --- a/src-docs/src/routes.js +++ b/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', diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js new file mode 100644 index 00000000000..a03b35f1a15 --- /dev/null +++ b/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 () => ( + + +

Text

+ + + +
+ .eui-textLeft +
+ +
+ .eui-textCenter +
+
+ .eui-textRight +
+ + + +
+ .eui-textNoWrap will force text not to wrap even in small containers. +
+ + + +
+ .eui-textBreakAll 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 +
+ + + +
+ .eui-textBreakWord 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 +
+ + + +
+ .eui-textTruncate will ellipsis after a certain point. +
+ +

Vertical alignment

+ + + +
+ + .eui-alignTop +
+ + + +
+ + .eui-alignMiddle +
+ + + +
+ + .eui-alignBottom +
+ + + +
+ + .eui-alignBaseline +
+ + + +

Display

+ + .eui-block + + + + .eui-inline + + + + .eui-inlineBlock + + +); diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js new file mode 100644 index 00000000000..a9eed14cb58 --- /dev/null +++ b/src-docs/src/views/utility_classes/utility_classes_example.js @@ -0,0 +1,35 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideSectionTypes, +} from '../../components'; + +import { + EuiCode, +} from '../../../../src/components'; + +import UtilityClasses from './utility_classes'; +const utilityClassesSource = require('!!raw-loader!./utility_classes'); +const utilityClassesHtml = renderToHtml(UtilityClasses); + +export const UtilityClassesExample = { + title: 'UtilityClasses', + sections: [{ + title: 'UtilityClasses', + source: [{ + type: GuideSectionTypes.JS, + code: utilityClassesSource, + }, { + type: GuideSectionTypes.HTML, + code: utilityClassesHtml, + }], + text: ( +

+ Description needed: how to use the EuiUtilityClasses component. +

+ ), + demo: , + }], +}; diff --git a/src/global_styling/index.scss b/src/global_styling/index.scss index 29729d85f7b..573503099da 100644 --- a/src/global_styling/index.scss +++ b/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'; diff --git a/src/global_styling/utility/_index.scss b/src/global_styling/utility/_index.scss new file mode 100644 index 00000000000..0be3e98b1e7 --- /dev/null +++ b/src/global_styling/utility/_index.scss @@ -0,0 +1 @@ +@import 'utility'; diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss new file mode 100644 index 00000000000..007535cb0e6 --- /dev/null +++ b/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-block {display: block !important;} +.eui-inline {display: inline !important;} +.eui-inlineBlock {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 */ +} From 29bbc286b56d6657680623f90c7546c322cd616a Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 May 2018 16:37:29 -0700 Subject: [PATCH 2/5] docs --- src-docs/src/views/utility_classes/utility_classes_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js index a9eed14cb58..614bfed1612 100644 --- a/src-docs/src/views/utility_classes/utility_classes_example.js +++ b/src-docs/src/views/utility_classes/utility_classes_example.js @@ -17,7 +17,6 @@ const utilityClassesHtml = renderToHtml(UtilityClasses); export const UtilityClassesExample = { title: 'UtilityClasses', sections: [{ - title: 'UtilityClasses', source: [{ type: GuideSectionTypes.JS, code: utilityClassesSource, @@ -27,7 +26,8 @@ export const UtilityClassesExample = { }], text: (

- Description needed: how to use the EuiUtilityClasses component. + The following CSS-only classes are provided as helper utilities. They are + useful for making micro-adjustments to existing components.

), demo: , From ad456bcdecf78d8b68af2b9882b4e360cdd57487 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 May 2018 16:38:40 -0700 Subject: [PATCH 3/5] docs --- src-docs/src/views/utility_classes/utility_classes_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js index 614bfed1612..05a884ba78e 100644 --- a/src-docs/src/views/utility_classes/utility_classes_example.js +++ b/src-docs/src/views/utility_classes/utility_classes_example.js @@ -15,7 +15,7 @@ const utilityClassesSource = require('!!raw-loader!./utility_classes'); const utilityClassesHtml = renderToHtml(UtilityClasses); export const UtilityClassesExample = { - title: 'UtilityClasses', + title: 'CSS utility classes', sections: [{ source: [{ type: GuideSectionTypes.JS, @@ -27,7 +27,7 @@ export const UtilityClassesExample = { text: (

The following CSS-only classes are provided as helper utilities. They are - useful for making micro-adjustments to existing components. + useful for making micro-adjustments to existing React components.

), demo: , From 7866a52c5d218b21ee6ad5ab89594fe2d935b241 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 4 May 2018 13:22:30 -0700 Subject: [PATCH 4/5] feedback --- .../views/utility_classes/utility_classes.js | 22 +++++++++---------- .../utility_classes_example.js | 4 ---- src/global_styling/utility/_utility.scss | 6 ++--- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js index a03b35f1a15..f4aad5ed3e5 100644 --- a/src-docs/src/views/utility_classes/utility_classes.js +++ b/src-docs/src/views/utility_classes/utility_classes.js @@ -54,44 +54,44 @@ export default () => (
- - .eui-alignTop + + .eui-alignTop
- - .eui-alignMiddle + + .eui-alignMiddle
- - .eui-alignBottom + + .eui-alignBottom
- - .eui-alignBaseline + + .eui-alignBaseline

Display

- .eui-block + .eui-displayBlock - .eui-inline + .eui-displayInline - .eui-inlineBlock + .eui-displayInlineBlock ); diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js index 05a884ba78e..8e18284c28e 100644 --- a/src-docs/src/views/utility_classes/utility_classes_example.js +++ b/src-docs/src/views/utility_classes/utility_classes_example.js @@ -6,10 +6,6 @@ import { GuideSectionTypes, } from '../../components'; -import { - EuiCode, -} from '../../../../src/components'; - import UtilityClasses from './utility_classes'; const utilityClassesSource = require('!!raw-loader!./utility_classes'); const utilityClassesHtml = renderToHtml(UtilityClasses); diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss index 007535cb0e6..bd51115aaeb 100644 --- a/src/global_styling/utility/_utility.scss +++ b/src/global_styling/utility/_utility.scss @@ -5,9 +5,9 @@ .eui-alignTop { vertical-align: top !important; } // Display -.eui-block {display: block !important;} -.eui-inline {display: inline !important;} -.eui-inlineBlock {display: inline-block !important;} +.eui-displayBlock {display: block !important;} +.eui-displayInline {display: inline !important;} +.eui-displayInlineBlock {display: inline-block !important;} // Text .eui-textCenter {text-align: center !important;} From 5915cc57bc1f1c9043c7fc6b72d39052730f0c1b Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 4 May 2018 13:24:31 -0700 Subject: [PATCH 5/5] feedback --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e893da5bab..e44c3b38c51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `0.0.46`. +- Added utility CSS classes for text and alignment concerns. ([#774](https://github.com/elastic/eui/pull/774)) ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)