More & better titling

CHANGELOG.md

@@ -1,5 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Tweaked sizing, weights, color, line-heights, and added more levels to `EuiTitle` and `EuiText` ([#627](https://github.com/elastic/eui/pull/627))
+
 **Bug fixes**
 
 - Fix visual shadow glitch on hover of `EuiToast` ([#632](https://github.com/elastic/eui/pull/632))

src-docs/src/components/guide_components.scss

@@ -80,17 +80,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   margin-left: 240px;
 }
 
-.guideSection__text.euiText,
-.guideSection__text .euiText {
-  @include euiFontSizeS;
-  //font-weight: $euiFontWeightLight;
-  color: shadeOrTint($euiTextColor, .3, .1);
-
-  p, ul, ol {
-    max-width: 36rem;
-  }
-}
-
 .guideDemo__highlightLayout {
   div {
     background: transparentize(#0096CC, .9);
@@ -119,6 +108,13 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 .guideDemo__textLines {
   background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important;
   background-size: 100% 8px !important;
+  background-position-y: 2px;
+}
+
+.guideDemo__textLines--s {
+  background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important;
+  background-size: 100% 7px !important;
+  background-position-y: -2px;
 }
 
 .guideDemo__color {

src-docs/src/components/guide_rule/_guide_rule_description.scss

@@ -1,5 +1,3 @@
 .guideRule__description {
   margin-bottom: $euiSizeXL;
-
-  @extend .guideSection__text;
 }

src-docs/src/components/guide_rule/_guide_rule_example.scss

@@ -15,8 +15,8 @@
   }
 
   .guideRule__caption {
-    @include euiFontSizeXS;
-    max-height: $euiFontSizeXS * $euiLineHeight; /* 1 */
+    @include euiFontSizeS;
+    max-height: $euiFontSizeS * $euiLineHeight; /* 1 */
     overflow-y: visible; /* 1 */
   }
 

src-docs/src/components/guide_theme_selector/guide_theme_selector.js

@@ -38,7 +38,7 @@ export class GuideThemeSelector extends Component {
         iconSide="right"
         onClick={this.onThemeButtonClick}
       >
-        Elastic UI <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
+        <strong>Elastic UI</strong> <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
       </EuiButtonEmpty>
     );
 

src-docs/src/views/flyout/flyout_complicated.js

@@ -146,6 +146,7 @@ export class FlyoutComplicated extends Component {
                 Flyout header
               </h2>
             </EuiTitle>
+            <EuiSpacer size="s" />
             <EuiTextColor color="subdued">
               <EuiText>
                 <p>Put navigation items in the header, and cross tab actions in a footer.</p>

src-docs/src/views/guidelines/button.js

@@ -65,7 +65,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Filled buttons are for the primary action</strong>
+            Filled buttons are for the primary action
           </h4>
           <p>
             This button has the heavist visual weight to draw users&apos; attention.
@@ -86,7 +86,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Standard buttons are for secondary actions</strong>
+            Standard buttons are for secondary actions
           </h4>
           <p>
             Such actions include Add and Apply. This button type works well for
@@ -108,7 +108,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Empty buttons are for complimentary, UI-specific actions</strong>
+            Empty buttons are for complimentary, UI-specific actions
           </h4>
           <p>
             Close, cancel, filter, refresh, and other actions that reconfigure the
@@ -136,7 +136,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Icon buttons are for saving space</strong>
+            Icon buttons are for saving space
           </h4>
           <p>
             The icon must be immediately understood, for example, a trash can
@@ -253,7 +253,7 @@ export default() => (
       </GuideRuleExample>
     </GuideRule>
 
-    <EuiSpacer size="xl" />
+    <EuiSpacer size="xxl" />
 
     <GuideRuleTitle>One primary button per layout</GuideRuleTitle>
 
@@ -360,7 +360,7 @@ export default() => (
       </GuideRuleExample>
     </GuideRule>
 
-    <EuiSpacer size="l" />
+    <EuiSpacer size="xxl" />
 
     <GuideRuleTitle>Minimize the mixing of color, size, and type</GuideRuleTitle>
 

src-docs/src/views/guidelines/modals.js

@@ -86,11 +86,11 @@ export default () => (
 
       <EuiFlexItem >
         <EuiText className="guideSection__text">
-          <h4><strong>The header sets the context</strong></h4>
+          <h4>The header sets the context</h4>
           <p>Short and sentence-case, the header should indicate what the modal is about.</p>
-          <h4><strong>The body is for a single task</strong></h4>
+          <h4>The body is for a single task</h4>
           <p>This task should not require a lot of explanation or user interaction.</p>
-          <h4><strong>Buttons are right-aligned</strong></h4>
+          <h4>Buttons are right-aligned</h4>
           <p>The primary action is a filled button, and the secondary action is a link button.
             Labels should use strong action verbs.
           </p>

src-docs/src/views/guidelines/toasts.js

@@ -54,7 +54,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Success toasts indicate that everything worked out</strong>
+            Success toasts indicate that everything worked out
           </h4>
           <p>
             They are the most-commonly used toasts.
@@ -77,7 +77,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Warning toasts direct user attention to a potential problem</strong>
+            Warning toasts direct user attention to a potential problem
           </h4>
           <p>
             These toasts work well in monitoring apps when something
@@ -101,7 +101,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Error toasts report a problem</strong>
+            Error toasts report a problem
           </h4>
           <p>
             An error toast might let users know an action didn&apos;t complete or that a form has errors.
@@ -126,7 +126,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Info toasts relay neutral information</strong>
+            Info toasts relay neutral information
           </h4>
           <p>
             The default toast, an info toast might notify users about an ongoing action.

src-docs/src/views/guidelines/writing.js

@@ -132,12 +132,12 @@ export default () => (
     >
 
       <GuideRuleExample type="do">
-        <EuiText><h2>Edit saved objects</h2></EuiText>
+        <EuiText><h4>Edit saved objects</h4></EuiText>
       </GuideRuleExample>
 
       <GuideRuleExample type="dont">
         <EuiText>
-          <h2>Edit saved objects</h2>
+          <h4>Edit saved objects</h4>
           <p>From here, you can edit saved objects. To get started, follow these steps.</p>
         </EuiText>
       </GuideRuleExample>
@@ -341,7 +341,7 @@ export default () => (
         A title-only message is ok."
     >
       <GuideRuleExample type="do" text="">
-        <EuiTitle size="s"><span>This dashboard is empty. Let&apos;s fill it up!</span></EuiTitle>
+        <EuiTitle size="xs"><span>This dashboard is empty. Let&apos;s fill it up!</span></EuiTitle>
         <EuiSpacer/>
         <EuiText>
           <p>
@@ -352,7 +352,7 @@ export default () => (
       </GuideRuleExample>
 
       <GuideRuleExample type="dont" text="">
-        <EuiTitle size="s"><span>Uh-oh!</span></EuiTitle>
+        <EuiTitle size="xs"><span>Uh-oh!</span></EuiTitle>
         <EuiSpacer/>
         <EuiText>
           <p>
@@ -381,7 +381,7 @@ export default () => (
     >
       <GuideRuleExample type="do" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Delete this report?</span></EuiTitle>
+          <EuiTitle size="m"><span>Delete this report?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -392,7 +392,7 @@ export default () => (
 
       <GuideRuleExample type="dont" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Are you sure you want to delete this report?</span></EuiTitle>
+          <EuiTitle size="m"><span>Are you sure you want to delete this report?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -506,7 +506,7 @@ export default () => (
     >
       <GuideRuleExample type="do" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Remove this index pattern?</span></EuiTitle>
+          <EuiTitle size="m"><span>Remove this index pattern?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -516,7 +516,7 @@ export default () => (
       </GuideRuleExample>
       <GuideRuleExample type="dont" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Remove this index pattern?</span></EuiTitle>
+          <EuiTitle size="m"><span>Remove this index pattern?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -547,10 +547,10 @@ export default () => (
       description="Losing data and other situations that might frustrate the user are not a time for humor."
     >
       <GuideRuleExample type="do" text="">
-        <EuiTitle size="s"><span>No results matched your search</span></EuiTitle>
+        <EuiTitle size="xs"><span>No results matched your search</span></EuiTitle>
       </GuideRuleExample>
       <GuideRuleExample type="dont" text="">
-        <EuiTitle size="s"><span><EuiIcon type="faceSad" /> No results found</span></EuiTitle>
+        <EuiTitle size="xs"><span><EuiIcon type="faceSad" /> No results found</span></EuiTitle>
         <EuiSpacer />
         <EuiText>
           <p>

src-docs/src/views/steps/heading_element_steps.js

@@ -9,7 +9,7 @@ import {
 const steps = [
   {
     title: 'Inspect me',
-    children: <EuiTitle size="s"><h3>Did you notice the step title is inside a Heading 2 element?</h3></EuiTitle>
+    children: <EuiTitle size="xs"><h3>Did you notice the step title is inside a Heading 2 element?</h3></EuiTitle>
   }
 ];
 

src-docs/src/views/steps/steps_complex.js

@@ -57,15 +57,15 @@ const steps = [
     title: 'The last step has two options',
     children: (
       <EuiText>
-        <h3><strong>Option 1:</strong> If you have this type of instance</h3>
+        <h4><strong>Option 1:</strong> If you have this type of instance</h4>
         <EuiSubSteps>
           <ol>
             <li>Do thing 1</li>
             <li>Do thing 2</li>
             <li>Do thing 3</li>
           </ol>
         </EuiSubSteps>
-        <h3><strong>Option 2:</strong> If you have the other type of instance</h3>
+        <h4><strong>Option 2:</strong> If you have the other type of instance</h4>
         <EuiSubSteps>
           <ol>
             <li>Do thing 1</li>

src-docs/src/views/tables/tables_example.js

@@ -2,7 +2,6 @@ import React from 'react';
 
 import {
   EuiCode,
-  EuiText,
   EuiSpacer,
   EuiCallOut,
 } from '../../../../src/components';
@@ -24,7 +23,7 @@ import { section as customSection } from './custom';
 export const TableExample = {
   title: 'Tables',
   intro: (
-    <EuiText>
+    <div>
       <EuiCallOut title="EUI provides opinionated and non-opinionated ways to build tables">
         <p>
           Tables can get complicated very fast. If you&apos;re just looking for a basic table
@@ -40,7 +39,7 @@ export const TableExample = {
         </p>
       </EuiCallOut>
       <EuiSpacer />
-    </EuiText>
+    </div>
   ),
   sections: [
     basicSection,

src-docs/src/views/text/text.js

@@ -70,6 +70,24 @@ export default () => (
         So it thought the dog was making a poor life choice by focusing so much on mindfulness.
         What if its car broke down?
       </p>
+
+      <h4>This is Heading Four</h4>
+
+      <p>
+        So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+        What if its car broke down?
+      </p>
+
+      <h5>This is Heading Five</h5>
+
+      <p>
+        <small>
+          So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+          What if its car broke down?
+        </small>
+      </p>
+
+      <h6>This is Heading Six</h6>
     </EuiText>
   </div>
 );

src-docs/src/views/text/text_example.js

@@ -35,13 +35,19 @@ export const TextExample = {
       code: textHtml,
     }],
     text: (
-      <p>
-        <EuiCode>EuiText</EuiCode> is a generic catchall wrapper that will apply
-        our standard typography styling and spacing to naked HTML. Because of
-        its forced style it <strong>only accepts raw HTML</strong> and can
-        not / should not be used to wrap React components (which would break
-        their styling).
-      </p>
+      <div>
+        <p>
+          <EuiCode>EuiText</EuiCode> is a generic catchall wrapper that will apply
+          our standard typography styling and spacing to naked HTML. Because of
+          its forced style it <strong>only accepts raw HTML</strong> and can
+          not / should not be used to wrap React components (which would break
+          their styling).
+        </p>
+        <p>
+          <EuiCode>EuiText</EuiCode> also ensure proper line-length for readability by
+          setting a <EuiCode>max-width</EuiCode> on the entire component.
+        </p>
+      </div>
     ),
     props: { EuiText },
     demo: <Text />,

src-docs/src/views/text/text_small.js

@@ -62,6 +62,24 @@ const exampleText = (
       So it thought the dog was making a poor life choice by focusing so much on mindfulness.
       What if its car broke down?
     </p>
+
+    <h4>This is Heading Four</h4>
+
+    <p>
+      So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+      What if its car broke down?
+    </p>
+
+    <h5>This is Heading Five</h5>
+
+    <p>
+      <small>
+        So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+        What if its car broke down?
+      </small>
+    </p>
+
+    <h6>This is Heading Six</h6>
   </div>
 );