Updating euiTitle mixin to add rem valued line-heights

- The mixin also recommends using the same prop names as EuiTitle as arguments (ie “xs”, “m”, “l”) - Added another mid-way font weight - Updated docs
elastic · Apr 4, 2018 · 1aa1725 · 1aa1725
1 parent a649065
commit 1aa1725
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 83 deletions.
diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
@@ -3,33 +3,46 @@ import React from 'react';
 import {
   EuiTitle,
   EuiHorizontalRule,
+  EuiSpacer,
+  EuiCode,
 } from '../../../../src/components';
 
 export default () => (
   <div>
     <EuiTitle size="l">
       <h1>This is a large title, only one should exist per page</h1>
     </EuiTitle>
+    <EuiCode>size=&quot;l&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle>
       <h2>This is the default size for title</h2>
     </EuiTitle>
+    <EuiCode>size=&quot;m&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="s">
       <h3>This is a small title</h3>
     </EuiTitle>
+    <EuiCode>size=&quot;s&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="xs">
       <h4>This is an extra small title</h4>
     </EuiTitle>
+    <EuiCode>size=&quot;xs&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="xxs">
       <h5>This is an extra extra small title</h5>
     </EuiTitle>
+    <EuiCode>size=&quot;xxs&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="xxxs">
       <h6>This is an extra extra extra small title and should only be used when the title is inconsequential (like a label)</h6>
     </EuiTitle>
+    <EuiCode>size=&quot;xxxs&quot;</EuiCode>
 
     <EuiHorizontalRule />
 

diff --git a/src/components/call_out/_call_out.scss b/src/components/call_out/_call_out.scss
@@ -39,8 +39,8 @@ $callOutTypes: (
  * 3. Apply margin to all but last item in the flex.
  */
 .euiCallOutHeader {
-  @include euiTitle($euiFontSize);
-  font-weight: 500;
+  @include euiTitle("xs");
+  font-weight: $euiFontWeightRegular;
   display: flex;
   align-items: baseline; /* 1 */
 
@@ -54,7 +54,8 @@ $callOutTypes: (
 
   // smaller font size for headers in small callout
   .euiCallOut--small & {
-    @include euiTitle($euiFontSizeS);
+    @include euiTitle("xxs");
+    font-weight: $euiFontWeightRegular;
   }
 }
 

diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss
@@ -3,7 +3,7 @@
   &.euiDescriptionList--row {
 
     .euiDescriptionList__title {
-      @include euiTitle($euiFontSize);
+      @include euiTitle("xs");
       margin-top: $euiSize;
 
       // Make sure the first <dt> doesn't get a margine.
@@ -29,7 +29,7 @@
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
-        @include euiTitle($euiFontSizeS);
+        @include euiTitle("xxs");
       }
 
       .euiDescriptionList__description {
@@ -54,7 +54,7 @@
     }
 
     .euiDescriptionList__title {
-      @include euiTitle($euiFontSize);
+      @include euiTitle("xs");
       flex-basis: 50%;
       padding-right: $euiSizeS;
     }
@@ -76,7 +76,7 @@
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
-        @include euiTitle($euiFontSizeS);
+        @include euiTitle("xxs");
       }
 
       .euiDescriptionList__description {

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -32,7 +32,7 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma
 }
 
   .euiModalHeader__title {
-    @include euiTitle($euiFontSizeXL);
+    @include euiTitle("m");
   }
 
 .euiModalBody {

diff --git a/src/components/popover/_mixins.scss b/src/components/popover/_mixins.scss
@@ -1,5 +1,6 @@
 @mixin euiPopoverTitle {
-  @include euiTitle($euiFontSize);
+  @include euiTitle("xs");
+  font-weight: $euiFontWeightMid;
   background-color: $euiColorLightestShade;
   padding: $euiSizeM;
 

diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss
@@ -94,7 +94,7 @@
     }
 
     .euiSideNavItemButton__label {
-      @include euiTitle($euiFontSize);
+      @include euiTitle("xs");
     }
   }
 

diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
@@ -13,7 +13,7 @@
   }
 
   .euiStep__title {
-    font-weight: $euiFontWeightRegular;
+    font-weight: $euiFontWeightMid;
 
     &::before {
       content: attr(data-step-num); // Get the number from the data attribute
@@ -26,7 +26,7 @@
 
   .euiStep__content {
     border-left: $euiBorderThick;
-    padding: $euiSize;
+    padding: $euiSize $euiSize $euiSizeXL;
     margin: $euiSizeS 0;
 
     // Align the content's contents with the title

diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
@@ -89,7 +89,7 @@
 
 .euiStepHorizontal__title {
   display: block;
-  @include euiTitle($euiFontSize);
+  @include euiTitle("xs");
   margin-top: $euiSizeS;
   font-weight: $euiFontWeightRegular;
 

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -26,11 +26,12 @@
 
 .euiTableHeaderCell {
   @include euiTableCell;
-
-  color: $euiTitleColor;
+  @include euiTitle("xxs");
+  font-weight: $euiFontWeightMedium;
 
   .euiTableHeaderButton {
     text-align: left;
+    font-weight: $euiFontWeightMedium;
   }
 }
 

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
@@ -1,17 +1,18 @@
 // This should only be used for .euiText, therefore it's not included in a separate mixin file
 @mixin euiScaleText($baseFontSize) {
   $baseLineHeightMultiplier: $baseFontSize/2;
+  line-height: convertToRem($baseLineHeightMultiplier*3);
 
   p,
   ul,
   ol,
   blockquote,
   img {
-    margin-bottom: convertToRem($baseLineHeightMultiplier * 4);
+    margin-bottom: convertToRem($baseLineHeightMultiplier * 3);
   }
 
   ul, ol {
-    margin-left: convertToRem($baseLineHeightMultiplier * 4);
+    margin-left: convertToRem($baseLineHeightMultiplier * 3);
   }
 
   blockquote {
@@ -36,24 +37,19 @@
     margin-top: convertToRem($baseLineHeightMultiplier * 4);
   }
 
-  /**
-  * 1. Set line-height to a muliplier of the base line height without being under the font-size.
-  */
-
   h1 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 1));
-    line-height: convertToRem($baseLineHeightMultiplier * 6); /* 1 */
+    line-height: convertToRem($baseLineHeightMultiplier * 6);
   }
 
   h2 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 2));
-    line-height: convertToRem($baseLineHeightMultiplier * 5); /* 1 */
+    line-height: convertToRem($baseLineHeightMultiplier * 5);
   }
 
   h3 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 3));
-    line-height: convertToRem($baseLineHeightMultiplier * 4); /* 1 */
-    font-weight: $euiFontWeightMedium;
+    line-height: convertToRem($baseLineHeightMultiplier * 4);
   }
 
   h4 {
@@ -68,7 +64,6 @@
   h6 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 7));
     line-height: convertToRem($baseLineHeightMultiplier * 2);
-    text-transform: uppercase;
   }
 
   small {
@@ -134,44 +129,40 @@
     }
   }
 
-  /**
-  * 1. Customize font size to be a percentage of the .euiText container's base font size (easy scaling)
-  */
   h1 {
-    @include euiTitle($euiFontSizeXXL);
+    @include euiTitle("l");
   }
 
   h2 {
-    @include euiTitle($euiFontSizeXL);
+    @include euiTitle("m");
   }
 
   h3 {
-    @include euiTitle($euiFontSizeL);
-    font-weight: $euiFontWeightMedium;
+    @include euiTitle("s");
   }
 
   h4 {
-    @include euiTitle($euiFontSize);
+    @include euiTitle("xs");
   }
 
   h5 {
-    @include euiTitle($euiFontSizeS);
+    @include euiTitle("xxs");
   }
 
   h6 {
-    @include euiTitle($euiFontSizeXS);
+    @include euiTitle("xxxs");
     text-transform: uppercase;
   }
 
   @include euiScaleText($euiFontSize);
 
   &.euiText--small {
-    @include euiFontSizeS;
+    @include fontSize($euiFontSizeS);
     @include euiScaleText($euiFontSizeS);
   }
 
   &.euiText--extraSmall {
-    @include euiFontSizeXS;
+    @include fontSize($euiFontSizeXS);
     @include euiScaleText($euiFontSizeXS);
   }
 

diff --git a/src/components/title/_title.scss b/src/components/title/_title.scss
@@ -9,25 +9,25 @@
 }
 
 .euiTitle--xxxsmall {
-  @include euiTitle($euiFontSizeXS);
+  @include euiTitle("xxxs");
 }
 
 .euiTitle--xxsmall {
-  @include euiTitle($euiFontSizeS);
+  @include euiTitle("xxs");
 }
 
 .euiTitle--xsmall {
-  @include euiTitle($euiFontSize);
+  @include euiTitle("xs");
 }
 
 .euiTitle--small {
-  @include euiTitle($euiFontSizeL);
+  @include euiTitle("s");
 }
 
 .euiTitle--medium {
-  @include euiTitle($euiFontSizeXL);
+  @include euiTitle("m");
 }
 
 .euiTitle--large {
-  @include euiTitle($euiFontSizeXXL);
+  @include euiTitle("l");
 }
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
@@ -69,7 +69,6 @@ $toastTypes: (
  * 3. Account for close button.
  */
 .euiToastHeader {
-  @include euiFontSizeM;
   padding-right: $euiSizeL; /* 3 */
 
   display: flex;
@@ -90,7 +89,8 @@ $toastTypes: (
   }
 
   .euiToastHeader__title {
-    @include euiTitle;
+    @include euiTitle("s");
+    font-weight: $euiFontWeightLight;
   }
 
 .euiToastHeader--withBody {
-Original file line number
+Diff line change
@@ Expand Up / @@ -94,7 +94,7 @@ @@
         }
         .euiSideNavItemButton__label {
-          @include euiTitle($euiFontSize);
+          @include euiTitle("xs");
         }
       }
@@ Expand Down @@