From d438efdee76377f2c395ce869f57079c6fecc45f Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 19 Dec 2018 19:32:39 +0200 Subject: [PATCH 1/4] feat(icon): color prop --- .../Variations/IconExampleColor.shorthand.tsx | 20 ++++++++++- src/components/Icon/Icon.tsx | 4 ++- .../teams/components/Icon/iconStyles.ts | 24 +++++++------ .../teams/components/Icon/iconVariables.ts | 34 ++++++++++++------- 4 files changed, 57 insertions(+), 25 deletions(-) diff --git a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx index f23e0cf846..7147cab1a7 100644 --- a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { Icon, Grid, Text } from '@stardust-ui/react' +import * as _ from 'lodash' +import { Icon, Grid, Text, ProviderConsumer } from '@stardust-ui/react' const IconExampleColor = () => ( @@ -53,6 +54,23 @@ const IconExampleColor = () => ( variables={{ color: 'cornflowerblue', borderColor: 'orangered' }} /> + + USING THE color PROP: + + } + weight="bold" + /> +
+ + _.take(_.keys({ ...emphasisColors, ...naturalColors }), 3).map(color => ( + + )) + } + /> +
) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 9b614b71f8..0d78aedab7 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -6,6 +6,7 @@ import { createShorthandFactory, UIComponentProps, commonPropTypes, + ColorComponentProps, } from '../../lib' import { iconBehavior } from '../../lib/accessibility/' import { Accessibility } from '../../lib/accessibility/types' @@ -17,7 +18,7 @@ export type IconXSpacing = 'none' | 'before' | 'after' | 'both' export type IconSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest' -export interface IconProps extends UIComponentProps { +export interface IconProps extends UIComponentProps, ColorComponentProps { /** * Accessibility behavior if overriden by the user. * @default iconBehavior @@ -57,6 +58,7 @@ class Icon extends UIComponent, any> { ...commonPropTypes.createCommon({ children: false, content: false, + color: true, }), accessibility: PropTypes.func, bordered: PropTypes.bool, diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index ecd468d561..6b23b5d849 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -1,11 +1,14 @@ +import * as _ from 'lodash' + import fontAwesomeIcons from './fontAwesomeIconStyles' import { callable } from '../../../../lib' import { fittedStyle } from '../../../../styles/customCSS' import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types' import { ResultOf } from '../../../../../types/utils' -import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' +import { IconXSpacing, IconProps, IconSize } from '../../../../components/Icon/Icon' import { pxToRem } from '../../utils' import { getStyle as getSvgStyle } from './svg' +import { IconVariables, IconSizeModifier } from './iconVariables' const sizes = new Map([ ['smallest', 7], @@ -57,7 +60,7 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS } } -const getBorderedStyles = (circular, boxShadowColor): ICSSInJSStyle => { +const getBorderedStyles = (circular: boolean, boxShadowColor: string): ICSSInJSStyle => { return { ...getPaddedStyle(), @@ -70,7 +73,7 @@ const getPaddedStyle = (): ICSSInJSStyle => ({ padding: pxToRem(4), }) -const getIconSize = (size, sizeModifier): number => { +const getIconSize = (size: IconSize, sizeModifier: IconSizeModifier): number => { if (!sizeModifier) { return sizes.get(size) } @@ -84,11 +87,12 @@ const getIconSize = (size, sizeModifier): number => { return modifiedSizes[size] && modifiedSizes[size][sizeModifier] } -const getIconColor = color => color || 'currentColor' +const getIconColor = (colorProp: string, variables: IconVariables) => + _.get(variables.colors, colorProp, variables.color || 'currentColor') -const iconStyles: ComponentSlotStylesInput = { +const iconStyles: ComponentSlotStylesInput = { root: ({ - props: { disabled, name, size, bordered, circular, xSpacing }, + props: { disabled, name, size, bordered, circular, color, xSpacing }, variables: v, theme, }): ICSSInJSStyle => { @@ -105,7 +109,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)), ...(isFontBased && { - color: getIconColor(v.color), + color: getIconColor(color, v), ...(disabled && { color: v.disabledColor, @@ -115,7 +119,7 @@ const iconStyles: ComponentSlotStylesInput = { ...getXSpacingStyles(xSpacing, v.horizontalSpace), ...((bordered || v.borderColor || circular) && - getBorderedStyles(circular, v.borderColor || getIconColor(v.color))), + getBorderedStyles(circular, v.borderColor || getIconColor(color, v))), } }, @@ -137,14 +141,14 @@ const iconStyles: ComponentSlotStylesInput = { } }, - svg: ({ props: { size, disabled }, variables: v }): ICSSInJSStyle => { + svg: ({ props: { size, color, disabled }, variables: v }): ICSSInJSStyle => { const iconSizeInRems = pxToRem(getIconSize(size, v.sizeModifier)) return { display: 'block', width: iconSizeInRems, height: iconSizeInRems, - fill: getIconColor(v.color), + fill: getIconColor(color, v), ...(disabled && { fill: v.disabledColor, diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts index 154aa225ea..96968a312c 100644 --- a/src/themes/teams/components/Icon/iconVariables.ts +++ b/src/themes/teams/components/Icon/iconVariables.ts @@ -1,31 +1,39 @@ +import { ColorValues } from '../../../types' +import { mapColorsToScheme } from '../../../../lib' import { pxToRem } from '../../utils' -export interface IconVariables { - [key: string]: string | number | boolean | undefined - - redColor?: string - brandColor?: string +export type IconSizeModifier = 'x' | 'xx' - outline?: boolean +export interface IconVariables { + colors: ColorValues color?: string backgroundColor?: string borderColor?: string - horizontalSpace: string - margin: string + brandColor?: string secondaryColor: string + redColor?: string disabledColor: string + + outline?: boolean + horizontalSpace: string + margin: string + sizeModifier: IconSizeModifier } +const colorVariant = 500 + export default (siteVars): IconVariables => ({ - outline: undefined, + colors: mapColorsToScheme(siteVars, colorVariant), color: undefined, backgroundColor: undefined, borderColor: undefined, - horizontalSpace: pxToRem(10), - margin: `0 ${pxToRem(8)} 0 0`, + brandColor: siteVars.brandColor, secondaryColor: siteVars.white, + redColor: siteVars.red, disabledColor: siteVars.gray06, - redColor: siteVars.red, - brandColor: siteVars.brandColor, + outline: undefined, + horizontalSpace: pxToRem(10), + margin: `0 ${pxToRem(8)} 0 0`, + sizeModifier: undefined, }) From d3ac58381cc07882f41f31bfd0d458e719575fb3 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 19 Dec 2018 19:49:57 +0200 Subject: [PATCH 2/4] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bfc9d5e76..1e312ccd84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,6 +41,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Export `table-add` and `table-delete` SVG icon in Teams theme @VyshnaviDasari ([#643](https://github.com/stardust-ui/react/pull/643)) - Add handling of `Enter` and `Spacebar` in List component @ jurokapsiar ([#279](https://github.com/stardust-ui/react/pull/279)) - Enable RTL for keyboard handlers @sophieH29 ([#656](https://github.com/stardust-ui/react/pull/656)) +- Add `color` prop to `Icon` component @Bugaa92 ([#651](https://github.com/stardust-ui/react/pull/651)) ### Documentation - Add more accessibility descriptions to components and behaviors @jurokapsiar ([#648](https://github.com/stardust-ui/react/pull/648)) From 6b28f797e03dfb7cb69de808a912e5d9da451905 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Thu, 20 Dec 2018 15:41:00 +0200 Subject: [PATCH 3/4] addressed PR comments --- .../Variations/IconExampleColor.shorthand.tsx | 33 +++++-------------- .../teams/components/Icon/iconStyles.ts | 21 ++++++------ .../teams/components/Icon/iconVariables.ts | 7 ++-- 3 files changed, 23 insertions(+), 38 deletions(-) diff --git a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx index 7147cab1a7..4d35cec7de 100644 --- a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx @@ -16,27 +16,17 @@ const IconExampleColor = () => ( - - USING THE color VARIABLE: - - } - weight="bold" - /> + + USING THE color VARIABLE: +
- - USING THE borderColor VARIABLE: - - } - weight="bold" - /> + + USING THE borderColor VARIABLE: +
( variables={{ color: 'cornflowerblue', borderColor: 'orangered' }} />
- - USING THE color PROP: - - } - weight="bold" - /> + + USING THE color PROP: +
diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index 6b23b5d849..72c172ecc7 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -10,15 +10,15 @@ import { pxToRem } from '../../utils' import { getStyle as getSvgStyle } from './svg' import { IconVariables, IconSizeModifier } from './iconVariables' -const sizes = new Map([ - ['smallest', 7], - ['smaller', 10], - ['small', 12], - ['medium', 16], - ['large', 20], - ['larger', 32], - ['largest', 40], -]) +const sizes: { [key in IconSize]: number } = { + smallest: 7, + smaller: 10, + small: 12, + medium: 16, + large: 20, + larger: 32, + largest: 40, +} const getDefaultFontIcon = (iconName: string) => { return callable(fontAwesomeIcons(iconName).icon)() @@ -75,8 +75,9 @@ const getPaddedStyle = (): ICSSInJSStyle => ({ const getIconSize = (size: IconSize, sizeModifier: IconSizeModifier): number => { if (!sizeModifier) { - return sizes.get(size) + return sizes[size] } + const modifiedSizes = { large: { x: 24, diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts index 96968a312c..7fcf7aca45 100644 --- a/src/themes/teams/components/Icon/iconVariables.ts +++ b/src/themes/teams/components/Icon/iconVariables.ts @@ -14,10 +14,10 @@ export interface IconVariables { redColor?: string disabledColor: string - outline?: boolean horizontalSpace: string margin: string - sizeModifier: IconSizeModifier + outline?: boolean + sizeModifier?: IconSizeModifier } const colorVariant = 500 @@ -32,8 +32,7 @@ export default (siteVars): IconVariables => ({ redColor: siteVars.red, disabledColor: siteVars.gray06, - outline: undefined, horizontalSpace: pxToRem(10), margin: `0 ${pxToRem(8)} 0 0`, - sizeModifier: undefined, + outline: undefined, }) From bb5eb00e5e93a4a263e8706f1a7942334ecf7fa1 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Fri, 21 Dec 2018 13:56:24 +0200 Subject: [PATCH 4/4] addressed PR comments --- src/themes/teams/components/Icon/iconVariables.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts index 7fcf7aca45..34fc180f19 100644 --- a/src/themes/teams/components/Icon/iconVariables.ts +++ b/src/themes/teams/components/Icon/iconVariables.ts @@ -5,6 +5,8 @@ import { pxToRem } from '../../utils' export type IconSizeModifier = 'x' | 'xx' export interface IconVariables { + [key: string]: object | string | number | boolean | undefined + colors: ColorValues color?: string backgroundColor?: string