fix: story description visibility

ccontrols · Oct 13, 2020 · 215698f · 215698f
1 parent 270e7b4
commit 215698f
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 5 deletions.
diff --git a/ui/blocks/src/Playground/StoryPlayground.tsx b/ui/blocks/src/Playground/StoryPlayground.tsx
@@ -53,6 +53,7 @@ export const StoryPlayground: FC<StoryPlaygroundProps> = ({
   return (
     <BasePlayground
       wrapper={false}
+      story={story}
       actions={[...actions, ...storyActions]}
       {...props}
     />

diff --git a/ui/blocks/src/Stories/Stories.tsx b/ui/blocks/src/Stories/Stories.tsx
@@ -34,7 +34,7 @@ export const Stories: FC<StoriesProps> = ({ id, name, title, ...rest }) => {
     return null;
   }
   return (
-    <StoryBlockContainer title={title} {...rest}>
+    <StoryBlockContainer story={story} title={title} {...rest}>
       {stories.map((id: string) => {
         const story = store.stories[id];
         return (

diff --git a/ui/blocks/src/Story/Story.tsx b/ui/blocks/src/Story/Story.tsx
@@ -48,7 +48,7 @@ export const Story: FC<StoryProps> = forwardRef(
 
     if (story && story.id && story.renderFn) {
       return (
-        <StoryBlockContainer {...rest}>
+        <StoryBlockContainer {...rest} story={story}>
           <StoryRender
             ref={ref}
             story={story}

diff --git a/ui/blocks/src/StoryConfig/StoryConfig.tsx b/ui/blocks/src/StoryConfig/StoryConfig.tsx
@@ -33,7 +33,7 @@ export const StoryConfig: FC<StoryConfigProps> = ({
   const doc = useCurrentDocument();
   const docPackage = usePackage(doc?.package);
   return (
-    <StoryBlockContainer {...rest}>
+    <StoryBlockContainer story={story} {...rest}>
       <BaseStoryConfig
         story={story}
         doc={doc}

diff --git a/ui/blocks/src/StorySource/StorySource.tsx b/ui/blocks/src/StorySource/StorySource.tsx
@@ -45,7 +45,7 @@ export const StorySource: FC<StorySourceProps> = ({
   const docPackage = usePackage(doc?.package);
 
   return (
-    <StoryBlockContainer {...rest}>
+    <StoryBlockContainer story={story} {...rest}>
       <BaseStorySource
         story={story}
         doc={doc}

diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 /** @jsx jsx */
 import React, { FC } from 'react';
 import { jsx, Flex, Link, Divider, Box, SxStyleProp, Text } from 'theme-ui';
@@ -92,7 +93,17 @@ export const BlockContainer: FC<BlockContainerProps> = ({
             ))}
         </LinkHeading>
       )}
-      {description && <Markdown>{description}</Markdown>}
+      {description && (
+        <Markdown
+          components={{
+            p: props => (
+              <Box as="p" variant="blockcontainer.description.p" {...props} />
+            ),
+          }}
+        >
+          {description}
+        </Markdown>
+      )}
       {collapsible && children ? (
         <Collapsible isOpen={isOpen}>{children}</Collapsible>
       ) : (

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -411,6 +411,12 @@ export const theme: ControlsTheme = {
         },
       },
     },
+    description: {
+      p: {
+        my: 1,
+      },
+    },
+
     link: {
       position: 'absolute',
       left: -4,
-Original file line number
+Diff line change
@@ Expand Up / @@ -411,6 +411,12 @@ export const theme: ControlsTheme = { @@
             },
           },
         },
+        description: {
+          p: {
+            my: 1,
+          },
+        },
         link: {
           position: 'absolute',
           left: -4,
@@ Expand Down @@