Merge pull request #371 from dcos-labs/mp/fix/text-line-height

Add line-height to Text component
d2iq · Jul 11, 2019 · f490433 · f490433
2 parents d0b1b1e + 5a823c2
commit f490433
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/styleUtils/typography/components/Text.tsx b/packages/styleUtils/typography/components/Text.tsx
@@ -12,6 +12,7 @@ import {
   fontWeightNormal,
   themeTextColorPrimary
 } from "../../../design-tokens/build/js/designTokens";
+import { textBase } from "../style";
 
 export interface TextProps extends BasicTextProps {
   /**
@@ -29,6 +30,7 @@ const Text = (props: TextProps) => {
     <TextTag
       className={cx(
         className,
+        textBase,
         textWeight(weight as FontWeights),
         textSize(size),
         tintContent(color),

diff --git a/packages/styleUtils/typography/style.ts b/packages/styleUtils/typography/style.ts
@@ -2,12 +2,10 @@ import { css } from "emotion";
 import {
   fontLineHeightS,
   fontLineHeightM,
-  fontLineHeightDefault,
-  fontSizeM
+  fontLineHeightDefault
 } from "../../design-tokens/build/js/designTokens";
 
 export const textBase = css`
-  font-size: ${fontSizeM};
   line-height: ${fontLineHeightDefault};
 `;
 

diff --git a/packages/styleUtils/typography/tests/__snapshots__/typographyComponents.test.tsx.snap b/packages/styleUtils/typography/tests/__snapshots__/typographyComponents.test.tsx.snap
@@ -133,6 +133,7 @@ exports[`Typography SuccessText renders all props 1`] = `
 
 exports[`Typography Text renders all props 1`] = `
 .emotion-0 {
+  line-height: 1.4;
   font-weight: 500;
   font-size: 12px;
   color: black;
@@ -151,6 +152,7 @@ exports[`Typography Text renders all props 1`] = `
 
 exports[`Typography Text renders all wrap variants 1`] = `
 .emotion-0 {
+  line-height: 1.4;
   font-weight: 400;
   font-size: 14px;
   color: black;
@@ -172,6 +174,7 @@ exports[`Typography Text renders all wrap variants 1`] = `
 
 exports[`Typography Text renders all wrap variants 2`] = `
 .emotion-0 {
+  line-height: 1.4;
   font-weight: 400;
   font-size: 14px;
   color: black;
@@ -190,6 +193,7 @@ exports[`Typography Text renders all wrap variants 2`] = `
 
 exports[`Typography Text renders all wrap variants 3`] = `
 .emotion-0 {
+  line-height: 1.4;
   font-weight: 400;
   font-size: 14px;
   color: black;
@@ -220,6 +224,7 @@ exports[`Typography WarningText renders all props 1`] = `
 
 exports[`Typography renders all default 1`] = `
 .emotion-0 {
+  line-height: 1.4;
   font-size: 14px;
   color: var(--themeTextColorPrimary,#1B2029);
   fill: var(--themeTextColorPrimary,#1B2029);