Merge pull request #6203 from Armanio/fix/knob_color

fix(knobs): color type button z-index
storybookjs · Mar 20, 2019 · 033757e · 033757e
2 parents 7c0fa86 + c3ca208
commit 033757e
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
@@ -20,6 +20,10 @@ const Swatch = styled.div(({ theme }) => ({
   borderRadius: '1rem',
 }));
 
+const ColorButton = styled(Button)(({ active }) => ({
+  zIndex: active ? 3 : 'unset',
+}));
+
 const Popover = styled.div({
   position: 'absolute',
   zIndex: '2',
@@ -80,7 +84,13 @@ class ColorType extends React.Component {
     };
 
     return (
-      <Button type="button" name={knob.name} onClick={this.handleClick} size="flex">
+      <ColorButton
+        active={displayColorPicker}
+        type="button"
+        name={knob.name}
+        onClick={this.handleClick}
+        size="flex"
+      >
         {knob.value.toUpperCase()}
         <Swatch style={colorStyle} />
         {displayColorPicker ? (
@@ -92,7 +102,7 @@ class ColorType extends React.Component {
             <SketchPicker color={knob.value} onChange={this.handleChange} />
           </Popover>
         ) : null}
-      </Button>
+      </ColorButton>
     );
   }
 }