V3 Interaction Pattern Improvements and Docs (#173)

* Docs corner dialog (#165)

* breaking improvements and docs corner dialog

* minor copy update

* docs and bbreaking improvements (#167)

* label change

* Improves Popover, Positioner, Overlay and Side Sheet (#169)

* Adding some docs for evergreen's Autocomplete (#162)

* adding eslint for IDE && initial commit

* Adding all default exapmples

* fix lint

* default export

* package

* marker

* Adding some more options

* Adding proptypes explanation

* fixing textProps

* remove children

* Adressing comments from @jeroenransijn

* adding emdash

* Update

* Docs corner dialog (#165)

* breaking improvements and docs corner dialog

* minor copy update

* docs and bbreaking improvements (#167)

* label change

* improvements positioner, popover  and tooltip

* update Autocomplete and Combobox

* improved positioner

* improved components

* unify system (#168)

* Focus support dialog (#170)

* improved focus management dialog

* focus management docs dialog

* tooltip docs (#171)

* tooltip docs

* improve tooltip + links

* combobox docs (#172)

* export Position

* remove old readmes

* Docs radio (breaking change) (#177)

* segmented control docs (#176)

* radio docs

* is required prop

* doc text

* improved focus handling (#178)

* fix rowno comments

* added isInvalid back to radio

* default position prop tooltip

* 3.0.0

docs/src/componentRoutes.js

@@ -3,6 +3,10 @@ module.exports = [
     name: 'Segmented Control',
     path: '/components/segmented-control'
   },
+  {
+    name: 'Radio',
+    path: '/components/radio'
+  },
   {
     name: 'Alert',
     path: '/components/alert'
@@ -11,10 +15,18 @@ module.exports = [
     name: 'Buttons',
     path: '/components/buttons'
   },
+  {
+    name: 'Combobox',
+    path: '/components/combobox'
+  },
   {
     name: 'Dialog',
     path: '/components/dialog'
   },
+  {
+    name: 'Corner Dialog',
+    path: '/components/corner-dialog'
+  },
   {
     name: 'Table',
     path: '/components/table'
@@ -40,10 +52,18 @@ module.exports = [
     name: 'Select Menu',
     path: '/components/select-menu'
   },
+  {
+    name: 'Side Sheet',
+    path: '/components/side-sheet'
+  },
   {
     name: 'Text Input',
     path: '/components/text-input'
   },
+  {
+    name: 'Tooltip',
+    path: '/components/tooltip'
+  },
   {
     name: 'Search Input',
     path: '/components/search-input'
@@ -55,6 +75,10 @@ module.exports = [
   {
     name: 'Autocomplete',
     path: '/components/autocomplete'
+  },
+  {
+    name: 'Popover',
+    path: '/components/popover'
   }
 ].sort((a, b) => {
   // Lazy way to sort this list so I don't have

docs/src/utils/getComponent.js

@@ -6,31 +6,32 @@ import layersDocs from '../../../src/layers/docs/'
 import buttonsDocs from '../../../src/buttons/docs'
 import iconsDocs from '../../../src/icons/docs/'
 import autocompleteDocs from '../../../src/autocomplete/docs/'
-// import comboboxDocs from '../../src/combobox/docs/'
+import comboboxDocs from '../../../src/combobox/docs/'
 // import badgesDocs from '../../src/badges/docs/'
 // import selectDocs from '../../src/select/docs/'
-// import popoverDocs from '../../src/popover/docs/'
+import popoverDocs from '../../../src/popover/docs/'
 // import portalDocs from '../../src/portal/docs/'
 import textInputDocs from '../../../src/text-input/docs/'
 // import textareaDocs from '../../src/textarea/docs/'
 // import checkboxDocs from '../../src/checkbox/docs/'
 // import tabsDocs from '../../src/tabs/docs/'
 // import avatarDocs from '../../src/avatar/docs/'
-// import tooltipDocs from '../../src/tooltip/docs/'
+import tooltipDocs from '../../../src/tooltip/docs/'
 // import imageDocs from '../../src/image/docs/'
 import segmentedControlDocs from '../../../src/segmented-control/docs/'
 // import spinnerDocs from '../../src/spinner/docs/'
 import searchInputDocs from '../../../src/search-input/docs/'
 import tableDocs from '../../../src/table/docs/'
-// import sideSheetDocs from '../../src/side-sheet/docs/'
-// import radioDocs from '../../src/radio/docs/'
+import sideSheetDocs from '../../../src/side-sheet/docs/'
+import radioDocs from '../../../src/radio/docs/'
 import dialogDocs from '../../../src/dialog/docs/'
-// import cornerDialogDocs from '../../src/corner-dialog/docs/'
+import cornerDialogDocs from '../../../src/corner-dialog/docs/'
 import alertDocs from '../../../src/alert/docs/'
 import toasterDocs from '../../../src/toaster/docs/'
 import selectMenuDocs from '../../../src/select-menu/docs/'
 
 const map = {
+  radio: radioDocs,
   'segmented control': segmentedControlDocs,
   buttons: buttonsDocs,
   table: tableDocs,
@@ -42,9 +43,14 @@ const map = {
   colors: colorsDocs,
   'select menu': selectMenuDocs,
   'text input': textInputDocs,
-  icons: iconsDocs,
+  'search input': searchInputDocs,
   autocomplete: autocompleteDocs,
-  'search input': searchInputDocs
+  'corner dialog': cornerDialogDocs,
+  icons: iconsDocs,
+  'side sheet': sideSheetDocs,
+  popover: popoverDocs,
+  tooltip: tooltipDocs,
+  combobox: comboboxDocs
 }
 
 export default function getComponent(name) {

package.json

@@ -1,9 +1,9 @@
 {
   "name": "evergreen-ui",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "🌲 React UI Kit by Segment 🌲",
   "contributors": [
-    "Jeroen Ransijn (https://twitter.com/jeroen_ransijn)",
+    "Jeroen Ransijn (https://jssr.design/)",
     "Roland Warmerdam (https://roland.codes)"
   ],
   "keywords": ["evergreen", "segment", "ui", "react"],
@@ -39,6 +39,7 @@
     "downshift": "^1.16.0",
     "fuzzaldrin-plus": "^0.6.0",
     "glamor": "^2.20.40",
+    "lodash.debounce": "^4.0.8",
     "lodash.mapvalues": "^4.6.0",
     "object-values": "^1.0.0",
     "prop-types": "^15.0.0",

src/autocomplete/docs/examples/default-basic.example

@@ -4,10 +4,9 @@
   items={items}
 >
   {(props) => {
-    const { key, getInputProps, getRef, inputValue } = props
+    const { getInputProps, getRef, inputValue } = props
     return (
       <TextInput
-        key={key}
         placeholder="Starwars names"
         value={inputValue}
         innerRef={getRef}

src/autocomplete/docs/examples/default-with-children-prop.example

@@ -3,10 +3,9 @@
   onChange={(changedItem) => console.log(changedItem)}
   items={items}
   children={(props) => {
-    const { key, getInputProps, getRef, inputValue } = props
+    const { getInputProps, getRef, inputValue } = props
     return (
       <TextInput
-        key={key}
         placeholder="Starwars names"
         value={inputValue}
         innerRef={getRef}

src/autocomplete/docs/examples/filterDisabled-basic.example

@@ -3,9 +3,8 @@
   onChange={(changedItem) => console.log(changedItem)}
   items={items}
 >
-  {({ key, getInputProps, openMenu, getRef, inputValue }) => (
+  {({ getInputProps, openMenu, getRef, inputValue }) => (
     <TextInput
-      key={key}
       placeholder="Disable filter and open on focus"
       value={inputValue}
       innerRef={ref => getRef(ref)}

src/autocomplete/docs/examples/onFocus-basic.example

@@ -2,9 +2,8 @@
   onChange={(changedItem) => console.log(changedItem)}
   items={items}
 >
-  {({ key, getInputProps, getRef, openMenu, inputValue }) => (
+  {({ getInputProps, getRef, openMenu, inputValue }) => (
     <TextInput
-      key={key}
       placeholder="Open on focus"
       value={inputValue}
       innerRef={ref => getRef(ref)}

src/autocomplete/docs/examples/withButton-basic.example

@@ -3,14 +3,13 @@
   items={items}
 >
   {({
-    key,
     getInputProps,
     getButtonProps,
     getRef,
     inputValue,
     toggleMenu
   }) => (
-    <Box key={key} innerRef={ref => getRef(ref)} display="inline-block">
+    <Box innerRef={ref => getRef(ref)} display="inline-block">
       <TextInput
         placeholder="Trigger with button"
         value={inputValue}

src/autocomplete/docs/examples/withTitle-basic.example

@@ -3,9 +3,8 @@
   onChange={(changedItem) => console.log(changedItem)}
   items={items}
 >
-  {({ key, getInputProps, getRef, openMenu, inputValue }) => (
+  {({ getInputProps, getRef, openMenu, inputValue }) => (
     <TextInput
-      key={key}
       placeholder="Open on focus with title"
       value={inputValue}
       innerRef={ref => getRef(ref)}

src/autocomplete/docs/index.js

@@ -22,11 +22,7 @@ import exampleWithButtonBasic from './examples/withButton-basic.example'
 import exampleWithManyOptions from './examples/allOptions.example'
 
 // Generate a big list of items
-const items = [
-  ...starWarsNames.all,
-  ...starWarsNames.all.map(x => `${x} 2`),
-  ...starWarsNames.all.map(x => `${x} 3`)
-].sort((a, b) => {
+const items = starWarsNames.all.sort((a, b) => {
   const nameA = a.toUpperCase()
   const nameB = b.toUpperCase()
   if (nameA < nameB) {
@@ -49,21 +45,19 @@ const implementationDetails = (
       combination with a text input and trigger button, take a look at the
       Combobox component. This component is mainly used to create type aheads
     </p>
-    <p>
-      <b>The Autocomplete component combines a set of external libraries</b>
-      <ul>
-        <li>
-          Uses <code>Downshift</code> for autocomplete
-        </li>
-        <li>
-          Uses <code>react-tiny-virtual-list</code> for performant list
-          rendering
-        </li>
-        <li>
-          Uses <code>fuzzaldrin-plus</code> for fuzzy filtering
-        </li>
-      </ul>
-    </p>
+
+    <h3>The Autocomplete Component Combines a Set of External Libraries</h3>
+    <ul>
+      <li>
+        Uses <code>Downshift</code> for autocomplete
+      </li>
+      <li>
+        Uses <code>react-tiny-virtual-list</code> for performant list rendering
+      </li>
+      <li>
+        Uses <code>fuzzaldrin-plus</code> for fuzzy filtering
+      </li>
+    </ul>
   </div>
 )