Add start of euiScaleText conversion + remove sizes class names

elastic · May 11, 2022 · 2d326aa · 2d326aa
1 parent acbe167
commit 2d326aa
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 37 deletions.
diff --git a/src/components/text/__snapshots__/text.test.tsx.snap b/src/components/text/__snapshots__/text.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiText is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiText euiText--medium testClass1 testClass2 css-1st3sqn-euiText"
+  class="euiText testClass1 testClass2 css-1p49t9d-euiText-m"
   data-test-subj="test subject string"
 >
   <p>
@@ -15,7 +15,7 @@ exports[`EuiText is rendered 1`] = `
 exports[`EuiText props grow false 1`] = `
 <div
   aria-label="aria-label"
-  class="euiText euiText--medium testClass1 testClass2 css-19nx0h7-euiText-constrainedWidth"
+  class="euiText testClass1 testClass2 css-1xlqmth-euiText-constrainedWidth-m"
   data-test-subj="test subject string"
 >
   <p>

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
@@ -1,9 +1,6 @@
 // This should only be used for .euiText, therefore it's not included in a separate mixin file
 @mixin euiScaleText($baseFontSize, $sizingMethod: 'rem') {
-  @include fontSize($baseFontSize, $sizingMethod);
-
   $baseLineHeightMultiplier: $baseFontSize / 2;
-  line-height: ($baseLineHeightMultiplier * 3) / $baseFontSize;
 
   p,
   ul,
@@ -158,19 +155,3 @@
     }
   }
 }
-
-.euiText--medium {
-  @include euiScaleText($euiFontSize, 'rem');
-}
-
-.euiText--small {
-  @include euiScaleText($euiFontSizeS, 'rem');
-}
-
-.euiText--extraSmall {
-  @include euiScaleText($euiFontSizeXS, 'rem');
-}
-
-.euiText--relative {
-  @include euiScaleText($euiFontSize, 'em');
-}
diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
+import { euiFontSize, _FontScaleOptions } from '../../global_styling';
 
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
@@ -27,6 +28,19 @@ export const euiText = (
   };
 };
 
+// Internal utility for EuiText scales/sizes
+const euiScaleText = (
+  euiTheme: UseEuiTheme['euiTheme'],
+  options: _FontScaleOptions
+) => {
+  const { fontSize, lineHeight } = euiFontSize('m', euiTheme, options);
+
+  return `
+    font-size: ${fontSize};
+    line-height: ${lineHeight};
+  `;
+};
+
 /**
  * Styles
  */
@@ -155,4 +169,28 @@ export const euiTextStyles = ({ euiTheme }: UseEuiTheme) => ({
     // at least make it 2/3 of its parent
     min-width: 75%;
   `,
+  // Sizes
+  m: css`
+    ${euiScaleText(euiTheme, {
+      measurement: 'rem',
+      customScale: 'm',
+    })}
+  `,
+  s: css`
+    ${euiScaleText(euiTheme, {
+      measurement: 'rem',
+      customScale: 's',
+    })}
+  `,
+  xs: css`
+    ${euiScaleText(euiTheme, {
+      measurement: 'rem',
+      customScale: 'xs',
+    })}
+  `,
+  relative: css`
+    ${euiScaleText(euiTheme, {
+      measurement: 'em',
+    })}
+  `,
 });
diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
@@ -8,7 +8,7 @@
 
 import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 import classNames from 'classnames';
-import { CommonProps, keysOf } from '../common';
+import { CommonProps } from '../common';
 
 import { useEuiTheme } from '../../services';
 import { euiTextStyles } from './text.styles';
@@ -17,16 +17,8 @@ import { TextColor, EuiTextColor } from './text_color';
 
 import { EuiTextAlign, TextAlignment } from './text_align';
 
-const textSizeToClassNameMap = {
-  xs: 'euiText--extraSmall',
-  s: 'euiText--small',
-  m: 'euiText--medium',
-  relative: 'euiText--relative',
-};
-
-export type TextSize = keyof typeof textSizeToClassNameMap;
-
-export const TEXT_SIZES = keysOf(textSizeToClassNameMap);
+export const TEXT_SIZES = ['xs', 's', 'm', 'relative'] as const;
+export type TextSize = typeof TEXT_SIZES[number];
 
 export type EuiTextProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
@@ -56,13 +48,10 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
   const cssStyles = [
     styles.euiText,
     !grow ? styles.constrainedWidth : undefined,
+    styles[size],
   ];
 
-  const classes = classNames(
-    'euiText',
-    textSizeToClassNameMap[size],
-    className
-  );
+  const classes = classNames('euiText', className);
 
   let optionallyAlteredText;
   if (color) {