Text styles (#683)

elastic · Apr 18, 2018 · afab8fc · afab8fc
1 parent bb60646
commit afab8fc
Show file tree

Hide file tree

Showing 32 changed files with 322 additions and 126 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,12 +2,18 @@
 
 - Added `status` prop to `EuiStep` for additional styling ([#673](https://github.com/elastic/eui/pull/673))
 - `EuiForm` and `EuiFormRow` now accept nodes for `errors` prop ([#685](https://github.com/elastic/eui/pull/685))
+- Removed the default `max-width` from `EuiText`. This can still be applied by setting `grow={false}` ([#683](https://github.com/elastic/eui/pull/683))
+- Added support for text alignment with `EuiTextAlign` ([#683](https://github.com/elastic/eui/pull/683))
 
 **Bug fixes**
 
 - Fixed `EuiCard` `icon` prop to include user provided className ([#684](https://github.com/elastic/eui/pull/684))
 - `EuiInMemoryTable` pagination state is now reset automatically when a search is executed ([#686](https://github.com/elastic/eui/pull/686))
 - Fixed slow performance of `EuiComboBox` when there are hundreds or thousands of options by virtualizing `EuiComboBoxOptionsList` ([#670](https://github.com/elastic/eui/pull/670))
+- Fixed some text styles  ([#683](https://github.com/elastic/eui/pull/683))
+    - Fixed font-family of input, textarea, select, and buttons
+    - Fixed style of code, pre, and dl’s inside `EuiText`
+    - Fixed ghost text color which was being set to a dark gray
 
 ## [`0.0.42`](https://github.com/elastic/eui/tree/v0.0.42)
 
@@ -43,6 +49,10 @@
 
 - Fix visual shadow glitch on hover of `EuiToast` ([#632](https://github.com/elastic/eui/pull/632))
 
+**Breaking changes**
+
+- **Note: This breaking change is reversed in 0.0.43.** Added a default `max-width` to `EuiText`. ([#627](https://github.com/elastic/eui/pull/627))
+
 ## [`0.0.39`](https://github.com/elastic/eui/tree/v0.0.39)
 
 **Bug fixes**

diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
@@ -1,19 +1,38 @@
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
 
+import {
+  Link,
+} from 'react-router';
+
 import {
   EuiTitle,
   EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton
 } from '../../../../src/components';
 
-export const GuidePage = ({ children, title, intro }) => {
+export const GuidePage = ({ children, title, intro, componentLinkTo }) => {
   return (
     <Fragment>
       <div className="guideSection__text">
-        <EuiTitle size="l">
-          <h1>{title}</h1>
-        </EuiTitle>
-
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiTitle size="l">
+              <h1>{title}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          { componentLinkTo &&
+            <EuiFlexItem grow={false}>
+              <Link to={componentLinkTo}>
+                <EuiButton>
+                  View component code
+                </EuiButton>
+              </Link>
+            </EuiFlexItem>
+          }
+        </EuiFlexGroup>
         <EuiSpacer />
         {intro}
       </div>
@@ -27,4 +46,5 @@ GuidePage.propTypes = {
   children: PropTypes.node,
   title: PropTypes.string,
   intro: PropTypes.node,
+  componentLinkTo: PropTypes.string,
 };
diff --git a/src-docs/src/components/guide_rule/_guide_rule.scss b/src-docs/src/components/guide_rule/_guide_rule.scss
@@ -18,14 +18,4 @@
   }
 }
 
-.guideRule__goToButton {
-  margin-bottom: $euiSizeM;
-
-  @include screenSmallMediumLarge {
-    position: absolute;
-    margin-top: -$euiSizeXL*2 - 6px;
-    right: $euiSizeL;
-  }
-}
-
 
diff --git a/src-docs/src/components/guide_rule/guide_rule_description.js b/src-docs/src/components/guide_rule/guide_rule_description.js
@@ -27,7 +27,7 @@ export const GuideRuleDescription = ({
       className={classes}
       {...rest}
     >
-      <EuiText>
+      <EuiText grow={false}>
         {headingNode}
         <p>{description}</p>
       </EuiText>

diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js
@@ -1,9 +1,5 @@
 import React from 'react';
 
-import {
-  Link,
-} from 'react-router';
-
 import {
   GuidePage,
   GuideRule,
@@ -34,15 +30,9 @@ import ContextMenu from '../context_menu/context_menu';
 import imageButtonPlacement from '../../images/button_placement.png';
 
 export default() => (
-  <GuidePage title="Button guidelines">
-
-    <Link to="/navigation/button">
-      <EuiButton className="guideRule__goToButton">
-        View component code
-      </EuiButton>
-    </Link>
+  <GuidePage title="Button guidelines" componentLinkTo="/navigation/button">
 
-    <EuiText className="guideSection__text">
+    <EuiText className="guideSection__text" grow={false}>
       <p>
         This page documents patterns for button design, including types, placement, color, and size.
       </p>
@@ -462,7 +452,7 @@ export default() => (
 
     <GuideRuleTitle>Labels that say what the button does</GuideRuleTitle>
 
-    <EuiText className="guideSection__text">
+    <EuiText grow={false} className="guideSection__text">
       <p>
         Labels should provide a clear indication of
         that action that occurs when the user clicks the button.

diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
@@ -78,7 +78,7 @@ export default() => (
 
     <EuiSpacer size="xl" />
 
-    <EuiText className="guideSection__text">
+    <EuiText grow={false} className="guideSection__text">
       <h2>Core palette</h2>
       <p>
         Elastic UI builds with a very limited palette. We use a core set of three colors,
@@ -98,7 +98,7 @@ export default() => (
 
     <EuiSpacer size="xxl" />
 
-    <EuiText className="guideSection__text">
+    <EuiText grow={false} className="guideSection__text">
       <h2>Qualitative visualization palette</h2>
       <p>
         The following colors are color-blind safe and should be used in
@@ -118,7 +118,7 @@ export default() => (
 
     <EuiSpacer size="xxl" />
 
-    <EuiText className="guideSection__text">
+    <EuiText grow={false} className="guideSection__text">
       <h2>Accessible text contrast</h2>
       <p>
         <EuiLink href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">

diff --git a/src-docs/src/views/guidelines/modals.js b/src-docs/src/views/guidelines/modals.js
@@ -1,9 +1,5 @@
 import React from 'react';
 
-import {
-  Link,
-} from 'react-router';
-
 import {
   GuidePage,
   GuideRule,
@@ -30,15 +26,9 @@ import {
 } from '../../../../src/components';
 
 export default () => (
-  <GuidePage title="Modal guidelines">
-
-    <Link to="/layout/modal">
-      <EuiButton className="guideRule__goToButton">
-        View component code
-      </EuiButton>
-    </Link>
+  <GuidePage title="Modal guidelines" componentLinkTo="/layout/modal">
 
-    <EuiText className="guideSection__text">
+    <EuiText grow={false} className="guideSection__text">
       <p>
         A modal says “pay attention to me and nothing else.”  A modal
         works best for focusing users&apos; attention on a short

diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js
@@ -1,9 +1,5 @@
 import React from 'react';
 
-import {
-  Link,
-} from 'react-router';
-
 import {
   GuidePage,
   GuideRule,
@@ -21,15 +17,9 @@ import {
 } from '../../../../src/components';
 
 export default () => (
-  <GuidePage title="Toast guidelines">
-
-    <Link to="/display/toast">
-      <EuiButton className="guideRule__goToButton">
-        View component code
-      </EuiButton>
-    </Link>
+  <GuidePage title="Toast guidelines" componentLinkTo="/display/toast">
 
-    <EuiText className="guideSection__text">
+    <EuiText grow={false} className="guideSection__text">
       <p>
         This page documents patterns for using toasts, short messages that
         appears on the lower right corner and time out after a few seconds.

diff --git a/src-docs/src/views/guidelines/writing.js b/src-docs/src/views/guidelines/writing.js
@@ -49,7 +49,7 @@ const GuideRuleWriting = ({
 
 export default () => (
   <GuidePage title="Writing guidelines">
-    <EuiText className="guideSection__text">
+    <EuiText grow={false} className="guideSection__text">
       <p>
         You can have the most beautiful UI,
         but without <b>consistent, easy-to-understand text</b>,

diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
@@ -13,7 +13,6 @@ import {
 
 import {
   EuiCard,
-  EuiCode,
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
@@ -77,7 +76,7 @@ export const HomeView = () => (
 
     </EuiFlexGroup>
     <EuiSpacer />
-    <EuiText>
+    <EuiText grow={false}>
       <p>
         The Elastic UI framework (EUI) is a design library in use at Elastic to
         build internal products that need to share our aesthetics.
@@ -160,26 +159,21 @@ export const HomeView = () => (
       </EuiFlexItem>
     </EuiFlexGrid>
     <EuiSpacer />
-    <EuiText>
+    <EuiText grow={false}>
       <h2>Design goals</h2>
-      <p>EUI has the following primary goals..</p>
-      <ul>
-        <li><EuiCode>EUI is accessible to everyone</EuiCode>. Use high contrast,
-          color-blind safe palettes and proper aria labels.
-        </li>
-        <li><EuiCode>EUI is themable</EuiCode>. Theming should involve changing
-          less than a dozen lines of code. This means strict variable usage.
-        </li>
-        <li><EuiCode>EUI is responsive</EuiCode>. Currently we target
-          mobile, laptop, desktop and wide desktop breakpoints.
-        </li>
-        <li><EuiCode>EUI is playful</EuiCode>. Consistent use of animation can
-          bring life to our design.
-        </li>
-        <li><EuiCode>EUI is documented and has tests</EuiCode>. Make sure
-          the code is friendly to the novice and expert alike.
-        </li>
-      </ul>
+      <p>EUI has the following primary goals...</p>
+      <dl>
+        <dt>EUI is accessible to everyone.</dt>
+        <dd>Use high contrast, color-blind safe palettes and proper aria labels.</dd>
+        <dt>EUI is themable.</dt>
+        <dd>Theming should involve changingless than a dozen lines of code. This means strict variable usage.</dd>
+        <dt>EUI is responsive.</dt>
+        <dd>Currently we target mobile, laptop, desktop and wide desktop breakpoints.</dd>
+        <dt>EUI is playful.</dt>
+        <dd>Consistent use of animation can bring life to our design.</dd>
+        <dt>EUI is documented and has tests.</dt>
+        <dd>Make sure Make sure the code is friendly to the novice and expert alike.</dd>
+      </dl>
     </EuiText>
   </div>
 );
diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js
@@ -2,11 +2,12 @@ import React from 'react';
 
 import {
   EuiText,
+  EuiHorizontalRule,
 } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiText>
+    <EuiText grow={false}>
       <h1>This is Heading One</h1>
       <p>
         Far out in the uncharted backwaters of the unfashionable end of
@@ -100,6 +101,29 @@ export default () => (
       </p>
 
       <h6>This is Heading Six</h6>
+
+      <EuiHorizontalRule />
+
+      <dl>
+        <dt>
+          The Elder Scrolls: Morrowind
+        </dt>
+        <dd>
+          The opening music alone evokes such strong memories.
+        </dd>
+        <dt>
+          TIE Fighter
+        </dt>
+        <dd>
+          The sequel to XWING, join the dark side and fly for the Emporer.
+        </dd>
+        <dt>
+          Quake 2
+        </dt>
+        <dd>
+          The game that made me drop out of college.
+        </dd>
+      </dl>
     </EuiText>
   </div>
 );
diff --git a/src-docs/src/views/text/text_align.js b/src-docs/src/views/text/text_align.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  EuiText,
+  EuiTextAlign,
+  EuiCode,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiText>
+      <EuiTextAlign textAlign="left">
+        <p>Left aligned paragraph.</p>
+      </EuiTextAlign>
+      <EuiTextAlign textAlign="center">
+        <p>Center aligned paragraph.</p>
+      </EuiTextAlign>
+      <EuiTextAlign textAlign="right">
+        <p>Right aligned paragraph.</p>
+      </EuiTextAlign>
+    </EuiText>
+    <EuiSpacer />
+    <EuiText textAlign="center">
+      <p>You can also pass alignment to <EuiCode>EuiText</EuiCode> directly with a prop</p>
+    </EuiText>
+    <EuiText textAlign="center" color="secondary">
+      <p>And in conjunction with coloring.</p>
+    </EuiText>
+  </div>
+);