feat(Label): add color prop

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `Loader` component @layershifter ([#685](https://github.com/stardust-ui/react/pull/685))
+- Add `color` prop to `Label` component @Bugaa92 ([#647](https://github.com/stardust-ui/react/pull/647))
 
 ### Fixes
 - Fix focus outline visible only during keyboard navigation @kolaps33 ([#689] https://github.com/stardust-ui/react/pull/689)

docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Label, ProviderConsumer, Grid } from '@stardust-ui/react'
+
+const LabelExampleColor = () => (
+  <Grid
+    columns="auto"
+    styles={{ justifyContent: 'left', justifyItems: 'left' }}
+    variables={{ gridGap: '10px' }}
+  >
+    <ProviderConsumer
+      render={({ siteVariables: { colorScheme } }) =>
+        _.keys(colorScheme).map(color => (
+          <Label key={color} color={color} content={_.startCase(color)} />
+        ))
+      }
+    />
+  </Grid>
+)
+
+export default LabelExampleColor

docs/src/examples/components/Label/Variations/index.tsx

@@ -6,9 +6,14 @@ const Variations = () => (
   <ExampleSection title="Variations">
     <ComponentExample
       title="Circular"
-      description="A label can be circular."
+      description="A Label can be circular."
       examplePath="components/Label/Variations/LabelExampleCircular"
     />
+    <ComponentExample
+      title="Color"
+      description="A Label can have different colors."
+      examplePath="components/Label/Variations/LabelExampleColor"
+    />
   </ExampleSection>
 )
 

src/components/Label/Label.tsx

@@ -11,18 +11,21 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  ColorComponentProps,
 } from '../../lib'
 
 import Icon from '../Icon/Icon'
 import Image from '../Image/Image'
 import Layout from '../Layout/Layout'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
+import { ComplexColorPropType } from '../../lib/commonPropInterfaces'
 
 export interface LabelProps
   extends UIComponentProps,
     ChildrenComponentProps,
-    ContentComponentProps {
+    ContentComponentProps,
+    ColorComponentProps<ComplexColorPropType> {
   accessibility?: Accessibility
 
   /** A Label can be circular. */
@@ -55,7 +58,7 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
   static className = 'ui-label'
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: 'complex' }),
     circular: PropTypes.bool,
     icon: customPropTypes.itemShorthand,
     iconPosition: PropTypes.oneOf(['start', 'end']),

src/lib/colorUtils.ts

@@ -1,5 +1,13 @@
 import * as _ from 'lodash'
-import { SiteVariablesInput, ColorVariants, ColorValues } from '../themes/types'
+import {
+  SiteVariablesInput,
+  ColorVariants,
+  ColorValues,
+  ColorSchemeMapping,
+  ColorScheme,
+} from '../themes/types'
+import { Partial } from '../../types/utils'
+import { ComplexColorPropType } from './commonPropInterfaces'
 
 export const mapColorsToScheme = <T>(
   siteVars: SiteVariablesInput,
@@ -9,3 +17,60 @@ export const mapColorsToScheme = <T>(
     { ...siteVars.emphasisColors, ...siteVars.naturalColors },
     typeof mapper === 'number' ? String(mapper) : (mapper as any),
   ) as ColorValues<T>
+
+export const getColorSchemeFn = <T>(colorProp: string, colorScheme: ColorValues<T>) => {
+  const colors = _.get(colorScheme, colorProp)
+  return (area: keyof T, defaultColor: string) => (colors ? colors[area] : defaultColor)
+}
+
+export const getColorSchemeFromObject = (
+  colorScheme: ColorValues<Partial<ColorScheme>>,
+  colors: ComplexColorPropType,
+): Partial<ColorScheme> =>
+  _.mapValues(colors, (color, colorName) => {
+    // if the color scheme contains the color, then get the value from it, otherwise return the color provided
+    const colorSchemeValue = _.get(colorScheme, color, colorScheme.default[color])
+    return colorSchemeValue ? colorSchemeValue[colorName] : colors[colorName]
+  })
+
+export const getColorSchemeWithCustomDefaults = (
+  colorScheme: ColorSchemeMapping,
+  customDefaultValues: Partial<ColorScheme>,
+) => {
+  const mergedDefaultValues = {
+    ...colorScheme.default,
+    ...customDefaultValues,
+  }
+  return {
+    ...colorScheme,
+    default: mergedDefaultValues,
+  }
+}
+
+export const generateColorScheme = (
+  colorProp: ComplexColorPropType,
+  colorScheme: ColorValues<Partial<ColorScheme>>,
+): Partial<ColorScheme> => {
+  // if both color prop and color scheme are defined, we are merging them
+  if (colorProp && colorScheme) {
+    return typeof colorProp === 'string'
+      ? _.get(colorScheme, colorProp as string, colorScheme.default)
+      : { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) }
+  }
+
+  // if the color prop is not defined, but the the color scheme is defined, then we are returning
+  // the defaults from the color scheme if they exists
+  if (colorScheme) {
+    return colorScheme && colorScheme.default ? colorScheme.default : {}
+  }
+
+  // if the color scheme is not defined, then if the color prop is a scheme object we are
+  // returning it, otherwise we return an empty object, as it means that the component is
+  // implementing the simple color prop
+  if (colorProp) {
+    return typeof colorProp === 'string' ? {} : colorProp
+  }
+
+  // if neither the color prop, nor the color scheme are defined, we are returning empty object
+  return {}
+}

src/lib/commonPropInterfaces.ts

@@ -25,21 +25,32 @@ export interface UIComponentProps<P = any, V = any>
   className?: string
 }
 
-export interface ColorComponentProps {
+export type ColorValue =
+  | 'primary'
+  | 'secondary'
+  | 'blue'
+  | 'green'
+  | 'grey'
+  | 'orange'
+  | 'pink'
+  | 'purple'
+  | 'teal'
+  | 'red'
+  | 'yellow'
+  | string
+
+export type ComplexColorPropType =
+  | {
+      foreground?: ColorValue
+      background?: ColorValue
+      border?: ColorValue
+      shadow?: ColorValue
+    }
+  | ColorValue
+
+export interface ColorComponentProps<TColor = ColorValue> {
   /** A component can have a color. */
-  color?:
-    | 'primary'
-    | 'secondary'
-    | 'blue'
-    | 'green'
-    | 'grey'
-    | 'orange'
-    | 'pink'
-    | 'purple'
-    | 'teal'
-    | 'red'
-    | 'yellow'
-    | string
+  color?: TColor
 }
 
 export interface ContentComponentProps<TContent = React.ReactNode> {

src/lib/commonPropTypes.ts

@@ -6,11 +6,38 @@ export interface CreateCommonConfig {
   children?: boolean | 'node' | 'element'
   as?: boolean
   className?: boolean
-  color?: boolean
+  color?: boolean | 'simple' | 'complex'
   content?: boolean | 'node' | 'shorthand'
   styled?: boolean
 }
 
+const colorPropType = PropTypes.oneOfType([
+  PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'blue',
+    'green',
+    'grey',
+    'orange',
+    'pink',
+    'purple',
+    'teal',
+    'red',
+    'yellow',
+  ]),
+  PropTypes.string,
+])
+
+export const complexColorPropType = PropTypes.oneOfType([
+  PropTypes.shape({
+    foreground: colorPropType,
+    background: colorPropType,
+    border: colorPropType,
+    shadow: colorPropType,
+  }),
+  colorPropType,
+])
+
 export const createCommon = (config: CreateCommonConfig = {}) => {
   const {
     animated = true,
@@ -35,22 +62,7 @@ export const createCommon = (config: CreateCommonConfig = {}) => {
       className: PropTypes.string,
     }),
     ...(color && {
-      color: PropTypes.oneOfType([
-        PropTypes.oneOf([
-          'primary',
-          'secondary',
-          'blue',
-          'green',
-          'grey',
-          'orange',
-          'pink',
-          'purple',
-          'teal',
-          'red',
-          'yellow',
-        ]),
-        PropTypes.string,
-      ]),
+      color: color === true || color === 'simple' ? colorPropType : complexColorPropType,
     }),
     ...(content && {
       content:

src/lib/index.ts

@@ -3,7 +3,7 @@ import * as commonPropTypes from './commonPropTypes'
 
 export { default as AutoControlledComponent } from './AutoControlledComponent'
 export { default as childrenExist } from './childrenExist'
-export { mapColorsToScheme } from './colorUtils'
+export * from './colorUtils'
 export { default as UIComponent } from './UIComponent'
 export { EventStack } from './eventStack'
 export { felaRenderer, felaRtlRenderer } from './felaRenderer'

src/lib/renderComponent.tsx

@@ -32,6 +32,7 @@ import { mergeComponentStyles, mergeComponentVariables } from './mergeThemes'
 import { FocusZoneProps, FocusZone, FocusZone as FabricFocusZone } from './accessibility/FocusZone'
 import { FOCUSZONE_WRAP_ATTRIBUTE } from './accessibility/FocusZone/focusUtilities'
 import createAnimationStyles from './createAnimationStyles'
+import { generateColorScheme } from './index'
 
 export interface RenderResultConfig<P> {
   // TODO: Switch back to React.ReactType after issue will be resolved
@@ -159,6 +160,7 @@ const renderComponent = <P extends {}>(config: RenderConfig<P>): React.ReactElem
 
         const {
           siteVariables = {
+            colorScheme: {},
             colors: {},
             contextualColors: {},
             emphasisColors: {},
@@ -202,10 +204,14 @@ const renderComponent = <P extends {}>(config: RenderConfig<P>): React.ReactElem
           { handledProps: [...handledProps, ...accessibility.handledProps] },
           props,
         )
+
+        const colors = generateColorScheme(stateAndProps.color, resolvedVariables.colorScheme)
+
         const styleParam: ComponentStyleFunctionParam = {
           props: stateAndProps,
           variables: resolvedVariables,
           theme,
+          colors,
         }
 
         mergedStyles.root = {

src/themes/base/colors.ts

@@ -1,4 +1,12 @@
-import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types'
+import * as _ from 'lodash'
+
+import {
+  ColorPalette,
+  ContextualColors,
+  EmphasisColors,
+  NaturalColors,
+  ColorSchemeMapping,
+} from '../types'
 
 export const naturalColors: NaturalColors = {
   blue: {
@@ -135,11 +143,38 @@ export const contextualColors: ContextualColors = {
   warning: naturalColors.yellow,
 }
 
-export const colors: ColorPalette = {
-  ...contextualColors,
+const emphasisAndNaturalColors: EmphasisColors & NaturalColors = {
   ...emphasisColors,
   ...naturalColors,
+}
+
+const lightBackgroundColors = ['teal', 'yellow']
+const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName)
+
+export const colors: ColorPalette = {
+  ...emphasisAndNaturalColors,
+  ...contextualColors,
 
   black: '#000',
   white: '#fff',
 }
+
+export const colorScheme: ColorSchemeMapping = _.mapValues(
+  emphasisAndNaturalColors,
+  (colorVariants, colorName) => {
+    const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
+
+    return {
+      foreground,
+      border: foreground,
+      shadow: foreground,
+      background: colorVariants[500],
+      default: {
+        foreground: colors.grey[600],
+        border: colors.grey[600],
+        shadow: colors.grey[600],
+        background: colors.grey[100],
+      },
+    }
+  },
+)

src/themes/base/siteVariables.ts

@@ -2,7 +2,7 @@
 // COLORS
 //
 
-export { colors, contextualColors, emphasisColors, naturalColors } from './colors'
+export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'
 
 //
 // FONT SIZES