feat(color): add color variant to the base color prop

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `DatePickerField`: fix minDate and endDate behavior to be always included
 
+### Added
+
+-   `Text`, `Heading`, `Icon`, `InlineList` and `Link`: can now set color and color variant directly in the `color` props (ex: `color="dark-L2"`)
+
 ### Changed
 
 -   Docs: update `Filter and sort` pattern doc page

packages/lumx-react/src/components/icon/Icon.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -16,7 +16,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
  */
 export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */
@@ -58,15 +58,16 @@ export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
     const defaultTheme = useTheme();
     const {
         className,
-        color,
-        colorVariant,
+        color: propColor,
+        colorVariant: propColorVariant,
         hasShape,
         icon,
         size,
         theme = defaultTheme,
         alt,
         ...forwardedProps
     } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
     // Color
     let iconColor = color;

packages/lumx-react/src/components/index.ts

@@ -19,39 +19,6 @@ export type Alignment = ValueOf<typeof Alignment>;
 export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
 export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
 
-/**
- * See SCSS variable $lumx-color-palette
- */
-export const ColorPalette = {
-    primary: 'primary',
-    secondary: 'secondary',
-    blue: 'blue',
-    dark: 'dark',
-    green: 'green',
-    yellow: 'yellow',
-    red: 'red',
-    light: 'light',
-    grey: 'grey',
-} as const;
-export type ColorPalette = ValueOf<typeof ColorPalette>;
-export type Color = ColorPalette | string;
-
-/**
- * See SCSS variable $lumx-color-variants
- */
-export const ColorVariant = {
-    D1: 'D1',
-    D2: 'D2',
-    L1: 'L1',
-    L2: 'L2',
-    L3: 'L3',
-    L4: 'L4',
-    L5: 'L5',
-    L6: 'L6',
-    N: 'N',
-} as const;
-export type ColorVariant = ValueOf<typeof ColorVariant>;
-
 export const Theme = {
     light: 'light',
     dark: 'dark',
@@ -189,3 +156,5 @@ export type WhiteSpace = ValueOf<typeof WhiteSpace>;
  * Re-exporting some utils types.
  */
 export type { HeadingElement, TextElement, GenericProps, Callback } from '../utils/type';
+
+export * from '../utils/type/color';

packages/lumx-react/src/components/inline-list/InlineList.tsx

@@ -2,9 +2,9 @@ import React, { Children, isValidElement } from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
+import { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -14,7 +14,7 @@ export interface InlineListProps extends GenericProps {
     /**
      * Text color.
      */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -57,7 +57,6 @@ const DEFAULT_PROPS = {} as const;
  */
 export const InlineList = forwardRef<InlineListProps>((props, ref) => {
     const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
-    const fontColorClassName = color && getFontColorClassName(color, colorVariant);
     const typographyClassName = typography && getTypographyClassName(typography);
     return (
         // eslint-disable-next-line jsx-a11y/no-redundant-roles
@@ -68,7 +67,7 @@ export const InlineList = forwardRef<InlineListProps>((props, ref) => {
                 className,
                 CLASSNAME,
                 wrap && `${CLASSNAME}--wrap`,
-                fontColorClassName,
+                fontColorClass(color, colorVariant),
                 typographyClassName,
             )}
             // Lists with removed bullet style can lose their a11y list role on some browsers

packages/lumx-react/src/components/link/Link.tsx

@@ -2,9 +2,14 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
+import { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, getTypographyClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import {
+    getRootClassName,
+    getTypographyClassName,
+    handleBasicClasses,
+    resolveColorWithVariants,
+} from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
 
@@ -15,7 +20,7 @@ type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAn
  */
 export interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */
@@ -63,8 +68,8 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
     const {
         children,
         className,
-        color,
-        colorVariant,
+        color: propColor,
+        colorVariant: propColorVariant,
         disabled,
         isDisabled = disabled,
         href,
@@ -75,6 +80,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
         typography,
         ...forwardedProps
     } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
     const isLink = linkAs || href;
     const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';

packages/lumx-react/src/components/text/Text.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
+import { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
 import { GenericProps, TextElement } from '@lumx/react/utils/type';
 import {
-    getFontColorClassName,
+    fontColorClass,
     getRootClassName,
     handleBasicClasses,
     getTypographyClassName,
@@ -22,7 +22,7 @@ export interface TextProps extends GenericProps {
     /**
      * Color variant.
      */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -95,7 +95,6 @@ export const Text = forwardRef<TextProps>((props, ref) => {
         ...forwardedProps
     } = props;
 
-    const colorClass = color && getFontColorClassName(color, colorVariant);
     const typographyClass = typography && getTypographyClassName(typography);
 
     // Truncate mode
@@ -126,7 +125,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
                     isTruncatedMultiline,
                 }),
                 typographyClass,
-                colorClass,
+                fontColorClass(color, colorVariant),
                 noWrap && `${CLASSNAME}--no-wrap`,
             )}
             title={tooltipLabel}

packages/lumx-react/src/utils/className/fontColorClass.test.ts

@@ -0,0 +1,15 @@
+import { fontColorClass } from '@lumx/react/utils/className/fontColorClass';
+
+describe(fontColorClass, () => {
+    it('should get lumx class for font color', () => {
+        expect(fontColorClass('dark')).toBe('lumx-color-font-dark-N');
+    });
+
+    it('should get lumx class for font color with variant', () => {
+        expect(fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+
+    it('should get lumx class for font color with variant with override', () => {
+        expect(fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+});

packages/lumx-react/src/utils/className/fontColorClass.ts

@@ -0,0 +1,12 @@
+import { ColorVariant, ColorWithVariants } from '@lumx/react';
+import { resolveColorWithVariants } from '@lumx/react/utils/className';
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
+ */
+export function fontColorClass(propColor?: ColorWithVariants, propColorVariant?: ColorVariant) {
+    if (!propColor) return undefined;
+    const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+    return `lumx-color-font-${color}-${colorVariant}`;
+}

packages/lumx-react/src/utils/className/index.ts

@@ -1,4 +1,5 @@
 export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
 export { getRootClassName } from './getRootClassName';
 export { getTypographyClassName } from './getTypographyClassName';
-export { getFontColorClassName } from './getFontColorClassName';
+export { fontColorClass } from './fontColorClass';
+export { resolveColorWithVariants } from './resolveColorWithVariants';

packages/lumx-react/src/utils/className/resolveColorWithVariants.test.ts

@@ -0,0 +1,33 @@
+import { resolveColorWithVariants } from './resolveColorWithVariants';
+
+describe(resolveColorWithVariants, () => {
+    it('should handle undefined color', () => {
+        const result = resolveColorWithVariants(undefined);
+        expect(result).toEqual([undefined, undefined]);
+    });
+
+    it('should handle undefined color with variant', () => {
+        const result = resolveColorWithVariants(undefined, 'L2');
+        expect(result).toEqual([undefined, 'L2']);
+    });
+
+    it('should handle color with undefined variant', () => {
+        const result = resolveColorWithVariants('primary');
+        expect(result).toEqual(['primary', undefined]);
+    });
+
+    it('should handle color & variant separated', () => {
+        const result = resolveColorWithVariants('primary', 'L2');
+        expect(result).toEqual(['primary', 'L2']);
+    });
+
+    it('should handle color with variant all in one', () => {
+        const result = resolveColorWithVariants('primary-L2');
+        expect(result).toEqual(['primary', 'L2']);
+    });
+
+    it('should override color variant with the given color variant', () => {
+        const result = resolveColorWithVariants('primary-L2', 'D2');
+        expect(result).toEqual(['primary', 'D2']);
+    });
+});

packages/lumx-react/src/utils/className/resolveColorWithVariants.ts

@@ -0,0 +1,11 @@
+import { ColorPalette, ColorVariant, ColorWithVariants } from '@lumx/react';
+
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+export function resolveColorWithVariants(
+    colorWithVariants?: ColorWithVariants,
+    colorVariant?: ColorVariant,
+): [color?: ColorPalette, colorVariant?: ColorVariant] {
+    if (!colorWithVariants) return [undefined, colorVariant];
+    const [color, baseColorVariant] = colorWithVariants.split('-');
+    return [color as ColorPalette, (colorVariant || baseColorVariant) as ColorVariant];
+}

packages/lumx-react/src/utils/type/color/index.ts

@@ -0,0 +1,43 @@
+import type { ValueOf } from '@lumx/react/utils/type';
+
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+export const ColorPalette = {
+    primary: 'primary',
+    secondary: 'secondary',
+    blue: 'blue',
+    dark: 'dark',
+    green: 'green',
+    yellow: 'yellow',
+    red: 'red',
+    light: 'light',
+    grey: 'grey',
+} as const;
+export type ColorPalette = ValueOf<typeof ColorPalette>;
+export type Color = ColorPalette | string;
+
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+export const ColorVariant = {
+    D1: 'D1',
+    D2: 'D2',
+    L1: 'L1',
+    L2: 'L2',
+    L3: 'L3',
+    L4: 'L4',
+    L5: 'L5',
+    L6: 'L6',
+    N: 'N',
+} as const;
+export type ColorVariant = ValueOf<typeof ColorVariant>;
+
+/** ColorPalette with all possible color variant combination */
+export type ColorWithVariants =
+    | ColorPalette
+    | Exclude<
+          `${ColorPalette}-${ColorVariant}`,
+          // No dark variant for light and dark
+          `light-D${number}` | `dark-D${number}`
+      >;

packages/site-demo/content/product/components/expansion-panel/react/examples.tsx

@@ -75,7 +75,7 @@ export const App = () => {
                         figure={<Thumbnail alt="" image="/demo-assets/square1.jpg" size="m" variant="rounded" />}
                     >
                         <Heading typography="body1">With thumbnail</Heading>
-                        <Text as="p" typography="caption" color="dark" colorVariant="L2">
+                        <Text as="p" typography="caption" color="dark-L2">
                             And secondary text
                         </Text>
                     </GenericBlock>