fix(Text): refactor variables to match size prop (#762)

* fix(Text): refactor variables to match size prop * fix keys warning * fix size value * add sizes for Teams theme * add entry * revert teams theme change * add separate lineHeight variables
microsoft · Jan 24, 2019 · d767a49 · d767a49
1 parent 178e6fa
commit d767a49
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Update variable names in themes, add missing sizes @layershifter ([#762](https://github.com/stardust-ui/react/pull/762))
+
 <!--------------------------------[ v0.18.0 ]------------------------------- -->
 ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.17.0...v0.18.0)

diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx
@@ -6,10 +6,10 @@ const TextExampleColor = () => (
   <ProviderConsumer
     render={({ siteVariables: { emphasisColors, naturalColors } }) =>
       _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
-        <>
-          <Text key={color} color={color} content={_.startCase(color)} />
+        <React.Fragment key={color}>
+          <Text color={color} content={_.startCase(color)} />
           <br />
-        </>
+        </React.Fragment>
       ))
     }
   />

diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.tsx
@@ -6,12 +6,10 @@ const TextExampleColor = () => (
   <ProviderConsumer
     render={({ siteVariables: { emphasisColors, naturalColors } }) =>
       _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
-        <>
-          <Text key={color} color={color}>
-            {_.startCase(color)}
-          </Text>
+        <React.Fragment key={color}>
+          <Text color={color}>{_.startCase(color)}</Text>
           <br />
-        </>
+        </React.Fragment>
       ))
     }
   />

diff --git a/src/themes/base/components/Text/textStyles.ts b/src/themes/base/components/Text/textStyles.ts
@@ -53,9 +53,13 @@ export default {
         fontWeight: v.fontWeightBold,
       }),
 
+      ...(size === 'smallest' && {
+        fontSize: v.fontSizeSmallest,
+        lineHeight: v.fontLineHeightSmallest,
+      }),
       ...(size === 'smaller' && {
-        fontSize: v.fontSizeExtraSmall,
-        lineHeight: v.fontLineHeightExtraSmall,
+        fontSize: v.fontSizeSmaller,
+        lineHeight: v.fontLineHeightSmaller,
       }),
       ...(size === 'small' && {
         fontSize: v.fontSizeSmall,
@@ -70,8 +74,12 @@ export default {
         lineHeight: v.fontLineHeightLarge,
       }),
       ...(size === 'larger' && {
-        fontSize: v.fontSizeExtraLarge,
-        lineHeight: v.fontLineHeightExtraLarge,
+        fontSize: v.fontSizeLarger,
+        lineHeight: v.fontLineHeightLarger,
+      }),
+      ...(size === 'largest' && {
+        fontSize: v.fontSizeLargest,
+        lineHeight: v.fontLineHeightLargest,
       }),
     }
   },

diff --git a/src/themes/base/components/Text/textVariables.ts b/src/themes/base/components/Text/textVariables.ts
@@ -13,17 +13,21 @@ export interface TextVariables {
   errorColor: string
   successColor: string
 
-  fontSizeExtraSmall: string
+  fontSizeSmallest: string
+  fontSizeSmaller: string
   fontSizeSmall: string
   fontSizeMedium: string
   fontSizeLarge: string
-  fontSizeExtraLarge: string
+  fontSizeLarger: string
+  fontSizeLargest: string
 
-  fontLineHeightExtraSmall: number
+  fontLineHeightSmallest: number
+  fontLineHeightSmaller: number
   fontLineHeightSmall: number
   fontLineHeightMedium: number
   fontLineHeightLarge: number
-  fontLineHeightExtraLarge: number
+  fontLineHeightLarger: number
+  fontLineHeightLargest: number
 
   fontWeightLight: number
   fontWeightSemilight: number
@@ -47,20 +51,26 @@ export default (siteVariables): TextVariables => {
     errorColor: siteVariables.colors.red[500],
     successColor: siteVariables.colors.green[500],
 
-    fontSizeExtraSmall: siteVariables.fontSizes.smaller,
-    fontLineHeightExtraSmall: siteVariables.lineHeightExtraSmall,
+    fontSizeSmallest: siteVariables.fontSizes.smallest,
+    fontLineHeightSmallest: siteVariables.lineHeightSmallest,
+
+    fontSizeSmaller: siteVariables.fontSizes.smaller,
+    fontLineHeightSmaller: siteVariables.lineHeightSmaller,
 
     fontSizeSmall: siteVariables.fontSizes.small,
     fontLineHeightSmall: siteVariables.lineHeightSmall,
 
     fontSizeMedium: siteVariables.fontSizes.medium,
-    fontLineHeightMedium: siteVariables.lineHeightBase,
+    fontLineHeightMedium: siteVariables.lineHeightMedium,
 
     fontSizeLarge: siteVariables.fontSizes.large,
-    fontLineHeightLarge: siteVariables.lineHeightSmall,
+    fontLineHeightLarge: siteVariables.lineHeightLarge,
+
+    fontSizeLarger: siteVariables.fontSizes.larger,
+    fontLineHeightLarger: siteVariables.lineHeightLarger,
 
-    fontSizeExtraLarge: siteVariables.fontSizes.larger,
-    fontLineHeightExtraLarge: siteVariables.lineHeightSmall,
+    fontSizeLargest: siteVariables.fontSizes.largest,
+    fontLineHeightLargest: siteVariables.lineHeightLargest,
 
     fontWeightLight: siteVariables.fontWeightLight,
     fontWeightSemilight: siteVariables.fontWeightSemilight,

diff --git a/src/themes/base/siteVariables.ts b/src/themes/base/siteVariables.ts
@@ -8,11 +8,13 @@ export { colors, contextualColors, emphasisColors, naturalColors, colorScheme }
 // FONT SIZES
 //
 export const fontSizes = {
+  smallest: '0.8rem',
   smaller: '1rem',
   small: '1.2rem',
   medium: '1.4rem',
   large: '1.8rem',
   larger: '2.4rem',
+  largest: '3rem',
 }
 
 //
@@ -27,6 +29,10 @@ export const fontWeightBold = 700
 //
 // LINE HEIGHTS
 //
-export const lineHeightBase = 1.4286
+export const lineHeightSmallest = 1.2
+export const lineHeightSmaller = 1.2
 export const lineHeightSmall = 1.3333
-export const lineHeightExtraSmall = 1.2
+export const lineHeightMedium = 1.4286
+export const lineHeightLarge = 1.3333
+export const lineHeightLarger = 1.3333
+export const lineHeightLargest = 1.3333
diff --git a/src/themes/teams/components/Menu/menuVariables.ts b/src/themes/teams/components/Menu/menuVariables.ts
@@ -47,6 +47,6 @@ export default (siteVars: any): MenuVariables => {
 
     disabledColor: siteVars.gray06,
 
-    lineHeightBase: siteVars.lineHeightBase,
+    lineHeightBase: siteVars.lineHeightMedium,
   }
 }
diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts
@@ -83,9 +83,11 @@ export const fontWeightBold = 700
 //
 // LINE HEIGHTS
 //
-export const lineHeightBase = 1.4286
+export const lineHeightSmaller = 1.2
 export const lineHeightSmall = 1.3333
-export const lineHeightExtraSmall = 1.2
+export const lineHeightMedium = 1.4286
+export const lineHeightLarge = 1.3333
+export const lineHeightLarger = 1.3333
 
 //
 // SEMANTIC ASSIGNMENTS
@@ -97,4 +99,4 @@ export const bodyFontFamily =
 export const bodyFontSize = '1.4rem'
 export const bodyBackground = white
 export const bodyColor = black
-export const bodyLineHeight = lineHeightBase
+export const bodyLineHeight = lineHeightMedium