feat(Icon): add props arg to SVG spec (#1562)

* add props arg to svg icon spec * leave size modifier to be an optional var * remove sizeModifier const * upd changelog * upd changelog
microsoft · Jul 8, 2019 · 8c9ef6b · 8c9ef6b
1 parent 442ff22
commit 8c9ef6b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,7 +30,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add static `className` prop to result type of `createComponent` @kuzhelov ([#1563](https://github.com/stardust-ui/react/pull/1563))
 - Add `hand` icon to Teams theme @t-proko ([#1567](https://github.com/stardust-ui/react/pull/1567))
 - Add accessibility attributes and keyboard handlers for `Tooltip` @sophieH29 ([#1575](https://github.com/stardust-ui/react/pull/1575))
- - Add `labelPosition` prop to `Checkbox` component @layershifter ([#1578](https://github.com/stardust-ui/react/pull/1578))
+- Add `labelPosition` prop to `Checkbox` component @layershifter ([#1578](https://github.com/stardust-ui/react/pull/1578))
+- Pass `props` of `Icon` component to SVG spec @kuzhelov ([#1562](https://github.com/stardust-ui/react/pull/1562))
 
 ### Documentation
 - Ensure docs content doesn't overlap with sidebar @kuzhelov ([#1568](https://github.com/stardust-ui/react/pull/1568))

diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx
@@ -87,7 +87,7 @@ class Icon extends UIComponent<WithAsProp<IconProps>, any> {
 
     return (
       <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl })}
+        {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl, props: this.props })}
       </ElementType>
     )
   }

diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
@@ -9,7 +9,7 @@ import {
 } from '../../../types'
 import { IconProps } from '../../../../components/Icon/Icon'
 import { getStyle as getSvgStyle } from './svg'
-import { IconVariables, IconSizeModifier, iconColorAreas } from './iconVariables'
+import { IconVariables, iconColorAreas } from './iconVariables'
 
 const getPaddedStyle = (): ICSSInJSStyle => ({
   padding: pxToRem(4),
@@ -23,19 +23,17 @@ const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => {
   }
 }
 
-const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier, v: IconVariables): string => {
-  if (!sizeModifier) {
-    return v[`${size}Size`]
-  }
-
+const getIconSize = (size: SizeValue, v: IconVariables): string => {
   const modifiedSizes = {
     large: {
       x: 24,
       xx: 28,
     },
   }
 
-  return modifiedSizes[size] && pxToRem(modifiedSizes[size][sizeModifier])
+  return v.sizeModifier && modifiedSizes[size] && modifiedSizes[size][v.sizeModifier]
+    ? pxToRem(modifiedSizes[size][v.sizeModifier])
+    : v[`${size}Size`]
 }
 
 const getIconColor = (variables, colors: StrictColorScheme<ItemType<typeof iconColorAreas>>) => {
@@ -80,7 +78,7 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
 
   svg: ({ props: { size, color, disabled, rotate }, variables: v }): ICSSInJSStyle => {
     const colors = v.colorScheme[color]
-    const iconSizeInRems = getIconSize(size, v.sizeModifier, v)
+    const iconSizeInRems = getIconSize(size, v)
 
     return {
       display: 'block',

diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts
@@ -9,10 +9,10 @@ export const iconColorAreas = stringLiteralsArray('foreground')
 export type IconColorSchemeMapping = TeamsSchemeMappingWithAreas<ItemType<typeof iconColorAreas>>
 
 export interface IconVariables extends BaseIconVariables {
-  colorScheme?: IconColorSchemeMapping
-  brandColor?: string
+  colorScheme: IconColorSchemeMapping
+  brandColor: string
   secondaryColor: string
-  redColor?: string
+  redColor: string
 
   sizeModifier?: IconSizeModifier
 }

diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts
@@ -510,6 +510,7 @@ export type FontFaces = FontFace[]
 type SvgIconFuncArg = {
   classes: { [iconSlot: string]: string }
   rtl: boolean
+  props: IconProps
 }
 
 export type SvgIconSpec = ObjectOrFunc<React.ReactNode, SvgIconFuncArg>