feat(code): add min-width to code block

components/code/code.tsx

@@ -6,6 +6,7 @@ interface Props {
   bash?: boolean
   darkBash?: boolean
   block?: boolean
+  minWidth?: string
   className?: string
 }
 
@@ -19,7 +20,7 @@ const defaultProps = {
 export type CodeProps = Props & typeof defaultProps & React.HTMLAttributes<any>
 
 const Code: React.FC<React.PropsWithChildren<CodeProps>> = React.memo(({
-  children, block, bash, darkBash, className, ...props
+  children, block, bash, darkBash, className, minWidth, ...props
 }) => {
   const theme = useTheme()
   const isBash = bash || darkBash
@@ -34,10 +35,17 @@ const Code: React.FC<React.PropsWithChildren<CodeProps>> = React.memo(({
     <>
       <pre className={classes} {...props}><code>{children}</code></pre>
       <style jsx>{`
+        code {
+          min-width: ${minWidth ? minWidth : 'unset'};
+        }
+        
         pre {
           line-height: 1.5;
           padding: ${theme.layout.gapHalf};
           text-align: left;
+          white-space: pre;
+          overflow: auto;
+          min-width: ${minWidth ? minWidth : 'unset'};
         }
         
         pre :global(p) {

components/display/display.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
+import React, { ReactNode } from 'react'
 import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 
@@ -20,17 +20,8 @@ const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
   children, caption, shadow, className, ...props
 }) => {
   const theme = useTheme()
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [minWidth, setMinWidth] = useState<string>('150px')
-  
-  useEffect(() => {
-    if (!containerRef.current) return
-    if (!containerRef.current.parentElement) return
-    setMinWidth(`${containerRef.current.parentElement.clientWidth * .85}px`)
-  }, [containerRef])
-
   return (
-    <div ref={containerRef} className={`display ${className}`} {...props}>
+    <div className={`display ${className}`} {...props}>
       <div className="content">{children}</div>
       <div className="caption">{caption}</div>
   
@@ -54,7 +45,6 @@ const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
         
         .content :global(pre) {
           margin: 0;
-          min-width: ${minWidth};
           transition: min-width ease .2s;
         }
 

pages/docs/components/code.mdx

@@ -44,8 +44,9 @@ yarn add @zeit-ui/vue</Code>
 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **bash** | show code in bash mode | `boolean` | - | `false` |
-| **darkBash** | show code in darkBash mode | `boolean` | - | `false` |
 | **block** | show code in `pre` | `boolean` | - | `false` |
+| **darkBash** | show code in darkBash mode | `boolean` | - | `false` |
+| **minWidth** | set CSS min-width | `string` | - | `unset` |
 | ... | native props | `HTMLAttributes` | `'className', ...` | - |
 
 </Attributes>

pages/docs/components/display.mdx

@@ -32,7 +32,7 @@ export const meta = {
 }\`
   return (
     <Display caption="Application's build with a defined environment variable.">
-      <Code block>{codes}</Code>
+      <Code block minWidth="500px">{codes}</Code>
     </Display>
   )
 }
@@ -43,7 +43,7 @@ export const meta = {
   scope={{ Display, Code }}
   code={`
   <Display caption="Run this command to install the library.">
-    <Code darkBash>yarn add @zeit-ui/react</Code>
+    <Code darkBash minWidth="500px">yarn add @zeit-ui/react</Code>
   </Display>
 `} />