TextFiled Presenter getColorByState fix (#2290)

* TextFiled Presenter getColorByState fix, new function isDesignToken to check if the color that passed is design token

* Fixed review notes, added test to colors.spec file

Author: adids1221

src/incubator/TextField/Presenter.ts

@@ -9,6 +9,8 @@ export function getColorByState(color?: ColorType, context?: FieldContextType) {
   let finalColor: string | undefined;
   if (_.isString(color)) {
     finalColor = color;
+  } else if (Colors.isDesignToken(color)) {
+    finalColor = color?.toString();
   } else if (_.isPlainObject(color)) {
     if (context?.disabled) {
       finalColor = color?.disabled;
@@ -18,9 +20,8 @@ export function getColorByState(color?: ColorType, context?: FieldContextType) {
       finalColor = color?.focus;
     }
 
-    finalColor = finalColor || color?.default || (color as string) || Colors.$textDefault;
+    finalColor = finalColor || color?.default || Colors.$textDefault;
   }
-
   return finalColor;
 }
 

src/style/__tests__/colors.spec.js

@@ -81,7 +81,7 @@ describe('style/Colors', () => {
       expect(uut.getColorTint('#000000', 60)).toEqual('#808080');
     });
 
-    it('should handle color that does not exist in uilib', () => {
+    it('should handle color that does not exist in `uilib`', () => {
       expect(uut.getColorTint('#F1BE0B', 10)).toEqual('#8D7006'); //
       expect(uut.getColorTint('#F1BE0B', 20)).toEqual('#BE9609'); //
       expect(uut.getColorTint('#F1BE0B', 30)).toEqual('#F1BE0B'); //
@@ -181,4 +181,13 @@ describe('style/Colors', () => {
       });
     });
   });
+
+  describe('isDesignToken(...)', () => {
+    it('should return true if the color passed is design token', () => {
+      expect(uut.isDesignToken({semantic: ['$textDefault'], toString: () => {}})).toEqual(true);
+      expect(uut.isDesignToken({resource_paths: ['@color/textNeutral'], toString: () => {}})).toEqual(true);
+      expect(uut.isDesignToken({test: 'fail', toString: () => {}})).toEqual(false);
+      expect(uut.isDesignToken(uut.red10)).toEqual(false);
+    });
+  });
 });

src/style/colors.ts

@@ -10,6 +10,8 @@ import DesignTokensDM from './designTokensDM';
 import ColorName from './colorName';
 import Scheme, {Schemes, SchemeType} from './scheme';
 
+export type DesignToken = {semantic?: [string]; resource_paths?: [string]; toString: Function};
+
 export class Colors {
   [key: string]: any;
   private shouldSupportDarkMode = false;
@@ -276,6 +278,7 @@ export class Colors {
   isValidHex(string: string) {
     return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);
   }
+
   getHexString(color: tinycolor.ColorInput) {
     return tinycolor(color).toHexString();
   }
@@ -290,6 +293,9 @@ export class Colors {
     const colorB = colorStringValue(colorBValue);
     return _.toLower(colorA) === _.toLower(colorB);
   }
+  isDesignToken(color?: DesignToken) {
+    return !!(color?.semantic || color?.resource_paths);
+  }
 }
 
 function colorStringValue(color: string | object) {