Merge pull request #14392 from storybookjs/fix-raw-toggle

Controls: QA fixes for Object and Color controls
storybookjs · Mar 30, 2021 · 44eca58 · 44eca58
2 parents f10ef90 + b1ee5e9
commit 44eca58
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx
@@ -246,7 +246,7 @@ const usePresets = (
   currentColor: ParsedColor,
   colorSpace: ColorSpace
 ) => {
-  const [selectedColors, setSelectedColors] = useState(currentColor ? [currentColor] : []);
+  const [selectedColors, setSelectedColors] = useState(currentColor?.valid ? [currentColor] : []);
 
   const presets = useMemo(() => {
     const initialPresets = (presetColors || []).map((preset) => {
@@ -294,7 +294,10 @@ export const ColorControl: FC<ColorProps> = ({
         onVisibilityChange={() => addPreset(color)}
         tooltip={
           <TooltipContent>
-            <Picker {...{ color: realValue, onChange: updateValue, onFocus, onBlur }} />
+            <Picker
+              color={realValue === 'transparent' ? '#000000' : realValue}
+              {...{ onChange: updateValue, onFocus, onBlur }}
+            />
             {presets.length > 0 && (
               <Swatches>
                 {presets.map((preset) => (

diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx
@@ -4,7 +4,7 @@ import React, { ComponentProps, SyntheticEvent, useCallback, useMemo, useState }
 import { styled, useTheme, Theme } from '@storybook/theming';
 
 // @ts-ignore
-import { JsonTree } from './react-editable-json-tree';
+import { JsonTree, getObjectType } from './react-editable-json-tree';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
 import { Form } from '../form';
 import { Icons, IconsProps } from '../icon/icon';
@@ -260,7 +260,7 @@ export const ObjectControl: React.FC<ObjectProps> = ({ name, value, onChange })
 
   return (
     <Wrapper>
-      {hasData && (
+      {hasData && ['Object', 'Array'].includes(getObjectType(data)) && (
         <RawButton onClick={() => setShowRaw((v) => !v)}>
           <Icons icon={showRaw ? 'eyeclose' : 'eye'} />
           <span>RAW</span>

diff --git a/lib/components/src/controls/react-editable-json-tree/index.js b/lib/components/src/controls/react-editable-json-tree/index.js
@@ -166,6 +166,7 @@ JsonTree.defaultProps = {
 };
 
 export { JsonTree };
+export { getObjectType };
 export { ADD_DELTA_TYPE };
 export { REMOVE_DELTA_TYPE };
 export { UPDATE_DELTA_TYPE };