BREAKING(Text): change font size scheme and Text size API

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Change font ramp and Text size API @codepretty ([#214](https://github.com/stardust-ui/react/pull/214))
+
 ### Features
 - Add embed mode for `FocusZone` and use it in newly added Chat behaviors @tomasiser ([#233](https://github.com/stardust-ui/react/pull/233))
 

docs/src/examples/components/Text/Types/TextSizesExample.shorthand.tsx

@@ -1,23 +1,16 @@
 import React from 'react'
-import { Text } from '@stardust-ui/react'
+import * as _ from 'lodash'
+import { Provider, Text } from '@stardust-ui/react'
 
 const TextSizesExampleShorthand = () => (
-  <div>
-    <Text size="xs" content="Dicta voluptatum dolorem." />
-    <br />
-    <Text size="sm" content="Dicta voluptatum dolorem." />
-    <br />
-    <Text size="md" content="Dicta voluptatum dolorem." />
-    <br />
-    <Text size="lg" content="Dicta voluptatum dolorem." />
-    <br />
-    <Text size="xl" content="Dicta voluptatum dolorem." />
-    <br />
-    <Text size="2x" content="Dicta voluptatum dolorem." />
-    <br />
-    <Text size="3x" content="Dicta voluptatum dolorem." />
-    <br />
-    <Text size="4x" content="Dicta voluptatum dolorem." />
-  </div>
+  <Provider.Consumer
+    render={({ siteVariables }) => {
+      return _.map(siteVariables.fontSizes, (value, key) => (
+        <div key={key}>
+          <Text size={key} content={`This is size="${key}" size font.`} />
+        </div>
+      ))
+    }}
+  />
 )
 export default TextSizesExampleShorthand

docs/src/examples/components/Text/Types/TextSizesExample.tsx

@@ -1,23 +1,16 @@
 import React from 'react'
-import { Text } from '@stardust-ui/react'
+import * as _ from 'lodash'
+import { Provider, Text } from '@stardust-ui/react'
 
 const TextSizesExample = () => (
-  <div>
-    <Text size="xs">Dicta voluptatum dolorem.</Text>
-    <br />
-    <Text size="sm">Dicta voluptatum dolorem.</Text>
-    <br />
-    <Text size="md">Dicta voluptatum dolorem.</Text>
-    <br />
-    <Text size="lg">Dicta voluptatum dolorem.</Text>
-    <br />
-    <Text size="xl">Dicta voluptatum dolorem.</Text>
-    <br />
-    <Text size="2x">Dicta voluptatum dolorem.</Text>
-    <br />
-    <Text size="3x">Dicta voluptatum dolorem.</Text>
-    <br />
-    <Text size="4x">Dicta voluptatum dolorem.</Text>
-  </div>
+  <Provider.Consumer
+    render={({ siteVariables }) => {
+      return _.map(siteVariables.fontSizes, (value, key) => (
+        <div key={key}>
+          <Text size={key}>This is size="{key}" size font.</Text>
+        </div>
+      ))
+    }}
+  />
 )
 export default TextSizesExample

src/components/Chat/ChatMessage.tsx

@@ -131,15 +131,15 @@ class ChatMessage extends UIComponent<Extendable<IChatMessageProps>, any> {
 
     const authorComponent = Text.create(author, {
       defaultProps: {
-        size: 'sm',
+        size: 'small',
         styles: styles.author,
         variables: variables.author,
       },
     })
 
     const timestampComponent = Text.create(timestamp, {
       defaultProps: {
-        size: 'sm',
+        size: 'small',
         timestamp: true,
         styles: styles.timestamp,
         variables: variables.timestamp,

src/components/Provider/Provider.tsx

@@ -13,6 +13,7 @@ import {
   IFontFace,
 } from '../../../types/theme'
 import ProviderConsumer from './ProviderConsumer'
+import { mergeSiteVariables } from '../../lib/mergeThemes'
 
 export interface IProviderProps {
   theme: IThemeInput
@@ -74,7 +75,8 @@ class Provider extends React.Component<IProviderProps, any> {
       } else if (_.isPlainObject(staticStyle)) {
         renderObject(staticStyle as StaticStyleObject)
       } else if (_.isFunction(staticStyle)) {
-        renderObject((staticStyle as StaticStyleFunction)(siteVariables))
+        const preparedSiteVariables = mergeSiteVariables(siteVariables)
+        renderObject((staticStyle as StaticStyleFunction)(preparedSiteVariables))
       } else {
         throw new Error(
           `staticStyles array must contain CSS strings, style objects, or style functions, got: ${typeof staticStyle}`,

src/components/Text/Text.tsx

@@ -5,6 +5,7 @@ import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } f
 
 import { Extendable } from '../../../types/utils'
 import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme'
+import { Sizes } from '../../lib/enums'
 
 export interface ITextProps {
   as?: any
@@ -14,7 +15,7 @@ export interface ITextProps {
   disabled?: boolean
   error?: boolean
   important?: boolean
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2x' | '3x' | '4x'
+  size?: Sizes
   weight?: 'light' | 'semilight' | 'regular' | 'semibold' | 'bold'
   success?: boolean
   temporary?: boolean
@@ -60,7 +61,7 @@ class Text extends UIComponent<Extendable<ITextProps>, any> {
     important: PropTypes.bool,
 
     /** The size for the Text component */
-    size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2x', '3x', '4x']),
+    size: PropTypes.oneOf(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest']),
 
     /** The weight for the Text component */
     weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']),

src/lib/enums/sizes.ts

@@ -1,10 +1,9 @@
 export enum Sizes {
-  ExtraSmall = 'xs',
-  Small = 'sm',
-  Medium = 'md',
-  Large = 'lg',
-  ExtraLarge = 'xl',
-  '2x' = '2x',
-  '3x' = '3x',
-  '4x' = '4x',
+  Smallest = 'smallest',
+  Smaller = 'smaller',
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+  Larger = 'larger',
+  Largest = 'largest',
 }

src/lib/mergeThemes.ts

@@ -5,7 +5,8 @@ import {
   IComponentPartStylesInput,
   IComponentPartStylesPrepared,
   IFontFace,
-  ISiteVariables,
+  ISiteVariablesInput,
+  ISiteVariablesPrepared,
   IThemeComponentStylesInput,
   IThemeComponentStylesPrepared,
   IThemeComponentVariablesInput,
@@ -88,10 +89,14 @@ export const mergeComponentVariables = (
  * They are flat objects and do not depend on render-time values, such as props.
  */
 export const mergeSiteVariables = (
-  target: ISiteVariables,
-  ...sources: (ISiteVariables | null | undefined)[]
-): ISiteVariables => {
-  return sources.reduce<ISiteVariables>((acc, next) => ({ ...acc, ...next }), target)
+  target: ISiteVariablesInput,
+  ...sources: (ISiteVariablesInput | null | undefined)[]
+): ISiteVariablesPrepared => {
+  const initial: ISiteVariablesPrepared = {
+    ...target,
+    fontSizes: (target && target.fontSizes) || {},
+  }
+  return sources.reduce<ISiteVariablesPrepared>((acc, next) => ({ ...acc, ...next }), initial)
 }
 
 /**

src/lib/renderComponent.tsx

@@ -138,7 +138,7 @@ const renderComponent = <P extends {}>(
     <FelaTheme
       render={(theme: IThemePrepared) => {
         const {
-          siteVariables = {},
+          siteVariables = { fontSizes: {} },
           componentVariables = {},
           componentStyles = {},
           rtl = false,

src/themes/teams/components/Attachment/attachmentVariables.ts

@@ -29,11 +29,11 @@ export default siteVariables => ({
   progressColor: siteVariables.green,
   progressHeight: 4,
 
-  headerFontSize: siteVariables.fontSizeMedium,
+  headerFontSize: siteVariables.fontSizes.medium,
   headerFontWeight: siteVariables.fontWeightSemibold,
   headerLineHeight: siteVariables.lineHeightSmall,
 
-  descriptionFontSize: siteVariables.fontSizeSmall,
+  descriptionFontSize: siteVariables.fontSizes.small,
   descriptionFontWeight: siteVariables.fontWeightRegular,
   descriptionLineHeight: siteVariables.lineHeightSmall,
 })

src/themes/teams/components/Input/inputVariables.ts

@@ -8,7 +8,7 @@ export default (siteVars: any) => {
   vars.backgroundColor = siteVars.gray10
 
   vars.fontColor = siteVars.fontBlack
-  vars.fontSize = siteVars.fontSizeMedium
+  vars.fontSize = siteVars.fontSizes.medium
 
   vars.inputPadding = `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`
   vars.inputFocusBorderColor = siteVars.brand

src/themes/teams/components/List/listItemVariables.ts

@@ -2,16 +2,16 @@ export default siteVariables => ({
   // Header
   // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
   headerLineHeight: siteVariables.lineHeightSmall,
-  headerFontSize: siteVariables.fontSizeMedium,
+  headerFontSize: siteVariables.fontSizes.medium,
 
   // Header Media
   headerMediaColor: siteVariables.gray02,
-  headerMediaFontSize: siteVariables.fontSizeSmall,
+  headerMediaFontSize: siteVariables.fontSizes.small,
   // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
   headerMediaLineHeight: siteVariables.lineHeightSmall,
 
   // Content
   contentColor: siteVariables.gray02,
-  contentFontSize: siteVariables.fontSizeSmall,
+  contentFontSize: siteVariables.fontSizes.small,
   contentLineHeight: siteVariables.lineHeightSmall,
 })

src/themes/teams/components/Text/textStyles.ts

@@ -57,7 +57,7 @@ export default {
         fontWeight: v.importantWeight,
         color: v.importantTextColor,
       }),
-      ...(size === Sizes.ExtraSmall && {
+      ...(size === Sizes.Smaller && {
         fontSize: v.textExtraSmallFontSize,
         lineHeight: v.textExtraSmallLineHeight,
       }),
@@ -73,22 +73,10 @@ export default {
         fontSize: v.textLargeFontSize,
         lineHeight: v.textLargeLineHeight,
       }),
-      ...(size === Sizes.ExtraLarge && {
+      ...(size === Sizes.Larger && {
         fontSize: v.textExtraLargeFontSize,
         lineHeight: v.textExtraLargeLineHeight,
       }),
-      ...(size === Sizes['2x'] && {
-        fontSize: v.textX2FontSize,
-        lineHeight: v.textX2LineHeight,
-      }),
-      ...(size === Sizes['3x'] && {
-        fontSize: v.textX3FontSize,
-        lineHeight: v.textX3LineHeight,
-      }),
-      ...(size === Sizes['4x'] && {
-        fontSize: v.textX4FontSize,
-        lineHeight: v.textX4LineHeight,
-      }),
     }
   },
 }

src/themes/teams/components/Text/textVariables.ts

@@ -13,21 +13,15 @@ export interface ITextVariables {
   timestampTextColor: string
   timestampHoverTextColor: string
   textExtraSmallFontSize: string
-  textExtraSmallLineHeight: string
+  textExtraSmallLineHeight: number
   textSmallFontSize: string
-  textSmallLineHeight: string
+  textSmallLineHeight: number
   textMediumFontSize: string
-  textMediumLineHeight: string
+  textMediumLineHeight: number
   textLargeFontSize: string
-  textLargeLineHeight: string
+  textLargeLineHeight: number
   textExtraLargeFontSize: string
-  textExtraLargeLineHeight: string
-  textX2FontSize: string
-  textX2LineHeight: string
-  textX3FontSize: string
-  textX3LineHeight: string
-  textX4FontSize: string
-  textX4LineHeight: string
+  textExtraLargeLineHeight: number
 }
 
 export default (siteVariables): ITextVariables => {
@@ -39,30 +33,21 @@ export default (siteVariables): ITextVariables => {
     timestampTextColor: siteVariables.gray04,
     timestampHoverTextColor: siteVariables.gray02,
 
-    textExtraSmallFontSize: siteVariables.fontSizeExtraSmall,
+    textExtraSmallFontSize: siteVariables.fontSizes.smaller,
     textExtraSmallLineHeight: siteVariables.lineHeightExtraSmall,
 
-    textSmallFontSize: siteVariables.fontSizeSmall,
+    textSmallFontSize: siteVariables.fontSizes.small,
     textSmallLineHeight: siteVariables.lineHeightSmall,
 
-    textMediumFontSize: siteVariables.fontSizeMedium,
+    textMediumFontSize: siteVariables.fontSizes.medium,
     textMediumLineHeight: siteVariables.lineHeightBase,
 
-    textLargeFontSize: siteVariables.fontSizeLarge,
+    textLargeFontSize: siteVariables.fontSizes.large,
     textLargeLineHeight: siteVariables.lineHeightSmall,
 
-    textExtraLargeFontSize: siteVariables.fontSizeExtraLarge,
+    textExtraLargeFontSize: siteVariables.fontSizes.larger,
     textExtraLargeLineHeight: siteVariables.lineHeightSmall,
 
-    textX2FontSize: siteVariables.fontSizeX2,
-    textX2LineHeight: siteVariables.lineHeightSmall,
-
-    textX3FontSize: siteVariables.fontSizeX3,
-    textX3LineHeight: siteVariables.lineHeightSmall,
-
-    textX4FontSize: siteVariables.fontSizeX4,
-    textX4LineHeight: siteVariables.lineHeightSmall,
-
     importantWeight: siteVariables.fontWeightBold,
     importantTextColor: siteVariables.red,
 

src/themes/teams/siteVariables.ts

@@ -42,14 +42,13 @@ export const green04 = '#237b4b'
 //
 // FONT SIZES
 //
-export const fontSizeX4 = pxToRem(72)
-export const fontSizeX3 = pxToRem(48)
-export const fontSizeX2 = pxToRem(36)
-export const fontSizeExtraLarge = pxToRem(24)
-export const fontSizeLarge = pxToRem(18)
-export const fontSizeMedium = pxToRem(14)
-export const fontSizeSmall = pxToRem(12)
-export const fontSizeExtraSmall = pxToRem(10)
+export const fontSizes = {
+  smaller: pxToRem(10),
+  small: pxToRem(12),
+  medium: pxToRem(14),
+  large: pxToRem(18),
+  larger: pxToRem(24),
+}
 
 //
 // STATUS COLORS