feat(Icon): Redlining icons

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Remove `Sizes` and `Weights` enums, use typed string in `Text` instead @jurokapsiar ([#446](https://github.com/stardust-ui/react/pull/446))
 - Fix React's version in `peerDependencies` @layershifter ([#452](https://github.com/stardust-ui/react/pull/452))
 - Added Dark and Contrast theme variables for `Header` @bcalvery ([#427](https://github.com/stardust-ui/react/pull/427))
+- Fix Teams Icons styles to match spec @codepretty ([#441](https://github.com/stardust-ui/react/pull/441))
 - Fix styles as functions in shorthands are not applied @mnajdova ([#470](https://github.com/stardust-ui/react/pull/470))
 
 ### Features

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -10,7 +10,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
      
     <Avatar
       renderImage={(Image, props, children) => (
-        <Icon name="user" circular variables={{ color: 'blue' }} styles={{ fontSize: '16px' }} />
+        <Icon name="user" circular variables={{ color: 'blue' }} styles={{ padding: '8px' }} />
       )}
       status={{ color: 'green', icon: 'check', title: 'Available' }}
     />

docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx

@@ -3,7 +3,7 @@ import { Icon } from '@stardust-ui/react'
 
 const IconExampleDisabled = () => (
   <div>
-    <Icon disabled name="umbrella" size="big" />
+    <Icon disabled name="call-video" />
   </div>
 )
 

docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx

@@ -3,10 +3,10 @@ import { Icon } from '@stardust-ui/react'
 
 const IconExample = () => (
   <div>
-    <Icon name="umbrella" size="big" />
-    <Icon name="chess rook" size="big" />
-    <Icon name="book" size="big" />
-    <Icon name="circle" size="big" />
+    <Icon name="call-video" />
+    <Icon name="chess rook" />
+    <Icon name="book" />
+    <Icon name="circle" />
   </div>
 )
 

docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx

@@ -1,18 +1,44 @@
 import React from 'react'
-import { Grid, Icon, Provider } from '@stardust-ui/react'
+import { Grid, Divider, Header, Icon, Provider } from '@stardust-ui/react'
+
+const cellStyles = {
+  margin: '10px 0',
+}
 
 const IconSetExampleShorthand = () => (
   <Provider.Consumer
     render={theme => (
-      <Grid columns={3} style={{ textAlign: 'center' }}>
-        {Object.keys(theme.icons).map(name => (
-          <span key={name}>
-            <Icon name={name} />
-            <br />
-            <code>{name}</code>
-          </span>
-        ))}
-      </Grid>
+      <>
+        <div>
+          <Divider>
+            <Header as="h3" content="Regular" />
+          </Divider>
+          <Grid columns={4} style={{ textAlign: 'center' }}>
+            {Object.keys(theme.icons).map(name => (
+              <div key={name} style={cellStyles}>
+                <Icon name={name} />
+                <br />
+                <code>{name}</code>
+              </div>
+            ))}
+          </Grid>
+        </div>
+
+        <div>
+          <Divider>
+            <Header as="h3" content="Outline" />
+          </Divider>
+          <Grid columns={4} style={{ textAlign: 'center' }}>
+            {Object.keys(theme.icons).map(name => (
+              <div key={name + '-outline'} style={cellStyles}>
+                <Icon name={name} variables={{ outline: true }} />
+                <br />
+                <code>{name} outline</code>
+              </div>
+            ))}
+          </Grid>
+        </div>
+      </>
     )}
   />
 )

docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx

@@ -7,6 +7,8 @@ const IconExampleBordered = () => (
     <Icon name="book" bordered />
     <Icon name="expand" bordered />
     <Icon name="play" bordered />
+    <Icon name="call" bordered />
+    <Icon name="call-video" bordered />
     <Icon name="stop" bordered />
     <Icon name="calendar alternate outline" bordered />
     <Icon name="coffee" bordered />

docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx

@@ -7,6 +7,8 @@ const IconExampleCircular = () => (
     <Icon name="book" circular />
     <Icon name="expand" circular />
     <Icon name="play" circular />
+    <Icon name="call" circular />
+    <Icon name="call-video" circular />
     <Icon name="stop" circular />
     <Icon name="calendar alternate outline" circular />
     <Icon name="coffee" circular />

docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx

@@ -1,18 +1,35 @@
 import React from 'react'
-import { Icon } from '@stardust-ui/react'
+import { Grid, Icon } from '@stardust-ui/react'
 
 const IconExampleSize = () => (
-  <div>
+  <Grid rows={2} style={{ textAlign: 'center' }}>
     <Icon name="home" size="micro" />
+    <Icon name="call-video" size="micro" />
+
     <Icon name="home" size="mini" />
+    <Icon name="call-video" size="mini" />
+
     <Icon name="home" size="tiny" />
+    <Icon name="call-video" size="tiny" />
+
     <Icon name="home" size="small" />
+    <Icon name="call-video" size="small" />
+
     <Icon name="home" />
+    <Icon name="call-video" />
+
     <Icon name="home" size="large" />
+    <Icon name="call-video" size="large" />
+
     <Icon name="home" size="big" />
+    <Icon name="call-video" size="big" />
+
     <Icon name="home" size="huge" />
+    <Icon name="call-video" size="huge" />
+
     <Icon name="home" size="massive" />
-  </div>
+    <Icon name="call-video" size="massive" />
+  </Grid>
 )
 
 export default IconExampleSize

docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx

@@ -5,27 +5,27 @@ const IconExampleSpace = () => (
   <div>
     <div style={{ marginBottom: '1.2rem' }}>
       <Label content="Default" />
-      <Icon name="umbrella" size="big" />
+      <Icon name="call-video" />
       <Label content="Default" />
     </div>
     <div style={{ marginBottom: '1.2rem' }}>
       <Label content="Before" />
-      <Icon name="umbrella" xSpacing="before" size="big" />
+      <Icon name="call-video" xSpacing="before" />
       <Label content="Before" />
     </div>
     <div style={{ marginBottom: '1.2rem' }}>
       <Label content="After" />
-      <Icon name="umbrella" xSpacing="after" size="big" />
+      <Icon name="call-video" xSpacing="after" />
       <Label content="After" />
     </div>
     <div style={{ marginBottom: '1.2rem' }}>
       <Label content="Both" />
-      <Icon name="umbrella" xSpacing="both" size="big" />
+      <Icon name="call-video" xSpacing="both" />
       <Label content="Both" />
     </div>
     <div style={{ marginBottom: '1.2rem' }}>
       <Label content="None" />
-      <Icon name="umbrella" xSpacing="none" size="big" />
+      <Icon name="call-video" xSpacing="none" />
       <Label content="None" />
     </div>
   </div>

src/components/Status/Status.tsx

@@ -61,7 +61,7 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
       <ElementType {...rest} className={classes.root}>
         {Icon.create(icon, {
           defaultProps: {
-            size: 'tiny',
+            size: 'micro',
             styles: styles.icon,
             variables: variables.icon,
             xSpacing: 'none',

src/themes/teams/components/Icon/iconStyles.ts

@@ -4,38 +4,43 @@ import { fittedStyle } from '../../../../styles/customCSS'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../../types/utils'
 import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
-
+import { pxToRem } from './../../../../lib'
 import { getStyle as getSvgStyle } from './svg'
 
 const sizes = new Map([
-  ['micro', 0.3],
-  ['mini', 0.4],
-  ['tiny', 0.5],
-  ['small', 0.75],
-  ['normal', 1],
-  ['large', 1.5],
-  ['big', 2],
-  ['huge', 4],
-  ['massive', 8],
+  ['micro', 7],
+  ['mini', 10],
+  ['tiny', 12],
+  ['small', 14],
+  ['normal', 16],
+  ['large', 20],
+  ['big', 32],
+  ['huge', 40],
+  ['massive', 64],
 ])
 
 const getDefaultFontIcon = (iconName: string) => {
   return callable(fontAwesomeIcons(iconName).icon)()
 }
 
-const getSize = size => `${sizes.get(size)}em`
-
-const getFontStyles = (iconName: string, themeIcon?: ResultOf<FontIconSpec>): ICSSInJSStyle => {
+const getFontStyles = (
+  size: string,
+  iconName: string,
+  themeIcon?: ResultOf<FontIconSpec>,
+): ICSSInJSStyle => {
   const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
 
   return {
     fontFamily,
-    textAlign: 'center',
+    fontSize: getSize(size),
     lineHeight: 1,
-    width: '1.18em',
+    textAlign: 'center',
 
     '::before': {
       content,
+      display: 'block',
+      width: getSize(size),
+      height: getSize(size),
     },
   }
 }
@@ -53,21 +58,23 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS
   }
 }
 
-const getBorderedStyles = (isFontBased, circular, borderColor, color): ICSSInJSStyle => {
+const getBorderedStyles = (circular, boxShadowColor): ICSSInJSStyle => {
   return {
-    ...getPaddedStyle(isFontBased),
+    ...getPaddedStyle(),
 
-    boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`,
+    boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`,
     ...(circular ? { borderRadius: '50%' } : {}),
   }
 }
 
-const getPaddedStyle = (isFontBased: boolean): ICSSInJSStyle => ({
-  padding: `0.5em ${isFontBased ? 0 : '0.5em'}`,
-  width: '2em',
-  height: '2em',
+const getPaddedStyle = (): ICSSInJSStyle => ({
+  padding: pxToRem(4),
 })
 
+const getSize = size => pxToRem(sizes.get(size))
+
+const getIconColor = color => color || 'currentColor'
+
 const iconStyles: ComponentSlotStylesInput<IconProps, any> = {
   root: ({
     props: { disabled, name, size, bordered, circular, xSpacing },
@@ -76,46 +83,64 @@ const iconStyles: ComponentSlotStylesInput<IconProps, any> = {
   }): ICSSInJSStyle => {
     const iconSpec = theme.icons[name]
     const isFontBased = !iconSpec || !iconSpec.isSvg
-    const iconColor = v.color || 'currentColor'
 
     return {
       backgroundColor: v.backgroundColor,
       display: 'inline-block',
-      fontSize: getSize(size),
       margin: v.margin,
       speak: 'none',
       verticalAlign: 'middle',
-      overflow: 'hidden',
-      width: '1em',
-      height: '1em',
 
       ...(isFontBased &&
-        getFontStyles(name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
+        getFontStyles(size, name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
 
       ...(isFontBased && {
-        color: iconColor,
+        color: getIconColor(v.color),
 
         ...(disabled && {
           color: v.disabledColor,
         }),
       }),
 
-      ...(!isFontBased && {
-        fill: iconColor,
-
-        ...(disabled && {
-          fill: v.disabledColor,
-        }),
-      }),
-
       ...getXSpacingStyles(xSpacing, v.horizontalSpace),
 
       ...((bordered || v.borderColor || circular) &&
-        getBorderedStyles(isFontBased, circular, v.borderColor, v.color)),
+        getBorderedStyles(circular, v.borderColor || v.color || theme.siteVariables.bodyColor)),
+    }
+  },
+
+  outlinePart: ({ variables: v }): ICSSInJSStyle => {
+    return {
+      display: 'none',
+
+      ...(v.outline && {
+        display: 'block',
+      }),
+    }
+  },
+
+  filledPart: ({ variables: v }): ICSSInJSStyle => {
+    return {
+      ...(v.outline && {
+        display: 'none',
+      }),
     }
   },
 
-  svg: getSvgStyle('svg'),
+  svg: ({ props: { size, disabled }, variables: v }): ICSSInJSStyle => {
+    return {
+      display: 'block',
+      width: getSize(size),
+      height: getSize(size),
+      fill: getIconColor(v.color),
+
+      ...(disabled && {
+        fill: v.disabledColor,
+      }),
+
+      ...getSvgStyle('svg'),
+    }
+  },
 
   g: getSvgStyle('g'),
 

src/themes/teams/components/Icon/iconVariables.ts

@@ -1,8 +1,9 @@
 import { pxToRem } from '../../../../lib'
 
 export interface IconVariables {
-  [key: string]: string | number | undefined
+  [key: string]: string | number | boolean | undefined
 
+  outline?: boolean
   color?: string
   backgroundColor?: string
   borderColor?: string
@@ -13,11 +14,12 @@ export interface IconVariables {
 }
 
 export default (siteVars): IconVariables => ({
+  outline: undefined,
   color: undefined,
   backgroundColor: undefined,
   borderColor: undefined,
   horizontalSpace: pxToRem(10),
-  margin: '0 0.25em 0 0',
+  margin: `0 ${pxToRem(8)} 0 0`,
   secondaryColor: siteVars.white,
   disabledColor: siteVars.gray06,
 })