From 902c3a6827a8ca859c284f055de15ccc8defb253 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 13 Jul 2021 09:54:12 +0800
Subject: [PATCH] Merge pull request #15549 from
 storybookjs/fix/controls-color-matcher

Controls: Fix color matching behavior for non-string types
---
 lib/client-api/src/inferControls.test.ts | 56 ++++++++++++++----------
 lib/client-api/src/inferControls.ts      |  3 +-
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/lib/client-api/src/inferControls.test.ts b/lib/client-api/src/inferControls.test.ts
index 5b33d095a4a5..1905431fc6a1 100644
--- a/lib/client-api/src/inferControls.test.ts
+++ b/lib/client-api/src/inferControls.test.ts
@@ -31,7 +31,7 @@ describe('inferControls', () => {
       warnSpy.mockRestore();
     });
 
-    it('should return color type when matching color', () => {
+    it('should return color type when using color matcher', () => {
       // passing a string, should return control type color
       const inferredControls = inferControls(
         getStoryContext({
@@ -39,7 +39,6 @@ describe('inferControls', () => {
             background: {
               type: {
                 name: 'string',
-                value: 'red',
               },
               name: 'background',
             },
@@ -55,31 +54,42 @@ describe('inferControls', () => {
       expect(inferredControls.background.control.type).toEqual('color');
     });
 
-    it('should return inferred type when matches color but arg is not a string', () => {
-      // passing an object which is unsupported, should infer the type to object
-      const inferredControls = inferControls(
-        getStoryContext({
-          argTypes: {
-            background: {
-              type: {
-                name: 'object',
-                value: {
-                  rgb: [255, 255, 0],
-                },
-              },
-              name: 'background',
+    it('should return inferred type when using color matcher but arg passed is not a string', () => {
+      const sampleTypes = [
+        {
+          name: 'object',
+          value: {
+            rgb: {
+              name: 'number',
             },
           },
-          controls: {
-            matchers: {
-              color: /background/,
+        },
+        { name: 'number' },
+        { name: 'boolean' },
+      ];
+
+      sampleTypes.forEach((type) => {
+        const inferredControls = inferControls(
+          getStoryContext({
+            argTypes: {
+              background: {
+                // passing an object which is unsupported
+                // should ignore color control and infer the type instead
+                type,
+                name: 'background',
+              },
             },
-          },
-        })
-      );
+            controls: {
+              matchers: {
+                color: /background/,
+              },
+            },
+          })
+        );
 
-      expect(warnSpy).toHaveBeenCalled();
-      expect(inferredControls.background.control.type).toEqual('object');
+        expect(warnSpy).toHaveBeenCalled();
+        expect(inferredControls.background.control.type).toEqual(type.name);
+      });
     });
   });
 
diff --git a/lib/client-api/src/inferControls.ts b/lib/client-api/src/inferControls.ts
index 5097082ae5c2..85439860763d 100644
--- a/lib/client-api/src/inferControls.ts
+++ b/lib/client-api/src/inferControls.ts
@@ -19,7 +19,8 @@ const inferControl = (argType: ArgType, name: string, matchers: ControlsMatchers
 
   // args that end with background or color e.g. iconColor
   if (matchers.color && matchers.color.test(name)) {
-    const controlType = typeof argType.type.value;
+    const controlType = argType.type.name;
+
     if (controlType === 'string') {
       return { control: { type: 'color' } };
     }