From 0828155d0651edef1c4898a1a2e630cdc89df1f1 Mon Sep 17 00:00:00 2001
From: Rahul <Primigenus@users.noreply.github.com>
Date: Tue, 2 Jan 2018 16:06:10 -0800
Subject: [PATCH 1/2] Pass alpha transparency up to the story

Fixes #802.

Instead of just passing `color.hex`, also pass the alpha value.
---
 addons/knobs/src/components/types/Color.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
index 7462fc5ec0f2..074016e49f56 100644
--- a/addons/knobs/src/components/types/Color.js
+++ b/addons/knobs/src/components/types/Color.js
@@ -84,7 +84,19 @@ class ColorType extends React.Component {
                 this.popover = e;
               }}
             >
-              <SketchPicker color={knob.value} onChange={color => onChange(color.hex)} />
+              <SketchPicker
+                color={knob.value}
+                onChange={color =>
+                  onChange(`
+                  rgba(
+                    ${color.rgb.r},
+                    ${color.rgb.g},
+                    ${color.rgb.b},
+                    ${color.rgb.a}
+                  )
+                `)
+                }
+              />
             </div>
           ),
           () => null

From 448fda2533c366d073ab8138d7c2438bc17f1ee7 Mon Sep 17 00:00:00 2001
From: Rahul <134624+Primigenus@users.noreply.github.com>
Date: Wed, 3 Jan 2018 14:51:34 -0800
Subject: [PATCH 2/2] Remove newlines

---
 addons/knobs/src/components/types/Color.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
index 074016e49f56..d0d90b0ab43d 100644
--- a/addons/knobs/src/components/types/Color.js
+++ b/addons/knobs/src/components/types/Color.js
@@ -87,14 +87,7 @@ class ColorType extends React.Component {
               <SketchPicker
                 color={knob.value}
                 onChange={color =>
-                  onChange(`
-                  rgba(
-                    ${color.rgb.r},
-                    ${color.rgb.g},
-                    ${color.rgb.b},
-                    ${color.rgb.a}
-                  )
-                `)
+                  onChange(`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`)
                 }
               />
             </div>