Merge branch 'next' of github.com:storybookjs/storybook into next

storybookjs · Mar 30, 2021 · ee98e0e · ee98e0e
2 parents a8aadc4 + 44eca58
commit ee98e0e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/docs/snippets/common/my-component-story-use-globaltype.js.mdx b/docs/snippets/common/my-component-story-use-globaltype.js.mdx
@@ -8,12 +8,12 @@ const getCaptionForLocale = (locale) => {
     case 'kr': return '안녕하세요!';
     case 'zh': return '你好!';
     default:
-      return 'Hello!',
+      return 'Hello!';
   }
 }
 
 export const StoryWithLocale = (args, { globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
   return <>{caption}</>;
 };
-```
+```
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 };