getSystemColorByHex now have options object with validColors (#2363)

Author: adids1221

src/style/__tests__/colors.spec.js

@@ -1,5 +1,6 @@
 import uut from '../colors';
 const SYSTEM_COLORS = ['grey', 'white', 'black'];
+const GetColorsByHexOptions = {validColors: SYSTEM_COLORS};
 
 describe('style/Colors', () => {
   it('should add alpha to hex color value', () => {
@@ -194,15 +195,15 @@ describe('style/Colors', () => {
 
   describe('getSystemColorByHex', () => {
     it('should return the system color, if the color is included in the validColors array', () => {
-      expect(uut.getSystemColorByHex('#FFFFFF', SYSTEM_COLORS)).toEqual('white');
-      expect(uut.getSystemColorByHex('#000000', SYSTEM_COLORS)).toEqual('black');
-      expect(uut.getSystemColorByHex('#116DFF', [...SYSTEM_COLORS, 'blue'])).toEqual('blue30');
-      expect(uut.getSystemColorByHex('#FB6413', [...SYSTEM_COLORS, 'orange'])).toEqual('orange30');
+      expect(uut.getSystemColorByHex('#FFFFFF', GetColorsByHexOptions)).toEqual('white');
+      expect(uut.getSystemColorByHex('#000000', GetColorsByHexOptions)).toEqual('black');
+      expect(uut.getSystemColorByHex('#116DFF', {validColors: [...SYSTEM_COLORS, 'blue']})).toEqual('blue30');
+      expect(uut.getSystemColorByHex('#FB6413', {validColors: [...SYSTEM_COLORS, 'orange']})).toEqual('orange30');
     });
 
     it('should return undefined if the color is not included in validColors', () => {
-      expect(uut.getSystemColorByHex('#116DFF', SYSTEM_COLORS)).toEqual(undefined);
-      expect(uut.getSystemColorByHex('#00A87E', SYSTEM_COLORS)).toEqual(undefined);
+      expect(uut.getSystemColorByHex('#116DFF', GetColorsByHexOptions)).toEqual(undefined);
+      expect(uut.getSystemColorByHex('#00A87E', GetColorsByHexOptions)).toEqual(undefined);
     });
 
     it('without validColors array the function will return the first system color name match the color', () => {
@@ -212,8 +213,8 @@ describe('style/Colors', () => {
 
     it('should return undefined for color that does not exist in our colors palette.', () => {
       expect(uut.getSystemColorByHex('#5A48F5')).toEqual('violet30');
-      expect(uut.getSystemColorByHex('#5A48F5', SYSTEM_COLORS)).toEqual(undefined);
-      expect(uut.getSystemColorByHex('#5A48F5', ['primary'])).toEqual('primary');
+      expect(uut.getSystemColorByHex('#5A48F5', GetColorsByHexOptions)).toEqual(undefined);
+      expect(uut.getSystemColorByHex('#5A48F5', {validColors: [...SYSTEM_COLORS, 'primary']})).toEqual('primary');
     });
   });
 });

src/style/colors.ts

@@ -13,6 +13,7 @@ import Scheme, {Schemes, SchemeType} from './scheme';
 export type DesignToken = {semantic?: [string]; resource_paths?: [string]; toString: Function};
 export type TokensOptions = {primaryColor: string};
 export type GetColorTintOptions = {avoidReverseOnDark?: boolean};
+export type GetColorByHexOptions = {validColors?: string[]};
 
 export class Colors {
   [key: string]: any;
@@ -146,9 +147,10 @@ export class Colors {
     return ColorName.name(color)[1];
   }
 
-  getSystemColorByHex(colorValue: string, validColors?: string[]) {
+  getSystemColorByHex(colorValue: string, options: GetColorByHexOptions = {}) {
     const color = colorStringValue(colorValue);
     const results: string[] = [];
+    const validColors = options?.validColors;
 
     for (const [key, value] of Object.entries(this)) {
       if (value.toString() === color) {