From 87ae826a8e1f184a0feb9ac549bf766d371b0f09 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 11 Dec 2018 17:21:59 +0100 Subject: [PATCH 1/5] feat(text): color prop --- .../Variations/TextExampleColor.shorthand.tsx | 18 +++++++++++ .../Text/Variations/TextExampleColor.tsx | 20 ++++++++++++ .../components/Text/Variations/index.tsx | 5 +++ src/components/Text/Text.tsx | 9 ++++-- src/lib/colorUtils.ts | 11 +++++++ src/lib/index.ts | 1 + .../teams/components/Divider/dividerStyles.ts | 31 +++++++------------ .../components/Divider/dividerVariables.ts | 12 ++++--- .../teams/components/Text/textStyles.ts | 4 +++ .../teams/components/Text/textVariables.ts | 7 +++++ src/themes/types.ts | 10 ++++++ 11 files changed, 101 insertions(+), 27 deletions(-) create mode 100644 docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx create mode 100644 docs/src/examples/components/Text/Variations/TextExampleColor.tsx create mode 100644 src/lib/colorUtils.ts diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx new file mode 100644 index 0000000000..7997c1b1e0 --- /dev/null +++ b/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import _ from 'lodash' +import { Text, ProviderConsumer } from '@stardust-ui/react' + +const TextExampleColor = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( + <> + +
+ + )) + } + /> +) + +export default TextExampleColor diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.tsx new file mode 100644 index 0000000000..79b78d5ae2 --- /dev/null +++ b/docs/src/examples/components/Text/Variations/TextExampleColor.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import _ from 'lodash' +import { Text, ProviderConsumer } from '@stardust-ui/react' + +const TextExampleColor = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( + <> + + {_.startCase(color)} + +
+ + )) + } + /> +) + +export default TextExampleColor diff --git a/docs/src/examples/components/Text/Variations/index.tsx b/docs/src/examples/components/Text/Variations/index.tsx index b2721770bf..73d9b34082 100644 --- a/docs/src/examples/components/Text/Variations/index.tsx +++ b/docs/src/examples/components/Text/Variations/index.tsx @@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' const Variations = () => ( + , any> { static displayName = 'Text' static propTypes = { - ...commonPropTypes.createCommon(), + ...commonPropTypes.createCommon({ color: true }), atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]), disabled: PropTypes.bool, error: PropTypes.bool, diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts new file mode 100644 index 0000000000..fa72aa1a9d --- /dev/null +++ b/src/lib/colorUtils.ts @@ -0,0 +1,11 @@ +import * as _ from 'lodash' +import { SiteVariablesInput, ColorVariants, ColorValues } from '../themes/types' + +export const mapColorsToScheme = ( + siteVars: SiteVariablesInput, + mapper: string | number | keyof ColorVariants | ((color: ColorVariants) => T), +): ColorValues => + _.mapValues( + { ...siteVars.emphasisColors, ...siteVars.naturalColors }, + typeof mapper === 'number' ? String(mapper) : (mapper as any), + ) as ColorValues diff --git a/src/lib/index.ts b/src/lib/index.ts index 4415498664..7ad00ecc6e 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -3,6 +3,7 @@ import * as commonPropTypes from './commonPropTypes' export { default as AutoControlledComponent } from './AutoControlledComponent' export { default as childrenExist } from './childrenExist' +export { mapColorsToScheme } from './colorUtils' export { default as UIComponent } from './UIComponent' export { EventStack } from './eventStack' export { felaRenderer, felaRtlRenderer } from './felaRenderer' diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index b912214933..4422106056 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -2,37 +2,28 @@ import * as _ from 'lodash' import { childrenExist } from '../../../../lib' import { pxToRem } from '../../utils' -import { ComponentSlotStylesInput, ICSSInJSStyle, ICSSPseudoElementStyle } from '../../../types' +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider' +import { DividerVariables } from './dividerVariables' -const dividerBorderStyle = (size, color): ICSSInJSStyle => ({ - height: `${size + 1}px`, - background: color, -}) - -const beforeAndAfter = (color, size, type, variables): ICSSPseudoElementStyle => ({ +const beforeAndAfter = (color, size, variables: DividerVariables): ICSSInJSStyle => ({ content: '""', flex: 1, - ...dividerBorderStyle(size, variables.dividerColor), - ...(color && { - ...dividerBorderStyle(size, _.get(variables.colors, color)), - }), + height: `${size + 1}px`, + background: color ? _.get(variables.colors, color) : variables.dividerColor, }) -const dividerStyles: ComponentSlotStylesInput = { +const dividerStyles: ComponentSlotStylesInput = { root: ({ props, variables }): ICSSInJSStyle => { - const { children, color, fitted, size, type, important, content } = props + const { children, color, fitted, size, important, content } = props return { - color: variables.textColor, + color: color ? _.get(variables.colors, color) : variables.textColor, display: 'flex', alignItems: 'center', ...(!fitted && { paddingTop: variables.dividerPadding, paddingBottom: variables.dividerPadding, }), - ...(color && { - color: _.get(variables.colors, color), - }), ...(important && { fontWeight: variables.importantFontWeight, }), @@ -42,17 +33,17 @@ const dividerStyles: ComponentSlotStylesInput = { fontSize: pxToRem(12 + size), lineHeight: variables.textLineHeight, '::before': { - ...beforeAndAfter(color, size, type, variables), + ...beforeAndAfter(color, size, variables), marginRight: pxToRem(20), }, '::after': { - ...beforeAndAfter(color, size, type, variables), + ...beforeAndAfter(color, size, variables), marginLeft: pxToRem(20), }, } : { '::before': { - ...beforeAndAfter(color, size, type, variables), + ...beforeAndAfter(color, size, variables), }, }), } diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index 915a1a6907..108f339cbe 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -1,15 +1,17 @@ import * as _ from 'lodash' -import { pxToRem } from '../../utils' +import { FontWeightProperty } from 'csstype' -import { EmphasisColors, NaturalColors } from '../../../types' +import { pxToRem } from '../../utils' +import { ColorValues } from '../../../types' +import { mapColorsToScheme } from '../../../../lib' export interface DividerVariables { - colors: Record + colors: ColorValues dividerColor: string textColor: string textFontSize: string textLineHeight: string - importantFontWeight: string + importantFontWeight: FontWeightProperty dividerPadding: string } @@ -17,7 +19,7 @@ export default (siteVars: any): DividerVariables => { const colorVariant = '500' return { - colors: _.mapValues({ ...siteVars.emphasisColors, ...siteVars.naturalColors }, colorVariant), + colors: mapColorsToScheme(siteVars, colorVariant), dividerColor: siteVars.gray09, textColor: siteVars.gray03, textFontSize: siteVars.fontSizeSmall, diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index 24861465a2..a1fbdda2b1 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/src/themes/teams/components/Text/textStyles.ts @@ -1,3 +1,5 @@ +import * as _ from 'lodash' + import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' import { truncateStyle } from '../../../../styles/customCSS' import { TextVariables } from './textVariables' @@ -7,6 +9,7 @@ export default { root: ({ props: { atMention, + color, disabled, error, size, @@ -21,6 +24,7 @@ export default { }: ComponentStyleFunctionParam): ICSSInJSStyle => { return { display: 'inline-block', + ...(color && { color: _.get(v.colors, color) }), ...(truncated && truncateStyle), ...(atMention === true && { color: v.atMentionOtherColor, diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts index 6330b4b256..9f3f95bc77 100644 --- a/src/themes/teams/components/Text/textVariables.ts +++ b/src/themes/teams/components/Text/textVariables.ts @@ -1,4 +1,8 @@ +import { ColorValues } from '../../../types' +import { mapColorsToScheme } from '../../../../lib' + export interface TextVariables { + colors: ColorValues atMentionMeColor: string atMentionMeFontWeight: number atMentionOtherColor: string @@ -29,7 +33,10 @@ export interface TextVariables { } export default (siteVariables): TextVariables => { + const colorVariant = '500' + return { + colors: mapColorsToScheme(siteVariables, colorVariant), atMentionOtherColor: siteVariables.brand06, atMentionMeColor: siteVariables.orange04, atMentionMeFontWeight: siteVariables.fontWeightBold, diff --git a/src/themes/types.ts b/src/themes/types.ts index 076b84951f..92c303272e 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -71,6 +71,16 @@ type EmphasisColorsStrict = Partial<{ export type EmphasisColors = Extendable +/** + * A type for extracting the color names. + */ +type ColorNames = keyof (EmphasisColorsStrict & NaturalColorsStrict) + +/** + * A type for extracting the color names and values. + */ +export type ColorValues = Partial> + /** * A type for a base colors. */ From 4ebc21ab12a750aa33c87b54381cfa97b2d08451 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 12 Dec 2018 19:54:17 +0100 Subject: [PATCH 2/5] addressed comments --- src/lib/colorUtils.ts | 2 +- src/themes/teams/components/Divider/dividerStyles.ts | 10 +++++++--- .../teams/components/Divider/dividerVariables.ts | 2 +- src/themes/teams/components/Text/textStyles.ts | 2 +- src/themes/teams/components/Text/textVariables.ts | 2 +- src/themes/types.ts | 4 ++-- 6 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts index fa72aa1a9d..471b27aa54 100644 --- a/src/lib/colorUtils.ts +++ b/src/lib/colorUtils.ts @@ -3,7 +3,7 @@ import { SiteVariablesInput, ColorVariants, ColorValues } from '../themes/types' export const mapColorsToScheme = ( siteVars: SiteVariablesInput, - mapper: string | number | keyof ColorVariants | ((color: ColorVariants) => T), + mapper: keyof ColorVariants | ((color: ColorVariants) => T), ): ColorValues => _.mapValues( { ...siteVars.emphasisColors, ...siteVars.naturalColors }, diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 4422106056..6cfc94488b 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -6,18 +6,22 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider' import { DividerVariables } from './dividerVariables' -const beforeAndAfter = (color, size, variables: DividerVariables): ICSSInJSStyle => ({ +const beforeAndAfter = ( + color: string, + size: number, + variables: DividerVariables, +): ICSSInJSStyle => ({ content: '""', flex: 1, height: `${size + 1}px`, - background: color ? _.get(variables.colors, color) : variables.dividerColor, + background: _.get(variables.colors, color, variables.dividerColor), }) const dividerStyles: ComponentSlotStylesInput = { root: ({ props, variables }): ICSSInJSStyle => { const { children, color, fitted, size, important, content } = props return { - color: color ? _.get(variables.colors, color) : variables.textColor, + color: _.get(variables.colors, color, variables.textColor), display: 'flex', alignItems: 'center', ...(!fitted && { diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index 108f339cbe..ad11315098 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -16,7 +16,7 @@ export interface DividerVariables { } export default (siteVars: any): DividerVariables => { - const colorVariant = '500' + const colorVariant = 500 return { colors: mapColorsToScheme(siteVars, colorVariant), diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index a1fbdda2b1..5e6d8097e3 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/src/themes/teams/components/Text/textStyles.ts @@ -24,7 +24,7 @@ export default { }: ComponentStyleFunctionParam): ICSSInJSStyle => { return { display: 'inline-block', - ...(color && { color: _.get(v.colors, color) }), + color: _.get(v.colors, color), ...(truncated && truncateStyle), ...(atMention === true && { color: v.atMentionOtherColor, diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts index 9f3f95bc77..75292294de 100644 --- a/src/themes/teams/components/Text/textVariables.ts +++ b/src/themes/teams/components/Text/textVariables.ts @@ -33,7 +33,7 @@ export interface TextVariables { } export default (siteVariables): TextVariables => { - const colorVariant = '500' + const colorVariant = 500 return { colors: mapColorsToScheme(siteVariables, colorVariant), diff --git a/src/themes/types.ts b/src/themes/types.ts index 92c303272e..646d876224 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -77,9 +77,9 @@ export type EmphasisColors = Extendable type ColorNames = keyof (EmphasisColorsStrict & NaturalColorsStrict) /** - * A type for extracting the color names and values. + * A type for an extendable set of ColorNames properties of type T */ -export type ColorValues = Partial> +export type ColorValues = Extendable>, T> /** * A type for a base colors. From ff550725968970c1fd4ea326f8c87ad5e4e5e1ea Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Thu, 13 Dec 2018 09:37:55 +0100 Subject: [PATCH 3/5] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6140d7bc1c..59079bf4b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,6 +54,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Export `canvas-add-page` SVG icon @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601)) - Add `sizeModifier` variable (with `x` and `xx` values) to `Icon`'s Teams theme styles @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601)) - Add `offset` prop to `Popup` to extend set of popup positioning options @kuzhelov ([#606](https://github.com/stardust-ui/react/pull/606)) +- Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597)) ### Documentation - Add `prettier` support throughout the docs @levithomason ([#568](https://github.com/stardust-ui/react/pull/568)) From d254ddb850af87bc05d69ef949fa7570e1c14a9f Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Mon, 17 Dec 2018 16:03:55 +0200 Subject: [PATCH 4/5] amended changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 59079bf4b4..e2293b5161 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Features +- Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597)) + ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17) [Compare changes](https://github.com/stardust-ui/react/compare/v0.14.0...v0.15.0) @@ -54,7 +57,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Export `canvas-add-page` SVG icon @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601)) - Add `sizeModifier` variable (with `x` and `xx` values) to `Icon`'s Teams theme styles @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601)) - Add `offset` prop to `Popup` to extend set of popup positioning options @kuzhelov ([#606](https://github.com/stardust-ui/react/pull/606)) -- Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597)) ### Documentation - Add `prettier` support throughout the docs @levithomason ([#568](https://github.com/stardust-ui/react/pull/568)) From 6633f11f5a40d3e075e368ed6ad020f8f10f395a Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 13:52:00 +0200 Subject: [PATCH 5/5] made text color override other props that change color --- src/themes/teams/colors.ts | 1 - src/themes/teams/components/Text/textStyles.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts index ab7bec2375..d342ea9d54 100644 --- a/src/themes/teams/colors.ts +++ b/src/themes/teams/colors.ts @@ -88,7 +88,6 @@ export const naturalColors: NaturalColors = { 800: '#F9D844', 900: '#F8D22A', }, - darkOrange: { 50: '#F9ECEA', 100: '#ECBCB3', diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index 5e6d8097e3..4c1ac02d67 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/src/themes/teams/components/Text/textStyles.ts @@ -24,7 +24,6 @@ export default { }: ComponentStyleFunctionParam): ICSSInJSStyle => { return { display: 'inline-block', - color: _.get(v.colors, color), ...(truncated && truncateStyle), ...(atMention === true && { color: v.atMentionOtherColor, @@ -47,6 +46,7 @@ export default { fontWeight: v.importantWeight, color: v.importantColor, }), + ...(color && { color: _.get(v.colors, color) }), ...(weight === 'light' && { fontWeight: v.fontWeightLight,