From 305a66e37d27ea9e6c84168aa63ce54e6a4d0336 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Wed, 25 Jul 2018 16:49:18 -0700
Subject: [PATCH] docs(src): fix Sidebar filter and Intro editors (#3044)

---
 docs/src/Style.js                        |   7 +-
 docs/src/components/CarbonAd/CarbonAd.js |   6 +-
 docs/src/components/Sidebar/Sidebar.js   | 161 +++++++++++++----------
 docs/src/views/Introduction.js           |   6 +-
 4 files changed, 103 insertions(+), 77 deletions(-)

diff --git a/docs/src/Style.js b/docs/src/Style.js
index 2b95bcf73d..6d25ee4d36 100644
--- a/docs/src/Style.js
+++ b/docs/src/Style.js
@@ -1,19 +1,18 @@
 const style = {}
 const sidebarWidth = 250
 
-style.container = {}
-
 style.menu = {
   position: 'fixed',
+  display: 'flex',
+  flexDirection: 'column',
   top: 0,
   bottom: 0,
   left: 0,
   width: sidebarWidth,
-  paddingBottom: '1em',
   // match menu background
   // prevents a white background when items are filtered out by search
   background: '#1B1C1D',
-  overflowY: 'scroll',
+  overflowX: 'hidden',
 }
 
 style.sidebarMain = {
diff --git a/docs/src/components/CarbonAd/CarbonAd.js b/docs/src/components/CarbonAd/CarbonAd.js
index a3a6899fe2..273828b7da 100644
--- a/docs/src/components/CarbonAd/CarbonAd.js
+++ b/docs/src/components/CarbonAd/CarbonAd.js
@@ -1,7 +1,11 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
 
-const style = { minHeight: 173 }
+const style = {
+  padding: '1rem',
+  background: '#111',
+  boxShadow: '0 0 1rem black',
+}
 
 class CarbonAd extends Component {
   componentDidMount() {
diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js
index fda0446481..929929de1e 100644
--- a/docs/src/components/Sidebar/Sidebar.js
+++ b/docs/src/components/Sidebar/Sidebar.js
@@ -10,13 +10,26 @@ import Logo from 'docs/src/components/Logo/Logo'
 import { docTypes, getComponentPathname, typeOrder, repoURL } from 'docs/src/utils'
 import shallowEqual from 'src/lib/shallowEqual'
 
-const selectedItemLabelStyle = { color: '#fff', float: 'right' }
-const selectedItemLabel = (
+const selectedItemLabelStyle = {
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  padding: '4px 0.5rem',
+  margin: '2px',
+  color: '#8ff',
+  background: '#222',
+}
+const SelectedItemLabel = ({ showArrows }) => (
   <span style={selectedItemLabelStyle}>
-    <Icon name='exchange' rotated='clockwise' />
-    or Enter
+    {showArrows && <Icon name='exchange' rotated='clockwise' />}
+    {showArrows && 'or '}
+    Enter
   </span>
 )
+SelectedItemLabel.propTypes = {
+  showArrows: PropTypes.bool,
+}
 
 class Sidebar extends Component {
   static propTypes = {
@@ -49,12 +62,11 @@ class Sidebar extends Component {
   }
 
   handleDocumentKeyDown = (e) => {
-    const code = keyboardKey.getCode(e)
-    const isAZ = code >= 65 && code <= 90
+    const isSlash = keyboardKey.getKey(e) === '/'
     const hasModifier = e.altKey || e.ctrlKey || e.metaKey
     const bodyHasFocus = document.activeElement === document.body
 
-    if (!hasModifier && isAZ && bodyHasFocus) this._searchInput.focus()
+    if (!hasModifier && isSlash && bodyHasFocus) this._searchInput.focus()
   }
 
   handleItemClick = () => {
@@ -65,6 +77,9 @@ class Sidebar extends Component {
   }
 
   handleSearchChange = (e) => {
+    // ignore first "/" on search focus
+    if (e.target.value === '/') return
+
     this.setState({
       selectedItemIndex: 0,
       query: e.target.value,
@@ -80,7 +95,6 @@ class Sidebar extends Component {
       e.preventDefault()
       history.push(this.selectedRoute)
       this.selectedRoute = null
-      this._searchInput.blur()
       this.setState({ query: '' })
     }
 
@@ -100,7 +114,7 @@ class Sidebar extends Component {
   }
 
   handleSearchRef = (c) => {
-    this._searchInput = c
+    this._searchInput = c && c.querySelector('input')
   }
 
   menuItemsByType = _.map((nextType) => {
@@ -144,6 +158,7 @@ class Sidebar extends Component {
     }, this.props.componentMenu)
 
     this.filteredMenu = [...startsWithMatches, ...containsMatches]
+    const hasMultipleMatches = this.filteredMenu.length > 1
     const menuItems = _.map((info) => {
       itemIndex += 1
       const isSelected = itemIndex === selectedItemIndex
@@ -160,12 +175,12 @@ class Sidebar extends Component {
           to={getComponentPathname(info)}
         >
           {info.displayName}
-          {isSelected && selectedItemLabel}
+          {isSelected && <SelectedItemLabel showArrows={hasMultipleMatches} />}
         </Menu.Item>
       )
     }, this.filteredMenu)
 
-    return menuItems
+    return <Menu.Menu>{menuItems}</Menu.Menu>
   }
 
   render() {
@@ -173,64 +188,72 @@ class Sidebar extends Component {
     const { query } = this.state
 
     return (
-      <Menu vertical fixed='left' inverted style={style}>
-        <Menu.Item>
-          <Logo spaced='right' size='mini' />
-          <strong>
-            Semantic UI React &nbsp;
-            <small>
-              <em>{version}</em>
-            </small>
-          </strong>
-        </Menu.Item>
-        <Menu.Item>
-          <Menu.Header>Getting Started</Menu.Header>
-          <Menu.Menu>
-            <Menu.Item as={Link} to='/' activeClassName='active'>
-              Introduction
-            </Menu.Item>
-            <Menu.Item as={Link} to='/usage' activeClassName='active'>
-              Usage
-            </Menu.Item>
-            <Menu.Item as={Link} to='/theming' activeClassName='active'>
-              Theming
-            </Menu.Item>
-            <Menu.Item as={Link} to='/layouts' activeClassName='active'>
-              Layouts
-            </Menu.Item>
-            <Menu.Item as='a' href={repoURL} target='_blank' rel='noopener noreferrer'>
-              <Icon name='github' /> GitHub
-            </Menu.Item>
-            <Menu.Item
-              as='a'
-              href={`${repoURL}/blob/master/CHANGELOG.md`}
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              <Icon name='file alternate outline' /> CHANGELOG
-            </Menu.Item>
-          </Menu.Menu>
-        </Menu.Item>
-        <Menu.Item>
-          <CarbonAd />
-        </Menu.Item>
-        <Menu.Item active>
-          <Ref innerRef={this.handleSearchRef}>
-            <Input
-              focus
-              inverted
-              transparent
-              icon='filter'
-              size='large'
-              placeholder='Filter Components'
-              value={query}
-              onChange={this.handleSearchChange}
-              onKeyDown={this.handleSearchKeyDown}
-            />
-          </Ref>
-        </Menu.Item>
-        {query ? this.renderSearchItems() : this.menuItemsByType}
-      </Menu>
+      <div style={style}>
+        <Menu
+          fluid
+          inverted
+          vertical
+          borderless
+          compact
+          style={{ display: 'flex', flexDirection: 'column', flex: 1 }}
+        >
+          <Menu.Item>
+            <Logo spaced='right' size='mini' />
+            <strong>
+              Semantic UI React &nbsp;
+              <small>
+                <em>{version}</em>
+              </small>
+            </strong>
+          </Menu.Item>
+          <Menu.Item>
+            <Menu.Header>Getting Started</Menu.Header>
+            <Menu.Menu>
+              <Menu.Item as={Link} exact to='/' activeClassName='active'>
+                Introduction
+              </Menu.Item>
+              <Menu.Item as={Link} exact to='/usage' activeClassName='active'>
+                Usage
+              </Menu.Item>
+              <Menu.Item as={Link} exact to='/theming' activeClassName='active'>
+                Theming
+              </Menu.Item>
+              <Menu.Item as={Link} exact to='/layouts' activeClassName='active'>
+                Layouts
+              </Menu.Item>
+              <Menu.Item as='a' href={repoURL} target='_blank' rel='noopener noreferrer'>
+                <Icon name='github' /> GitHub
+              </Menu.Item>
+              <Menu.Item
+                as='a'
+                href={`${repoURL}/blob/master/CHANGELOG.md`}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Icon name='file alternate outline' /> CHANGELOG
+              </Menu.Item>
+            </Menu.Menu>
+          </Menu.Item>
+          <Menu.Item style={{ boxShadow: '0 0.5rem 1rem black' }}>
+            <Ref innerRef={this.handleSearchRef}>
+              <Input
+                fluid
+                icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
+                placeholder='Press &quot;/&quot; to filter'
+                value={query}
+                onChange={this.handleSearchChange}
+                onKeyDown={this.handleSearchKeyDown}
+              />
+            </Ref>
+          </Menu.Item>
+          <div style={{ flex: 1, marginTop: '1rem', overflowY: 'scroll' }}>
+            {query ? this.renderSearchItems() : this.menuItemsByType}
+          </div>
+          <div style={{ flex: '0 0 auto' }}>
+            <CarbonAd />
+          </div>
+        </Menu>
+      </div>
     )
   }
 }
diff --git a/docs/src/views/Introduction.js b/docs/src/views/Introduction.js
index df62d25311..29f2327564 100644
--- a/docs/src/views/Introduction.js
+++ b/docs/src/views/Introduction.js
@@ -107,10 +107,10 @@ const MenuItemLinkAugmentationHTML = `<div class="ui menu">
 </div>`
 
 const Comparison = ({ jsx, html }) => (
-  <Segment className='code-example'>
+  <Segment inverted className='code-example'>
     <Grid columns='equal' centered textAlign='left'>
       <Grid.Column computer='8' largeScreen='7' widescreen='7' width='16'>
-        <Label size='tiny' attached='top left'>
+        <Label color='grey' size='tiny' attached='top left'>
           JSX
         </Label>
         <Editor id={btoa(jsx)} value={jsx} readOnly />
@@ -121,7 +121,7 @@ const Comparison = ({ jsx, html }) => (
         </Divider>
       </Grid.Column>
       <Grid.Column computer='8' largeScreen='7' widescreen='7' width='16'>
-        <Label size='tiny' attached='top right'>
+        <Label color='grey' size='tiny' attached='top right'>
           Rendered HTML
         </Label>
         <Editor id={btoa(html)} mode='html' value={html} readOnly />