From 9c98165974cbc10d4db89767911b6a64e332dfef Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 29 Oct 2018 11:23:26 -0700 Subject: [PATCH 01/16] showing filled & outline versions of icons --- .../Icon/Usage/IconSetExample.shorthand.tsx | 17 +++++++---- .../teams/components/Icon/iconStyles.ts | 18 +++++++++++ .../teams/components/Icon/iconVariables.ts | 6 +++- .../teams/components/Icon/svg/icons/more.tsx | 30 +++++++++++-------- 4 files changed, 52 insertions(+), 19 deletions(-) diff --git a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx index 6321795ba9..b2f18560b6 100644 --- a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx @@ -6,11 +6,18 @@ const IconSetExampleShorthand = () => ( render={theme => ( {Object.keys(theme.icons).map(name => ( - - -
- {name} - +
+
+ +
+ {name} +
+
+ +
+ {name} outline +
+
))} )} diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index 5238a2745d..5e1c740a9a 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -115,6 +115,24 @@ const iconStyles: ComponentSlotStylesInput = { } }, + outlinePart: ({ variables: v }): ICSSInJSStyle => { + return { + display: 'none', + + ...(v.outline && { + display: 'block', + }), + } + }, + + filledPart: ({ variables: v }): ICSSInJSStyle => { + return { + ...(v.outline && { + display: 'none', + }), + } + }, + svg: getSvgStyle('svg'), g: getSvgStyle('g'), diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts index 11132ed0f3..a598e6c126 100644 --- a/src/themes/teams/components/Icon/iconVariables.ts +++ b/src/themes/teams/components/Icon/iconVariables.ts @@ -1,7 +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 @@ -13,6 +15,8 @@ export interface IconVariables { } export default (siteVars): IconVariables => ({ + outline: undefined, + color: undefined, backgroundColor: undefined, borderColor: undefined, diff --git a/src/themes/teams/components/Icon/svg/icons/more.tsx b/src/themes/teams/components/Icon/svg/icons/more.tsx index 1b53b7481d..a7b6218d06 100644 --- a/src/themes/teams/components/Icon/svg/icons/more.tsx +++ b/src/themes/teams/components/Icon/svg/icons/more.tsx @@ -1,16 +1,20 @@ import * as React from 'react' import { TeamsSvgIconSpec } from '../types' -export default ( - - - - - - - - - - - -) as TeamsSvgIconSpec +export default { + icon: ({ classes }) => ( + + + + + + + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec From 5d82d22924cbaf5d92f68b39276270c4ead55625 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 30 Oct 2018 11:24:46 -0700 Subject: [PATCH 02/16] adding some new icons --- .../Icon/svg/icons/addParticipant.tsx | 18 +++++++++++++++++ .../components/Icon/svg/icons/analytics.tsx | 20 +++++++++++++++++++ .../teams/components/Icon/svg/icons/apps.tsx | 20 +++++++++++++++++++ .../components/Icon/svg/icons/checkmark.tsx | 20 +++++++++++++++++++ .../teams/components/Icon/svg/icons/plus.tsx | 20 +++++++++++++++++++ .../components/Icon/svg/icons/teamCreate.tsx | 2 +- 6 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/themes/teams/components/Icon/svg/icons/addParticipant.tsx create mode 100644 src/themes/teams/components/Icon/svg/icons/analytics.tsx create mode 100644 src/themes/teams/components/Icon/svg/icons/apps.tsx create mode 100644 src/themes/teams/components/Icon/svg/icons/checkmark.tsx create mode 100644 src/themes/teams/components/Icon/svg/icons/plus.tsx diff --git a/src/themes/teams/components/Icon/svg/icons/addParticipant.tsx b/src/themes/teams/components/Icon/svg/icons/addParticipant.tsx new file mode 100644 index 0000000000..72125e44e9 --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/addParticipant.tsx @@ -0,0 +1,18 @@ +import * as React from 'react' +import { TeamsSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/analytics.tsx b/src/themes/teams/components/Icon/svg/icons/analytics.tsx new file mode 100644 index 0000000000..8c89ff3519 --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/analytics.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import { TeamsSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/apps.tsx b/src/themes/teams/components/Icon/svg/icons/apps.tsx new file mode 100644 index 0000000000..390f5bec55 --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/apps.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import { TeamsSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/checkmark.tsx b/src/themes/teams/components/Icon/svg/icons/checkmark.tsx new file mode 100644 index 0000000000..3c06428fe9 --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/checkmark.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import { TeamsSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/plus.tsx b/src/themes/teams/components/Icon/svg/icons/plus.tsx new file mode 100644 index 0000000000..9e77621e31 --- /dev/null +++ b/src/themes/teams/components/Icon/svg/icons/plus.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import { TeamsSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx b/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx index 2dda5c54be..8d02745b61 100644 --- a/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx +++ b/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx @@ -3,7 +3,7 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - + + + + + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/call.tsx b/src/themes/teams/components/Icon/svg/icons/call.tsx index c6374f888d..fcd5da2e15 100644 --- a/src/themes/teams/components/Icon/svg/icons/call.tsx +++ b/src/themes/teams/components/Icon/svg/icons/call.tsx @@ -3,8 +3,8 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - + + + + + + + + diff --git a/src/themes/teams/components/Icon/svg/icons/fontColor.tsx b/src/themes/teams/components/Icon/svg/icons/fontColor.tsx index 93f202a87e..1f79e306a8 100644 --- a/src/themes/teams/components/Icon/svg/icons/fontColor.tsx +++ b/src/themes/teams/components/Icon/svg/icons/fontColor.tsx @@ -3,21 +3,16 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - - - + + + ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/fontSize.tsx b/src/themes/teams/components/Icon/svg/icons/fontSize.tsx index b47f344454..1cec67b00b 100644 --- a/src/themes/teams/components/Icon/svg/icons/fontSize.tsx +++ b/src/themes/teams/components/Icon/svg/icons/fontSize.tsx @@ -3,29 +3,16 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - - - + + + ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/format.tsx b/src/themes/teams/components/Icon/svg/icons/format.tsx index fae36ab921..79f60ef3f5 100644 --- a/src/themes/teams/components/Icon/svg/icons/format.tsx +++ b/src/themes/teams/components/Icon/svg/icons/format.tsx @@ -3,21 +3,16 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - + + ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/giphy.tsx b/src/themes/teams/components/Icon/svg/icons/giphy.tsx index 0039efaebc..aa051757ae 100644 --- a/src/themes/teams/components/Icon/svg/icons/giphy.tsx +++ b/src/themes/teams/components/Icon/svg/icons/giphy.tsx @@ -3,20 +3,15 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - + + + + + + + + ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/highlight.tsx b/src/themes/teams/components/Icon/svg/icons/highlight.tsx index ed9b8c963b..133bc4c6f5 100644 --- a/src/themes/teams/components/Icon/svg/icons/highlight.tsx +++ b/src/themes/teams/components/Icon/svg/icons/highlight.tsx @@ -3,21 +3,27 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - + + + + + ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts index 1aca8c2efc..2d254b3d11 100644 --- a/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/src/themes/teams/components/Icon/svg/icons/index.ts @@ -1,5 +1,12 @@ import { TeamsSvgIconSpec } from '../types' +import checkmark from './checkmark' +import plus from './plus' +import addParticipant from './addParticipant' +import analytics from './analytics' +import announcement from './announcement' +import apps from './apps' + import call from './call' import callEnd from './callEnd' import callVideo from './callIncomingVideo' @@ -19,6 +26,12 @@ import fontSize from './fontSize' import highlight from './highlight' export default { + checkmark, + plus, + addParticipant, + analytics, + announcement, + apps, call, 'call-end': callEnd, 'call-video': callVideo, From 631349a3f8d815a2ef602aed16764e4a974e8b61 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 5 Nov 2018 11:27:07 -0800 Subject: [PATCH 04/16] getting styles for Icon working with font icons & SVGs all lined up --- .../States/IconExampleDisabled.shorthand.tsx | 2 +- .../Icon/Types/IconExample.shorthand.tsx | 2 +- .../Icon/Usage/IconSetExample.shorthand.tsx | 28 +++--- .../IconExampleBordered.shorthand.tsx | 2 + .../IconExampleCircular.shorthand.tsx | 2 + .../Variations/IconExampleSize.shorthand.tsx | 23 ++++- .../Variations/IconExampleSpace.shorthand.tsx | 10 +-- .../teams/components/Icon/iconStyles.ts | 88 +++++++++++-------- .../teams/components/Icon/iconVariables.ts | 4 +- .../Icon/svg/icons/callControlPresentNew.tsx | 39 ++++---- .../icons/callControlStopPresentingNew.tsx | 41 +++++---- .../components/Icon/svg/icons/callEnd.tsx | 22 +++-- .../Icon/svg/icons/callIncomingVideo.tsx | 12 ++- .../teams/components/Icon/svg/icons/more.tsx | 2 +- 14 files changed, 161 insertions(+), 116 deletions(-) diff --git a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx index 395d07095f..d7b3275f0f 100644 --- a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx +++ b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx @@ -3,7 +3,7 @@ import { Icon } from '@stardust-ui/react' const IconExampleDisabled = () => (
- +
) diff --git a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx index 778b7e9b5b..6cce959b65 100644 --- a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx @@ -3,7 +3,7 @@ import { Icon } from '@stardust-ui/react' const IconExample = () => (
- + diff --git a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx index b2f18560b6..421dd78506 100644 --- a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx @@ -1,22 +1,26 @@ import React from 'react' import { Grid, Icon, Provider } from '@stardust-ui/react' +const cellStyles = { + margin: '10px 0', +} + const IconSetExampleShorthand = () => ( ( - + + {Object.keys(theme.icons).map(name => ( +
+ +
+ {name} +
+ ))} {Object.keys(theme.icons).map(name => ( -
-
- -
- {name} -
-
- -
- {name} outline -
+
+ +
+ {name} outline
))} diff --git a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx index 223630f07b..72dd8046c5 100644 --- a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx +++ b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx @@ -7,6 +7,8 @@ const IconExampleBordered = () => ( + + diff --git a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx index b6e8320ba9..063920ca11 100644 --- a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx +++ b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx @@ -7,6 +7,8 @@ const IconExampleCircular = () => ( + + diff --git a/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx index 592f99fad8..7d02a4ca25 100644 --- a/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx +++ b/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 = () => ( -
+ + + + + + + + + + + + + + + + + -
+ + ) export default IconExampleSize diff --git a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx index 16060132f2..9a92c21f6c 100644 --- a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx +++ b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx @@ -5,27 +5,27 @@ const IconExampleSpace = () => (
diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index 5e1c740a9a..36d659ee94 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/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', 8], + ['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): ICSSInJSStyle => { +const getFontStyles = ( + size: string, + iconName: string, + themeIcon?: ResultOf, +): 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, borderColor, color): ICSSInJSStyle => { return { - ...getPaddedStyle(isFontBased), + ...getPaddedStyle(), - boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`, + boxShadow: `0 0 0 .05rem ${borderColor || color || 'black'} 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 = { root: ({ props: { disabled, name, size, bordered, circular, xSpacing }, @@ -76,42 +83,32 @@ const iconStyles: ComponentSlotStylesInput = { }): 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', + padding: '0', + + background: 'cadetblue', ...(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)), } }, @@ -133,7 +130,20 @@ const iconStyles: ComponentSlotStylesInput = { } }, - 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'), diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts index a598e6c126..89cdf8ac8d 100644 --- a/src/themes/teams/components/Icon/iconVariables.ts +++ b/src/themes/teams/components/Icon/iconVariables.ts @@ -4,7 +4,6 @@ export interface IconVariables { [key: string]: string | number | boolean | undefined outline?: boolean - color?: string backgroundColor?: string borderColor?: string @@ -16,12 +15,11 @@ 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, }) diff --git a/src/themes/teams/components/Icon/svg/icons/callControlPresentNew.tsx b/src/themes/teams/components/Icon/svg/icons/callControlPresentNew.tsx index e0f1a0210f..8c318633a2 100644 --- a/src/themes/teams/components/Icon/svg/icons/callControlPresentNew.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callControlPresentNew.tsx @@ -1,20 +1,25 @@ import * as React from 'react' import { TeamsSvgIconSpec } from '../types' -export default ( - - - - -) as TeamsSvgIconSpec +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/callControlStopPresentingNew.tsx b/src/themes/teams/components/Icon/svg/icons/callControlStopPresentingNew.tsx index 5863c76aa8..e7cbaa97df 100644 --- a/src/themes/teams/components/Icon/svg/icons/callControlStopPresentingNew.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callControlStopPresentingNew.tsx @@ -1,21 +1,26 @@ import * as React from 'react' import { TeamsSvgIconSpec } from '../types' -export default ( - - - - -) as TeamsSvgIconSpec +export default { + icon: ({ classes }) => ( + + + + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/callEnd.tsx b/src/themes/teams/components/Icon/svg/icons/callEnd.tsx index 7920e38c39..c0466018f4 100644 --- a/src/themes/teams/components/Icon/svg/icons/callEnd.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callEnd.tsx @@ -1,12 +1,16 @@ import * as React from 'react' import { TeamsSvgIconSpec } from '../types' -export default ( - - - -) as TeamsSvgIconSpec +export default { + icon: ({ classes }) => ( + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/callIncomingVideo.tsx b/src/themes/teams/components/Icon/svg/icons/callIncomingVideo.tsx index 071762edb5..de451974f2 100644 --- a/src/themes/teams/components/Icon/svg/icons/callIncomingVideo.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callIncomingVideo.tsx @@ -3,18 +3,16 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - + + + + ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/more.tsx b/src/themes/teams/components/Icon/svg/icons/more.tsx index a7b6218d06..914741dea7 100644 --- a/src/themes/teams/components/Icon/svg/icons/more.tsx +++ b/src/themes/teams/components/Icon/svg/icons/more.tsx @@ -3,7 +3,7 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - + From 29bee04e30b57e225d2b8b0812c7a3516ce9c923 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 5 Nov 2018 11:29:36 -0800 Subject: [PATCH 05/16] removing debug background --- src/themes/teams/components/Icon/iconStyles.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index 36d659ee94..6190e41cd9 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -90,9 +90,6 @@ const iconStyles: ComponentSlotStylesInput = { margin: v.margin, speak: 'none', verticalAlign: 'middle', - padding: '0', - - background: 'cadetblue', ...(isFontBased && getFontStyles(size, name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())), From dd7b5cc8bfab806d8d2d37532dd7dd67edaf8a72 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 6 Nov 2018 09:44:15 -0800 Subject: [PATCH 06/16] remove size='big' from examples --- .../Icon/States/IconExampleDisabled.shorthand.tsx | 2 +- .../components/Icon/Types/IconExample.shorthand.tsx | 8 ++++---- .../components/Icon/Usage/IconSetExample.shorthand.tsx | 6 +++--- .../Icon/Variations/IconExampleSpace.shorthand.tsx | 10 +++++----- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx index d7b3275f0f..0200e07f74 100644 --- a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx +++ b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx @@ -3,7 +3,7 @@ import { Icon } from '@stardust-ui/react' const IconExampleDisabled = () => (
- +
) diff --git a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx index 6cce959b65..2c4ed1d805 100644 --- a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx @@ -3,10 +3,10 @@ import { Icon } from '@stardust-ui/react' const IconExample = () => (
- - - - + + + +
) diff --git a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx index 421dd78506..06d5569106 100644 --- a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx @@ -8,17 +8,17 @@ const cellStyles = { const IconSetExampleShorthand = () => ( ( - + {Object.keys(theme.icons).map(name => (
- +
{name}
))} {Object.keys(theme.icons).map(name => (
- +
{name} outline
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx index 9a92c21f6c..9fa6236987 100644 --- a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx +++ b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx @@ -5,27 +5,27 @@ const IconExampleSpace = () => (
From 6b8539ee0adac932307cca5da36561f5a0029423 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 6 Nov 2018 11:38:18 -0800 Subject: [PATCH 07/16] add fallback for boxShadow if no color is supplied --- src/themes/teams/components/Icon/iconStyles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index 6190e41cd9..aaff56f8be 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -58,11 +58,11 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS } } -const getBorderedStyles = (circular, borderColor, color): ICSSInJSStyle => { +const getBorderedStyles = (circular, borderColor, color, boxShadowFallbackColor): ICSSInJSStyle => { return { ...getPaddedStyle(), - boxShadow: `0 0 0 .05rem ${borderColor || color || 'black'} inset`, + boxShadow: `0 0 0 .05rem ${borderColor || color || boxShadowFallbackColor} inset`, ...(circular ? { borderRadius: '50%' } : {}), } } @@ -105,7 +105,7 @@ const iconStyles: ComponentSlotStylesInput = { ...getXSpacingStyles(xSpacing, v.horizontalSpace), ...((bordered || v.borderColor || circular) && - getBorderedStyles(circular, v.borderColor, v.color)), + getBorderedStyles(circular, v.borderColor, v.color, theme.siteVariables.bodyColor)), } }, From 7c3b946f2bc21d400fe7f0372aed1035ea21a603 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 6 Nov 2018 12:36:14 -0800 Subject: [PATCH 08/16] fixed a bunch of icons to use correct filled/outline props --- .../components/Icon/svg/icons/callEnd.tsx | 2 +- .../Icon/svg/icons/callIncomingVideoOff.tsx | 18 +++-- .../Icon/svg/icons/callMicrophone.tsx | 76 ++++++++++--------- .../Icon/svg/icons/callMicrophoneOff.tsx | 18 +++-- .../components/Icon/svg/icons/teamCreate.tsx | 22 +++--- 5 files changed, 72 insertions(+), 64 deletions(-) diff --git a/src/themes/teams/components/Icon/svg/icons/callEnd.tsx b/src/themes/teams/components/Icon/svg/icons/callEnd.tsx index c0466018f4..2bfe53af12 100644 --- a/src/themes/teams/components/Icon/svg/icons/callEnd.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callEnd.tsx @@ -5,7 +5,7 @@ export default { icon: ({ classes }) => ( - + - -) as TeamsSvgIconSpec + /> + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/callMicrophone.tsx b/src/themes/teams/components/Icon/svg/icons/callMicrophone.tsx index 0647f2f9ef..aa4ac9870d 100644 --- a/src/themes/teams/components/Icon/svg/icons/callMicrophone.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callMicrophone.tsx @@ -1,39 +1,43 @@ import * as React from 'react' import { TeamsSvgIconSpec } from '../types' -export default ( - - - -) as TeamsSvgIconSpec +export default { + icon: ({ classes }) => ( + + + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/callMicrophoneOff.tsx b/src/themes/teams/components/Icon/svg/icons/callMicrophoneOff.tsx index 9bffeb36a1..5e2b24b7cd 100644 --- a/src/themes/teams/components/Icon/svg/icons/callMicrophoneOff.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callMicrophoneOff.tsx @@ -1,10 +1,12 @@ import * as React from 'react' import { TeamsSvgIconSpec } from '../types' -export default ( - - + - -) as TeamsSvgIconSpec + /> + + ), + styles: {}, +} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx b/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx index 8d02745b61..be51d0c3f2 100644 --- a/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx +++ b/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx @@ -4,26 +4,22 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - - - + /> ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec From b15ead26d7659ed2e6d331bf0e7f6dbe042cfdb0 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 6 Nov 2018 14:16:19 -0800 Subject: [PATCH 09/16] removing icons i added earlier. will add as needed --- .../Icon/svg/icons/addParticipant.tsx | 18 ----------------- .../components/Icon/svg/icons/analytics.tsx | 20 ------------------- .../Icon/svg/icons/announcement.tsx | 18 ----------------- .../teams/components/Icon/svg/icons/apps.tsx | 20 ------------------- .../components/Icon/svg/icons/checkmark.tsx | 20 ------------------- .../teams/components/Icon/svg/icons/index.ts | 13 ------------ .../teams/components/Icon/svg/icons/plus.tsx | 20 ------------------- 7 files changed, 129 deletions(-) delete mode 100644 src/themes/teams/components/Icon/svg/icons/addParticipant.tsx delete mode 100644 src/themes/teams/components/Icon/svg/icons/analytics.tsx delete mode 100644 src/themes/teams/components/Icon/svg/icons/announcement.tsx delete mode 100644 src/themes/teams/components/Icon/svg/icons/apps.tsx delete mode 100644 src/themes/teams/components/Icon/svg/icons/checkmark.tsx delete mode 100644 src/themes/teams/components/Icon/svg/icons/plus.tsx diff --git a/src/themes/teams/components/Icon/svg/icons/addParticipant.tsx b/src/themes/teams/components/Icon/svg/icons/addParticipant.tsx deleted file mode 100644 index 72125e44e9..0000000000 --- a/src/themes/teams/components/Icon/svg/icons/addParticipant.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react' -import { TeamsSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - - ), - styles: {}, -} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/analytics.tsx b/src/themes/teams/components/Icon/svg/icons/analytics.tsx deleted file mode 100644 index 8c89ff3519..0000000000 --- a/src/themes/teams/components/Icon/svg/icons/analytics.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react' -import { TeamsSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - - - - ), - styles: {}, -} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/announcement.tsx b/src/themes/teams/components/Icon/svg/icons/announcement.tsx deleted file mode 100644 index 5c6df8b26d..0000000000 --- a/src/themes/teams/components/Icon/svg/icons/announcement.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react' -import { TeamsSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - - - - - - - - ), - styles: {}, -} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/apps.tsx b/src/themes/teams/components/Icon/svg/icons/apps.tsx deleted file mode 100644 index 390f5bec55..0000000000 --- a/src/themes/teams/components/Icon/svg/icons/apps.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react' -import { TeamsSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - - - - ), - styles: {}, -} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/checkmark.tsx b/src/themes/teams/components/Icon/svg/icons/checkmark.tsx deleted file mode 100644 index 3c06428fe9..0000000000 --- a/src/themes/teams/components/Icon/svg/icons/checkmark.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react' -import { TeamsSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - - - - ), - styles: {}, -} as TeamsSvgIconSpec diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts index 2d254b3d11..1aca8c2efc 100644 --- a/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/src/themes/teams/components/Icon/svg/icons/index.ts @@ -1,12 +1,5 @@ import { TeamsSvgIconSpec } from '../types' -import checkmark from './checkmark' -import plus from './plus' -import addParticipant from './addParticipant' -import analytics from './analytics' -import announcement from './announcement' -import apps from './apps' - import call from './call' import callEnd from './callEnd' import callVideo from './callIncomingVideo' @@ -26,12 +19,6 @@ import fontSize from './fontSize' import highlight from './highlight' export default { - checkmark, - plus, - addParticipant, - analytics, - announcement, - apps, call, 'call-end': callEnd, 'call-video': callVideo, diff --git a/src/themes/teams/components/Icon/svg/icons/plus.tsx b/src/themes/teams/components/Icon/svg/icons/plus.tsx deleted file mode 100644 index 9e77621e31..0000000000 --- a/src/themes/teams/components/Icon/svg/icons/plus.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react' -import { TeamsSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - - - - ), - styles: {}, -} as TeamsSvgIconSpec From c415471a19a0f2ae6977f9cee741936d9c28fd11 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 7 Nov 2018 10:30:56 -0800 Subject: [PATCH 10/16] fixining size of status in avatar --- src/components/Status/Status.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index f54dcb36b3..34f59bd5e9 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -75,7 +75,7 @@ class Status extends UIComponent, any> { {Icon.create(icon, { defaultProps: { - size: 'tiny', + size: 'micro', styles: styles.icon, variables: variables.icon, xSpacing: 'none', From 2fb58dd817e7a6058088d54bdf3f221fd6d2bffc Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 7 Nov 2018 14:36:17 -0800 Subject: [PATCH 11/16] fixing weird icon issue because grid item being applied to icon --- .../Popup/Types/PopupCustomTargetExample.shorthand.tsx | 6 +++++- .../components/Popup/Types/PopupCustomTargetExample.tsx | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx index 7aaaa0144e..81c356a261 100644 --- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx +++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx @@ -16,7 +16,11 @@ class PopupExample extends React.Component { {/* CUSTOM DOM ELEMENT is used as target for Popup */} } + trigger={ +
+ +
+ } content="well, yes, I am just a garbish text ¯\_(ツ)_/¯" position="below" /> diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx index 565f3cb31d..0d03f0fea8 100644 --- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx +++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx @@ -19,7 +19,9 @@ class PopupExample extends React.Component { content="well, yes, I am just a garbish text ¯\_(ツ)_/¯" position="below" > - +
+ +
From 970ce597d0d104cd3d4827b58d01afe0d26c0ae4 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 9 Nov 2018 15:23:27 -0800 Subject: [PATCH 12/16] updating signature for getBorderedStyles --- src/themes/teams/components/Icon/iconStyles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index aaff56f8be..a8a7f84b68 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -58,11 +58,11 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS } } -const getBorderedStyles = (circular, borderColor, color, boxShadowFallbackColor): ICSSInJSStyle => { +const getBorderedStyles = (circular, boxShadowColor): ICSSInJSStyle => { return { ...getPaddedStyle(), - boxShadow: `0 0 0 .05rem ${borderColor || color || boxShadowFallbackColor} inset`, + boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`, ...(circular ? { borderRadius: '50%' } : {}), } } @@ -105,7 +105,7 @@ const iconStyles: ComponentSlotStylesInput = { ...getXSpacingStyles(xSpacing, v.horizontalSpace), ...((bordered || v.borderColor || circular) && - getBorderedStyles(circular, v.borderColor, v.color, theme.siteVariables.bodyColor)), + getBorderedStyles(circular, v.borderColor || v.color || theme.siteVariables.bodyColor)), } }, From ba4821419275d7e6ff9ff25a1afe2b2539040d91 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 9 Nov 2018 15:37:30 -0800 Subject: [PATCH 13/16] separating out the filled / outline icon versions in the icon set example --- .../Icon/Usage/IconSetExample.shorthand.tsx | 49 ++++++++++++------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx index 06d5569106..0606a36210 100644 --- a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx @@ -1,5 +1,5 @@ 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', @@ -8,22 +8,37 @@ const cellStyles = { const IconSetExampleShorthand = () => ( ( - - {Object.keys(theme.icons).map(name => ( -
- -
- {name} -
- ))} - {Object.keys(theme.icons).map(name => ( -
- -
- {name} outline -
- ))} - + <> +
+ +
+ + + {Object.keys(theme.icons).map(name => ( +
+ +
+ {name} +
+ ))} + +
+ +
+ +
+ + + {Object.keys(theme.icons).map(name => ( +
+ +
+ {name} outline +
+ ))} + +
+ )} /> ) From bbf21c3e93113e95a88233e1d12db5c58b3e5bb1 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 9 Nov 2018 15:53:32 -0800 Subject: [PATCH 14/16] add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f4525d439..0c79f3fd6e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix focus behavior for `List` @kuzhelov ([#413](https://github.com/stardust-ui/react/pull/413)) - 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)) +- Fix Teams Icons styles to match spec @codepretty ([#441](https://github.com/stardust-ui/react/pull/441)) ### Features - Make `Grid` keyboard navigable by implementing `gridBehavior` @sophieH29 ([#398](https://github.com/stardust-ui/react/pull/398)) From cd2df14adce3a1320e2f07f83356488209f3217b Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 14 Nov 2018 11:39:05 -0800 Subject: [PATCH 15/16] fix ui where image customizations using icon for avatar was incorrect --- .../Variations/AvatarExampleImageCustomization.shorthand.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx index ed306ddec7..b1d623574f 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx @@ -10,7 +10,7 @@ const AvatarExampleImageCustomizationShorthand = () => (   ( - + )} status={{ color: 'green', icon: 'check', title: 'Available' }} /> From ec674111cee657a619f13cc2ad5e538ea14c6e1a Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 14 Nov 2018 12:13:01 -0800 Subject: [PATCH 16/16] keeping status as close to what it is now until for now --- src/themes/teams/components/Icon/iconStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index a8a7f84b68..0dbbd16ca7 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -8,7 +8,7 @@ import { pxToRem } from './../../../../lib' import { getStyle as getSvgStyle } from './svg' const sizes = new Map([ - ['micro', 8], + ['micro', 7], ['mini', 10], ['tiny', 12], ['small', 14],