fix: various fixes

ccontrols · Mar 31, 2020 · cf7d6a6 · cf7d6a6
1 parent 6371068
commit cf7d6a6
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 45 deletions.
diff --git a/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx b/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx
@@ -31,19 +31,20 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
         : userTitle,
     );
   }, [userTitle]);
+  const block = (
+    <ComponentsContainer
+      of={of}
+      onSelect={tabName =>
+        userTitle === CURRENT_STORY ? setTitle(tabName) : undefined
+      }
+      {...rest}
+    >
+      {(component, props, otherProps) => children(component, props, otherProps)}
+    </ComponentsContainer>
+  );
   return (
     <BlockContainer title={title} collapsible={collapsible} id={id}>
-      <ComponentsContainer
-        of={of}
-        onSelect={tabName =>
-          userTitle === CURRENT_STORY ? setTitle(tabName) : undefined
-        }
-        {...rest}
-      >
-        {(component, props, otherProps) =>
-          children(component, props, otherProps)
-        }
-      </ComponentsContainer>
+      {block}
     </BlockContainer>
   );
 };
diff --git a/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx b/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx
@@ -34,13 +34,14 @@ export const StoryBlockContainer: FC<StoryBlockContainerProps> = ({
   const { component, kind, story } = context;
   const title =
     userTitle == CURRENT_STORY ? getStoryTitle(kind, component) : userTitle;
+  const block = children(context, rest);
   return (
     <BlockContainer
       title={title}
       collapsible={collapsible}
       id={userTitle == CURRENT_STORY && story ? story.id : undefined}
     >
-      {children(context, rest)}
+      {block}
     </BlockContainer>
   );
 };
diff --git a/ui/blocks/src/ComponentSource/ComponentSource.tsx b/ui/blocks/src/ComponentSource/ComponentSource.tsx
@@ -1,14 +1,14 @@
 import React, { FC } from 'react';
 import { ActionItem } from '@component-controls/components';
-import {
-  ComponentsBlockContainer,
-  ComponentsBlockContainerProps,
-} from '../BlockContainer/components/ComponentsBlockContainer';
 import {
   ThemeContext,
   Source,
   SourceProps,
 } from '@component-controls/components';
+import {
+  ComponentsBlockContainer,
+  ComponentsBlockContainerProps,
+} from '../BlockContainer/components/ComponentsBlockContainer';
 import { repositoryActions } from '../utils/repositoryActions';
 
 export type ComponentSourceProps = Omit<

diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
@@ -126,7 +126,39 @@ export const Playground: FC<PlaygroundProps> = ({
       : panel;
   });
 
-  return (
+  const panelsElement = (
+    <Collapsible isOpen={tabsIndex !== undefined}>
+      {panels.length === 1 ? (
+        panels[0].panel
+      ) : (
+        <Tabs
+          selectedIndex={tabsIndex || 0}
+          onSelect={(index: number) => setTabsIndex(index)}
+        >
+          <TabList
+            style={{
+              textAlign: 'right',
+            }}
+          >
+            {panels.map((panel: ActionItem) => (
+              <Tab key={`playground_tab_${panel.title}`}>{panel.title}</Tab>
+            ))}
+          </TabList>
+          {panels.map((panel: ActionItem) => (
+            <TabPanel key={`playground_panel_${panel.title}`}>
+              {panel.panel}
+            </TabPanel>
+          ))}
+        </Tabs>
+      )}
+    </Collapsible>
+  );
+  return !zoomEnabled ? (
+    <ActionContainer actions={panelActions}>
+      {children}
+      {panelsElement}
+    </ActionContainer>
+  ) : (
     <ActionContainer>
       <Global
         styles={css`
@@ -184,31 +216,7 @@ export const Playground: FC<PlaygroundProps> = ({
           );
         }}
       </TransformWrapper>
-      <Collapsible isOpen={tabsIndex !== undefined}>
-        {panels.length === 1 ? (
-          panels[0].panel
-        ) : (
-          <Tabs
-            selectedIndex={tabsIndex || 0}
-            onSelect={(index: number) => setTabsIndex(index)}
-          >
-            <TabList
-              style={{
-                textAlign: 'right',
-              }}
-            >
-              {panels.map((panel: ActionItem) => (
-                <Tab key={`playground_tab_${panel.title}`}>{panel.title}</Tab>
-              ))}
-            </TabList>
-            {panels.map((panel: ActionItem) => (
-              <TabPanel key={`playground_panel_${panel.title}`}>
-                {panel.panel}
-              </TabPanel>
-            ))}
-          </Tabs>
-        )}
-      </Collapsible>
+      {panelsElement}
     </ActionContainer>
   );
 };

diff --git a/ui/blocks/src/Stories/Stories.tsx b/ui/blocks/src/Stories/Stories.tsx
@@ -23,7 +23,7 @@ export const Stories: FC<StoriesProps> = props => (
         return null;
       }
       return (
-        <div>
+        <>
           {stories.map((story: Story) => {
             const storyTitle = story.name;
             return (
@@ -33,7 +33,7 @@ export const Stories: FC<StoriesProps> = props => (
                     disabled: true,
                   },
                 }}
-                key={story.id}
+                key={`playground-${story.id}`}
                 {...rest}
               >
                 <StoryComponent
@@ -44,7 +44,7 @@ export const Stories: FC<StoriesProps> = props => (
               </Playground>
             );
           })}
-        </div>
+        </>
       );
     }}
   </StoryBlockContainer>

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -76,6 +76,7 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
                 key={`${typeof title === 'string' ? title : 'item'}_${index}`}
                 sx={{
                   mt: 1,
+                  mr: index === 0 ? 1 : 0,
                   ml: nextGroup != group || group === undefined ? 2 : 1,
                   fontSize: 1,
                   a: ActionColors({ theme, disabled }),