Merge pull request #8923 from storybookjs/8919-props-table-detail-too…

…ltip-width-bug Addon-docs: Fix the props table detail tooltip to prevent cutting the end of the content.
storybookjs · Nov 21, 2019 · 6b6681a · 6b6681a
2 parents a9ed45b + 9b9d6b2
commit 6b6681a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
@@ -65,6 +65,7 @@ PropTypesProps.propTypes = {
   classElementInline: PropTypes.element,
   functionalElementType: PropTypes.elementType,
   classElementType: PropTypes.elementType,
+  elementWithProps: PropTypes.elementType,
   /**
    * `instanceOf` is also supported and the custom type will be shown instead of `instanceOf`
    */
@@ -298,6 +299,7 @@ PropTypesProps.defaultProps = {
   },
   functionalElementType: FunctionalComponent,
   classElementType: ClassComponent,
+  elementWithProps: <ClassComponent className="w8 h8 fill-marine-500" />,
   instanceOf: new Set(),
   oneOfString: 'News',
   oneOfNumeric: 1,

diff --git a/lib/components/src/blocks/PropsTable/PropValue.tsx b/lib/components/src/blocks/PropsTable/PropValue.tsx
@@ -38,24 +38,30 @@ const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
   alignItems: 'center',
 }));
 
-const ArrowIcon = styled(Icons)({
-  height: 10,
-  width: 10,
-  minWidth: 10,
-  marginLeft: '4px',
-  marginTop: `-${DIRTY_PADDING_TOP_IN_PX}px`,
-});
-
-const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme, width }) => ({
+const Detail = styled.div<{ width: string }>(({ theme, width }) => ({
   width,
   minWidth: '200px',
-  maxWith: '800px',
+  maxWidth: '800px',
   padding: '15px',
   // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s2 - 1,
+  // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.
+  boxSizing: 'content-box',
+
+  '& code': {
+    padding: '0 !important',
+  },
 }));
 
+const ArrowIcon = styled(Icons)({
+  height: 10,
+  width: 10,
+  minWidth: 10,
+  marginLeft: '4px',
+  marginTop: `-${DIRTY_PADDING_TOP_IN_PX}px`,
+});
+
 const EmptyProp = () => {
   return <span>-</span>;
 };
@@ -89,9 +95,11 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
         setIsOpen(isVisible);
       }}
       tooltip={
-        <StyledSyntaxHighlighter width={calculateDetailWidth(detail)} language="jsx" format={false}>
-          {detail}
-        </StyledSyntaxHighlighter>
+        <Detail width={calculateDetailWidth(detail)}>
+          <SyntaxHighlighter language="jsx" format={false}>
+            {detail}
+          </SyntaxHighlighter>
+        </Detail>
       }
     >
       <Expandable className="sbdocs-expandable">