microsoft · layershifter · May 31, 2019 · May 31, 2019 · May 31, 2019 · May 31, 2019
@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Make `contentRef` prop optional for `Accordion.Title` @Bugaa92 ([#1418](https://github.com/stardust-ui/react/pull/1418))
 - Call `getDerivedStateFromProps()` from `AutoControlledComponent` in `Dropdown` ([#1416](https://github.com/stardust-ui/react/pull/1416))
 - Fix `backgroundHover1` color in the Teams dark theme `colorScheme` @mnajdova ([1437](https://github.com/stardust-ui/react/pull/1437))
+- Revert changes with different roots in `Icon` component @layershifter ([#1435](https://github.com/stardust-ui/react/pull/1435))
 
 ### Features
 - Add keyboard navigation and screen reader support for `Accordion` @silviuavram ([#1322](https://github.com/stardust-ui/react/pull/1322))

@@ -1,6 +1,6 @@
 import * as customPropTypes from '@stardust-ui/react-proptypes'
-import cx from 'classnames'
 import * as PropTypes from 'prop-types'
+import * as React from 'react'
 import {
   callable,
   UIComponent,
@@ -13,7 +13,6 @@ import {
 import { iconBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
-import Box from '../Box/Box'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
@@ -80,26 +79,16 @@ class Icon extends UIComponent<WithAsProp<IconProps>, any> {
   }
 
   renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
-    const { className, name } = this.props
+    const { name } = this.props
     const { icons = {} } = theme
 
     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),
-          },
-        },
-      },
+    return (
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
+        {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl })}
+      </ElementType>
     )
   }
 }

@@ -1,6 +1,10 @@
 import { pxToRem } from '../../../../lib'
-import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
-import { ResultOf } from '../../../../types'
+import {
+  ComponentSlotStylesInput,
+  ICSSInJSStyle,
+  FontIconSpec,
+  ThemeIconSpec,
+} from '../../../types'
 import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
 import { IconVariables } from './iconVariables'
 import { emptyIcon } from './iconNames'
@@ -31,39 +35,40 @@ const getPaddedStyle = (): ICSSInJSStyle => ({
 })
 
 const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
-  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    speak: 'none',
-    verticalAlign: 'middle',
+  root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => {
+    const iconSpec: ThemeIconSpec = t.icons[p.name] || emptyIcon
+    const isFontIcon = !iconSpec.isSvg
 
-    ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
+    return {
+      speak: 'none',
+      verticalAlign: 'middle',
 
-    ...(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>
+      ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
 
-    return {
-      alignItems: 'center',
-      boxSizing: 'content-box',
-      display: 'inline-flex',
-      justifyContent: 'center',
+      ...(p.bordered && getBorderedStyles(v.borderColor)),
+      ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+      ...(p.disabled && {
+        color: v.disabledColor,
+      }),
+
+      ...(isFontIcon && {
+        alignItems: 'center',
+        boxSizing: 'content-box',
+        display: 'inline-flex',
+        justifyContent: 'center',
 
-      fontFamily: icon.fontFamily,
-      fontSize: v[`${p.size}Size`],
-      lineHeight: 1,
-      width: v[`${p.size}Size`],
-      height: v[`${p.size}Size`],
+        fontFamily: (iconSpec.icon as FontIconSpec).fontFamily,
+        fontSize: v[`${p.size}Size`],
+        lineHeight: 1,
+        width: v[`${p.size}Size`],
+        height: v[`${p.size}Size`],
 
-      '::before': {
-        content: icon.content,
-      },
+        '::before': {
+          content: (iconSpec.icon as FontIconSpec).content,
+        },
 
-      transform: t.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)`,
+      }),
     }
   },
 }

@@ -1,11 +1,19 @@
-import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { ComponentSlotStylesInput, ICSSInJSStyle, ThemeIconSpec } from '../../../types'
 import { IconProps } from '../../../../components/Icon/Icon'
 import { IconVariables } from '../../../teams/components/Icon/iconVariables'
+import { emptyIcon } from '../../../base/components/Icon/iconNames'
 
 const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
-  fontRoot: (): ICSSInJSStyle => ({
-    fontWeight: 900, // required for the fontAwesome to render
-  }),
+  root: ({ props: p, theme: t }): ICSSInJSStyle => {
+    const iconSpec: ThemeIconSpec = t.icons[p.name] || emptyIcon
+    const isFontIcon = !iconSpec.isSvg
+
+    return (
+      isFontIcon && {
+        fontWeight: 900, // required for the fontAwesome to render
+      }
+    )
+  },
 }
 
 export default iconStyles
@@ -43,21 +43,20 @@ const getIconColor = (variables, colors: StrictColorScheme<ItemType<typeof iconC
 }
 
 const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
-  root: ({ props: p, variables: v }): ICSSInJSStyle => {
+  root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => {
     const colors = v.colorScheme[p.color]
 
+    const maybeIcon = t.icons[p.name]
+    const isSvgIcon = maybeIcon && maybeIcon.isSvg
+
     return {
       display: 'inline-block', // we overriding this for Base theme
 
       // overriding base theme border handling
       ...((p.bordered || v.borderColor) &&
         getBorderedStyles(v.borderColor || getIconColor(v, colors))),
-    }
-  },
 
-  svgRoot: ({ props: p, variables: v }): ICSSInJSStyle => {
-    return {
-      backgroundColor: v.backgroundColor,
+      ...(isSvgIcon && { backgroundColor: v.backgroundColor }),
     }
   },
 

@@ -565,10 +565,10 @@ type SvgIconFuncArg = {
 }
 
 export type SvgIconSpec = ObjectOrFunc<React.ReactNode, SvgIconFuncArg>
-export type FontIconSpec = ObjectOrFunc<{
+export type FontIconSpec = {
   content: string
   fontFamily: string
-}>
+}
 
 export type ThemeIconSpec = {
   isSvg?: boolean