feat(themes): add FontAwesome theme

CHANGELOG.md

@@ -26,12 +26,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fixed `TreeTitle` - `tabIndex` prop should be camel case in behavior @sophieH29 ([#1345](https://github.com/stardust-ui/react/pull/1345))
 - Fixed handle refs on updates of `innerRef` prop in `Ref` component @layershifter ([#1331](https://github.com/stardust-ui/react/pull/1331))
 - Fixed positioing of `Popup` in scrollable container @layershifter ([#1341](https://github.com/stardust-ui/react/pull/1341))
+- FontAwesome icons is not part of Teams theme more @layershifter ([#1337](https://github.com/stardust-ui/react/pull/1337))
 
 ### Features
 - Add `selected`, `isFromKeyboard` props to `DropdownItem` @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))
 - Add styles for the dark and high contrast Teams themes for the `Dropdown` component @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))
 - Highlight options by character keys in `Dropdown` non-search versions @silviuavram ([#1270](https://github.com/stardust-ui/react/pull/1270))
 - Aligned link styles for `Chat.Message` component with latest Teams theme design @Bugaa92 ([#1269](https://github.com/stardust-ui/react/pull/1269))
+- Add FontAwesome theme @layershifter ([#1337](https://github.com/stardust-ui/react/pull/1337))
 
 <!--------------------------------[ v0.30.0 ]------------------------------- -->
 ## [v0.30.0](https://github.com/stardust-ui/react/tree/v0.30.0) (2019-05-10)

docs/src/app.tsx

@@ -20,7 +20,7 @@ class App extends React.Component<any, ThemeContextData> {
       <ThemeContext.Provider value={this.state}>
         <Provider
           as={React.Fragment}
-          theme={mergeThemes(themes[themeName], {
+          theme={mergeThemes(themes.fontAwesome, themes[themeName], {
             // adjust Teams' theme to Semantic UI's font size scheme
             staticStyles: [
               {

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -498,7 +498,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       description,
       title,
     } = this.props
-    const { showCode, showRtl, showTransparent } = this.state
+    const { showCode, showRtl, showTransparent, themeName } = this.state
 
     return (
       <Flex column>
@@ -540,6 +540,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
               render={this.renderElement}
               renderHtml={showCode}
               resolver={importResolver}
+              themeName={themeName}
             >
               <Provider.Consumer
                 render={({ siteVariables }) => {

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

@@ -18,7 +18,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
         // This example does not react to the avatar size variable
         // and otherwise produces bad results when border is applied compared to "normal" image
         <Icon
-          name="user"
+          name="lock"
           circular
           bordered
           variables={{ color: 'blue' }}

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

@@ -1,46 +1,46 @@
 import * as React from 'react'
-import { Grid, Divider, Header, Icon, Provider } from '@stardust-ui/react'
+import { Grid, Divider, Header, Icon, themes } from '@stardust-ui/react'
 
 const cellStyles = {
   margin: '10px 0',
 }
 
-const IconSetExampleShorthand = () => (
-  <Provider.Consumer
-    render={theme => (
-      <>
-        <div>
-          <Divider>
-            <Header as="h3" content="Regular" />
-          </Divider>
-          <Grid columns={4} styles={{ textAlign: 'center' }}>
-            {Object.keys(theme.icons).map(name => (
-              <div key={name} style={cellStyles}>
-                <Icon name={name} />
-                <br />
-                <code>{name}</code>
-              </div>
-            ))}
-          </Grid>
-        </div>
+const IconSetExampleShorthand: React.FunctionComponent<{ themeName: string }> = ({ themeName }) => (
+  <>
+    <div>
+      <Divider>
+        <Header as="h3" content="Regular" />
+      </Divider>
+      <Grid columns={4} styles={{ textAlign: 'center' }}>
+        {Object.keys(themes[themeName].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} styles={{ textAlign: 'center' }}>
-            {Object.keys(theme.icons).map(name => (
-              <div key={`${name}-outline`} style={cellStyles}>
-                <Icon name={name} outline />
-                <br />
-                <code>{name} outline</code>
-              </div>
-            ))}
-          </Grid>
-        </div>
-      </>
-    )}
-  />
+    <div>
+      <Divider>
+        <Header as="h3" content="Outline" />
+      </Divider>
+      <Grid columns={4} styles={{ textAlign: 'center' }}>
+        {Object.keys(themes[themeName].icons).map(name => (
+          <div key={`${name}-outline`} style={cellStyles}>
+            <Icon name={name} outline />
+            <br />
+            <code>{name} outline</code>
+          </div>
+        ))}
+      </Grid>
+    </div>
+  </>
 )
 
+IconSetExampleShorthand.defaultProps = {
+  themeName: 'teams',
+}
+
 export default IconSetExampleShorthand

docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx

@@ -17,33 +17,18 @@ class RadioGroupColorPickerExample extends React.Component {
             value: color,
             name: color,
             'aria-label': color,
-            icon: this.createIcon(color),
+            icon: {
+              name: 'stardust-circle',
+              variables: {
+                color,
+              },
+            },
           }))}
           checkedValueChanged={(e, props) => this.setState({ selectedValue: props.value })}
         />
       </div>
     )
   }
-
-  createIcon(value) {
-    const { selectedValue } = this.state
-    const isSelected = selectedValue === value
-
-    return {
-      styles: {
-        backgroundColor: value,
-        border: '1px solid white',
-        ...(isSelected && {
-          border: '1px solid black',
-        }),
-        borderRadius: '3px',
-        ...(isSelected && {
-          backgroundClip: 'content-box',
-          padding: '5px',
-        }),
-      },
-    }
-  }
 }
 
 export default RadioGroupColorPickerExample

packages/react/src/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import * as customPropTypes from '@stardust-ui/react-proptypes'
-import * as React from 'react'
+import cx from 'classnames'
 import * as PropTypes from 'prop-types'
 import {
   callable,
@@ -12,9 +12,8 @@ import {
 } from '../../lib'
 import { iconBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-
-import { SvgIconSpec } from '../../themes/types'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
+import Box from '../Box/Box'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
@@ -80,46 +79,28 @@ class Icon extends UIComponent<WithAsProp<IconProps>, any> {
     rotate: 0,
   }
 
-  private renderFontIcon(ElementType, classes, unhandledProps, accessibility): React.ReactNode {
-    return (
-      <ElementType
-        className={classes.root}
-        {...accessibility.attributes.root}
-        {...unhandledProps}
-      />
-    )
-  }
-
-  private renderSvgIcon(
-    ElementType,
-    svgIconDescriptor: SvgIconSpec,
-    classes,
-    unhandledProps,
-    accessibility,
-    rtl,
-  ): React.ReactNode {
-    return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {svgIconDescriptor && callable(svgIconDescriptor)({ classes, rtl })}
-      </ElementType>
-    )
-  }
-
-  public renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl }) {
+  renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
+    const { className, name } = this.props
     const { icons = {} } = theme
 
-    const maybeIcon = icons[this.props.name]
-
-    return maybeIcon && maybeIcon.isSvg
-      ? this.renderSvgIcon(
-          ElementType,
-          maybeIcon.icon as SvgIconSpec,
-          classes,
-          unhandledProps,
-          accessibility,
-          rtl,
-        )
-      : this.renderFontIcon(ElementType, classes, unhandledProps, accessibility)
+    const maybeIcon = icons[name]
+    const isSvgIcon = maybeIcon && maybeIcon.isSvg
+
+    return Box.create(
+      { content: isSvgIcon && callable(maybeIcon.icon)({ classes, rtl }) },
+      {
+        defaultProps: {
+          as: ElementType,
+          className: cx(Icon.className, className),
+          ...accessibility.attributes.root,
+          ...unhandledProps,
+          styles: {
+            ...styles.root,
+            ...(isSvgIcon ? styles.svgRoot : styles.fontRoot),
+          },
+        },
+      },
+    )
   }
 }
 

packages/react/src/components/RadioGroup/RadioGroupItem.tsx

@@ -161,11 +161,9 @@ class RadioGroupItem extends AutoControlledComponent<
           {...unhandledProps}
           {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
         >
-          {Icon.create(icon || '', {
+          {Icon.create(icon || 'stardust-circle', {
             defaultProps: {
-              circular: true,
-              bordered: true,
-              size: 'smaller',
+              size: 'small',
               styles: styles.icon,
             },
           })}

packages/react/src/themes/base/components/Icon/index.ts → packages/react/src/themes/base/components/Icon/iconNames.ts

@@ -5,6 +5,7 @@ const fontIcon = (content: string): ThemeIconSpec => ({
 })
 
 export const icons: ThemeIcons = {
+  'stardust-circle': fontIcon('25CF'),
   'stardust-close': fontIcon('2715'),
   'stardust-arrow-down': fontIcon('25BE'),
   'stardust-arrow-end': fontIcon('25B8'),
@@ -13,6 +14,6 @@ export const icons: ThemeIcons = {
   'stardust-play': fontIcon('23F8'),
 }
 
-const emptyIcon = { icon: { content: '?' } }
+export const emptyIcon: ThemeIconSpec = { icon: { content: '?' } }
 
 export default (name: string): ThemeIconSpec => icons[name] || emptyIcon

packages/react/src/themes/base/components/Icon/iconStyles.ts

@@ -1,39 +1,9 @@
-import icons from './index'
-import { callable, pxToRem } from '../../../../lib'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../types'
 import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
 import { IconVariables } from './iconVariables'
-
-const getDefaultFontIcon = (iconName: string) => {
-  return callable(icons(iconName).icon)()
-}
-
-const getFontStyles = (
-  size: number,
-  iconName: string,
-  themeIcon?: ResultOf<FontIconSpec>,
-): ICSSInJSStyle => {
-  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
-  const sizeInRems = pxToRem(size)
-
-  return {
-    fontFamily,
-    fontSize: sizeInRems,
-    lineHeight: 1,
-
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-
-    width: sizeInRems,
-    height: sizeInRems,
-
-    '::before': {
-      content,
-    },
-  }
-}
+import { emptyIcon } from './iconNames'
 
 const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => {
   switch (xSpacing) {
@@ -61,27 +31,39 @@ const getPaddedStyle = (): ICSSInJSStyle => ({
 })
 
 const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
-  root: ({ props: p, variables: v, theme }): ICSSInJSStyle => {
-    const iconSpec = theme.icons[p.name]
-    const rtl = theme.rtl
-    const isFontBased = p.name && (!iconSpec || !iconSpec.isSvg)
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    speak: 'none',
+    verticalAlign: 'middle',
+
+    ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
+
+    ...(p.bordered && getBorderedStyles(v.borderColor)),
+    ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+    ...(p.disabled && {
+      color: v.disabledColor,
+    }),
+  }),
+  fontRoot: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => {
+    const iconSpec = t.icons[p.name] || emptyIcon
+    const icon = iconSpec.icon as ResultOf<FontIconSpec>
 
     return {
-      display: 'inline-block',
-      speak: 'none',
-      verticalAlign: 'middle',
-
+      alignItems: 'center',
       boxSizing: 'content-box',
+      display: 'inline-flex',
+      justifyContent: 'center',
 
-      ...(isFontBased && getFontStyles(16, p.name)),
-
-      ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
-
-      ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+      fontFamily: icon.fontFamily,
+      fontSize: v[`${p.size}Size`],
+      lineHeight: 1,
+      width: v[`${p.size}Size`],
+      height: v[`${p.size}Size`],
 
-      ...(p.bordered && getBorderedStyles(v.borderColor)),
+      '::before': {
+        content: icon.content,
+      },
 
-      transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
+      transform: t.rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
     }
   },
 }