docs(ComponentExample): push unpushed changes

lucmerceron · Jul 25, 2018 · 8c532b3 · 8c532b3
1 parent e786724
commit 8c532b3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/docs/src/components/CarbonAd/CarbonAdNative.js b/docs/src/components/CarbonAd/CarbonAdNative.js
@@ -80,7 +80,7 @@ class CarbonAdNative extends Component {
         divider: '#333',
         background: '#222',
         backgroundHover: '#1d1d1d',
-        color: '#bbb',
+        color: '#999',
         colorHover: '#ccc',
       }
       : {
@@ -93,7 +93,7 @@ class CarbonAdNative extends Component {
 
     return (
       <a id={id} href={ad.statlink} target='_blank' rel='noopener noreferrer'>
-        <img src={ad.image} width='20' style={{ verticalAlign: 'middle', marginRight: '0.5rem' }} />
+        <img src={ad.image} />
         <span>{ad.company}</span>
         {' — '}
         <span>{ad.description}</span>
@@ -102,7 +102,7 @@ class CarbonAdNative extends Component {
           basic={!inverted}
           color={inverted ? 'black' : undefined}
           horizontal
-          style={{ float: 'right' }}
+          style={{ position: 'absolute', right: '1rem', opacity: 0.5 }}
         />
 
         {/* Impression */}
@@ -123,17 +123,30 @@ class CarbonAdNative extends Component {
         <style>{`
           #${id} {
             display: block;
-            padding: 1rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding: 1rem 5rem 1rem 1rem;
             width: 100%;
+            min-height: 3.5rem;
             border-top: 1px solid ${colors.divider};
             background: ${colors.background};
             color: ${colors.color};
             cursor: pointer;
           }
+          #${id} > img {
+            vertical-align: middle;
+            width: 20px;
+            margin-right: 0.5rem;
+            opacity: 0.8;
+          }
           #${id}:hover {
             background: ${colors.backgroundHover};
             color: ${colors.colorHover};
           }
+          #${id}:hover > img {
+            opacity: 1;
+          }
         `}</style>
       </a>
     )

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderExample.js
@@ -48,6 +48,16 @@ class ComponentExampleRenderExample extends PureComponent {
     }
   }
 
+  canBePrettified = () => {
+    const { error, value } = this.props
+
+    try {
+      return !error && value !== formatCode(value)
+    } catch (err) {
+      return false
+    }
+  }
+
   handleCopy = () => {
     copyToClipboard(this.props.value)
     this.setState({ copiedCode: true })
@@ -81,10 +91,12 @@ class ComponentExampleRenderExample extends PureComponent {
     return (
       <Menu size='small' secondary inverted text style={menuStyle}>
         <Menu.Item
-          icon='code'
+          icon={(error && 'bug') || (this.canBePrettified() ? 'magic' : 'check')}
+          color={error ? 'red' : undefined}
+          active={error}
           content='Prettier'
           onClick={this.handleFormat}
-          style={error ? disabledStyle : undefined}
+          style={!this.canBePrettified() ? disabledStyle : undefined}
         />
         <Popup
           inverted
@@ -97,8 +109,8 @@ class ComponentExampleRenderExample extends PureComponent {
           onOpen={this.resetStart}
           trigger={
             <Menu.Item
-              style={this.hasOriginalCodeChanged() ? undefined : disabledStyle}
-              icon='refresh'
+              style={!this.hasOriginalCodeChanged() ? disabledStyle : undefined}
+              icon={this.hasOriginalCodeChanged() ? 'refresh' : 'check'}
               content='Reset'
             />
           }

diff --git a/docs/src/components/Editor/EditorAce.js b/docs/src/components/Editor/EditorAce.js
@@ -38,11 +38,13 @@ const semanticUIReactCompleter = {
 
     const addPropsFromAPIPath = (apiPath, score) => {
       const info = componentInfoContext.byAPIPath[apiPath]
+      if (!info) return
       addPropsFromInfo(info, score)
     }
 
     const addPropsFromDisplayName = (displayName, score) => {
       const info = componentInfoContext.byDisplayName[displayName]
+      if (!info) return
       addPropsFromInfo(info, score)
     }