diff --git a/CHANGELOG.md b/CHANGELOG.md index bcc2312ec5..a997eaeb1b 100644 --- a/CHANGELOG.md +++ b/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 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' }} /> diff --git a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx index 395d07095f..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 778b7e9b5b..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 6321795ba9..0606a36210 100644 --- a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx +++ b/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 = () => ( ( - - {Object.keys(theme.icons).map(name => ( - - -
- {name} - - ))} - + <> +
+ +
+ + + {Object.keys(theme.icons).map(name => ( +
+ +
+ {name} +
+ ))} + +
+ +
+ +
+ + + {Object.keys(theme.icons).map(name => ( +
+ +
+ {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..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 = () => (
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index 12b0ec435d..ca67b9b457 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -61,7 +61,7 @@ class Status extends UIComponent, any> { {Icon.create(icon, { defaultProps: { - size: 'tiny', + size: 'micro', styles: styles.icon, variables: variables.icon, xSpacing: 'none', diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index 5238a2745d..0dbbd16ca7 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', 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): 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, 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 = { root: ({ props: { disabled, name, size, bordered, circular, xSpacing }, @@ -76,46 +83,64 @@ 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', ...(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'), diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts index 11132ed0f3..89cdf8ac8d 100644 --- a/src/themes/teams/components/Icon/iconVariables.ts +++ b/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, }) 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 }) => ( - - + + + + - - - -) 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 e4b84b13d2..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 c266dba22b..2bfe53af12 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 a823089780..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/callIncomingVideoOff.tsx b/src/themes/teams/components/Icon/svg/icons/callIncomingVideoOff.tsx index 59e9cbf9ae..db7f2f5ac0 100644 --- a/src/themes/teams/components/Icon/svg/icons/callIncomingVideoOff.tsx +++ b/src/themes/teams/components/Icon/svg/icons/callIncomingVideoOff.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/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/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/more.tsx b/src/themes/teams/components/Icon/svg/icons/more.tsx index 1b53b7481d..914741dea7 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 diff --git a/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx b/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx index 2dda5c54be..be51d0c3f2 100644 --- a/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx +++ b/src/themes/teams/components/Icon/svg/icons/teamCreate.tsx @@ -3,27 +3,23 @@ import { TeamsSvgIconSpec } from '../types' export default { icon: ({ classes }) => ( - - - + - - + /> ), - styles: { - svg: ({ variables: v }) => ({ - fill: v.color, - }), - }, + styles: {}, } as TeamsSvgIconSpec