Skip to content

Commit

Permalink
Adds utility CSS classes to EUI (#774)
Browse files Browse the repository at this point in the history
* utility classes and docs
  • Loading branch information
snide authored May 4, 2018
1 parent 7880eb1 commit 3ae48ec
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 0 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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))
Expand Down
5 changes: 5 additions & 0 deletions src-docs/src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down Expand Up @@ -336,6 +340,7 @@ const navigation = [{
IsColorDarkExample,
OutsideClickDetectorExample,
PortalExample,
UtilityClassesExample,
].map(example => createExample(example)),
}, {
name: 'Package',
Expand Down
97 changes: 97 additions & 0 deletions src-docs/src/views/utility_classes/utility_classes.js
Original file line number Diff line number Diff line change
@@ -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>
);
31 changes: 31 additions & 0 deletions src-docs/src/views/utility_classes/utility_classes_example.js
Original file line number Diff line number Diff line change
@@ -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 />,
}],
};
3 changes: 3 additions & 0 deletions src/global_styling/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
1 change: 1 addition & 0 deletions src/global_styling/utility/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'utility';
38 changes: 38 additions & 0 deletions src/global_styling/utility/_utility.scss
Original file line number Diff line number Diff line change
@@ -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 */
}

0 comments on commit 3ae48ec

Please sign in to comment.