Error message font size (#1960)

* updates error message * Create weak-carrots-divide.md
mongodb · Aug 28, 2023 · c89d17a · c89d17a
1 parent 8366594
commit c89d17a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/.changeset/weak-carrots-divide.md b/.changeset/weak-carrots-divide.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/typography': major
+---
+
+Updates `Error` component to read from TypographyProvider to set font size
diff --git a/packages/typography/src/Error/Error.styles.ts b/packages/typography/src/Error/Error.styles.ts
@@ -1,7 +1,12 @@
 import { css } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import { fontFamilies, fontWeights } from '@leafygreen-ui/tokens';
+import {
+  BaseFontSize,
+  fontFamilies,
+  fontWeights,
+  typeScales,
+} from '@leafygreen-ui/tokens';
 
 export const errorMessageStyle = css`
   font-family: ${fontFamilies.default};
@@ -22,3 +27,14 @@ export const errorMessageModeStyle: Record<Theme, string> = {
     color: ${palette.red.light1};
   `,
 };
+
+export const errorMessageTypeScaleStyles: Record<BaseFontSize, string> = {
+  [BaseFontSize.Body1]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+  `,
+  [BaseFontSize.Body2]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
+  `,
+};
diff --git a/packages/typography/src/Error/Error.tsx b/packages/typography/src/Error/Error.tsx
@@ -8,7 +8,13 @@ import {
   usePolymorphic,
 } from '@leafygreen-ui/polymorphic';
 
-import { errorMessageModeStyle, errorMessageStyle } from './Error.styles';
+import { useUpdatedBaseFontSize } from '../utils/useUpdatedBaseFontSize';
+
+import {
+  errorMessageModeStyle,
+  errorMessageStyle,
+  errorMessageTypeScaleStyles,
+} from './Error.styles';
 import { BaseErrorProps } from './Error.types';
 
 const Error = Polymorphic<BaseErrorProps>(
@@ -20,6 +26,7 @@ const Error = Polymorphic<BaseErrorProps>(
     ...rest
   }) => {
     const { theme } = useDarkMode(darkModeProp);
+    const baseFontSize = useUpdatedBaseFontSize();
     const { Component } = usePolymorphic(as);
 
     return (
@@ -28,6 +35,7 @@ const Error = Polymorphic<BaseErrorProps>(
         className={cx(
           errorMessageStyle,
           errorMessageModeStyle[theme],
+          errorMessageTypeScaleStyles[baseFontSize],
           className,
         )}
       >