Adding some docs for evergreen's Autocomplete #162

fforres · 2018-03-19T19:00:25Z

Adding some docs for evergreen's Autocomplete
I kept having some props error, so I changed TextTableCell prop textProps to be PropTypes.shape(Text.propTypes) instead of a PropTypes.shape(PropTypes.object)

jeroenransijn

Looks awesome! I left some minor feedback on nomenclature.

jeroenransijn · 2018-03-19T23:19:36Z

src/autocomplete/docs/index.js

+})
+
+const title = 'Autocomplete'
+const subTitle = 'A component to filter trhough a dataset'


A component to filter through a list of options

jeroenransijn · 2018-03-19T23:21:24Z

src/autocomplete/docs/index.js

+const title = 'Autocomplete'
+const subTitle = 'A component to filter trhough a dataset'
+
+const introduction = (


introduction => implementationDetails.

introductions should try to use accessible language to both designers and engineers on the long run.

We can ignore the introduction and just use implementationDetails instead.

jeroenransijn · 2018-03-19T23:22:14Z

src/autocomplete/docs/index.js

+
+const components = [
+ {
+ name: 'AutoComplete',


Autocomplete

jeroenransijn · 2018-03-19T23:22:16Z

src/autocomplete/docs/index.js

+
+const description = (
+ <p>
+ The <code>AutoComplete</code> component.


The Autocomplete component.

jeroenransijn · 2018-03-19T23:32:48Z

src/autocomplete/docs/index.js

+ <div>
+ <p>
+ The <code>Autocomplete</code> components implements a{' '}
+ <code>VirtualList</code> inside a React Portal, list and to be enable


The Autocomplete renders a filterable list of options in a Popover — it does not render the text input. If you need a combination with a text input and trigger button, take a look at the Combobox component. This component is mainly used to create type aheads.

The Autocomplete component combines a set of external libraries

Uses Downshift for autocomplete

Uses react-tiny-virtual-list for performant list rendering

Uses fuzzaldrin-plus for fuzzy filtering

jeroenransijn · 2018-03-19T23:32:56Z

src/autocomplete/docs/index.js

+ </div>
+)
+
+const designGuidelines = (


We can delete this if it's empty

jeroenransijn · 2018-03-19T23:34:43Z

src/autocomplete/docs/index.js

+ scope
+ },
+ {
+ title:


title: 'Fully Featured Example'
description: 'Full width (using flex) example with options, title, onFocus, filtering, and a button to trigger the autocomplete''

jeroenransijn · 2018-03-19T23:36:27Z

src/autocomplete/src/Autocomplete.js

 children: PropTypes.func.isRequired,
+ /**
+ * Proptype to set the lits items size beforehand for the virtual list to render properly.


The height of each item. Because the list is virtualized this is required beforehand.

jeroenransijn · 2018-03-19T23:36:49Z

src/autocomplete/src/Autocomplete.js

 itemSize: PropTypes.number,
+ /**
+ * Function that returns a component to render the iist item.


Function that returns a component to render the item.

jeroenransijn · 2018-03-19T23:38:17Z

src/autocomplete/src/Autocomplete.js

 renderItem: PropTypes.func,
+ /**
+ * Function used to filter items it should just return a subset of the initial items.


A function that is used to filter the items. It should return a subset of the initial items. By default the "fuzzaldrin-plus" package is used.

fforres · 2018-03-20T00:41:18Z

Updated comments @jeroenransijn :D

jeroenransijn · 2018-03-20T18:54:11Z

src/autocomplete/docs/index.js

+ <div>
+ <p>
+ The <code>Autocomplete</code> components renders a filterable list of
+ options in a Popover — it does not render the text input - If you need a


Being a type nazi here. hyphen (-) is not an em dash (—). Please use a em dash in this case. Learn more here: https://practicaltypography.com/hyphens-and-dashes.html

Note that because code editors uses a monospace font, it doesn't look any different in the code editor.

jeroenransijn · 2018-03-20T22:16:50Z

docs/src/utils/getComponent.js

- 'search input': searchInputDocs,
- icons: iconsDocs
+ icons: iconsDocs,
+ autocomplete: autocompleteDocs


Unfortunate merge :(

jeroenransijn · 2018-03-20T23:23:54Z

@fforres 🥇 👍 🎉 🌲

@jeroenransijn

* 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

@jeroenransijn

* 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

@jeroenransijn

* 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

@jeroenransijn

* Docs corner dialog (segmentio#165) * breaking improvements and docs corner dialog * minor copy update * docs and bbreaking improvements (segmentio#167) * label change * Improves Popover, Positioner, Overlay and Side Sheet (segmentio#169) * Adding some docs for evergreen's Autocomplete (segmentio#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 (segmentio#165) * breaking improvements and docs corner dialog * minor copy update * docs and bbreaking improvements (segmentio#167) * label change * improvements positioner, popover and tooltip * update Autocomplete and Combobox * improved positioner * improved components * unify system (segmentio#168) * Focus support dialog (segmentio#170) * improved focus management dialog * focus management docs dialog * tooltip docs (segmentio#171) * tooltip docs * improve tooltip + links * combobox docs (segmentio#172) * export Position * remove old readmes * Docs radio (breaking change) (segmentio#177) * segmented control docs (segmentio#176) * radio docs * is required prop * doc text * improved focus handling (segmentio#178) * fix rowno comments * added isInvalid back to radio * default position prop tooltip * 3.0.0

fforres added 10 commits March 19, 2018 09:16

adding eslint for IDE && initial commit

05ed393

Adding all default exapmples

b176f46

fix lint

a99af85

default export

6a81920

package

9afa5c8

marker

8fbdbc7

Adding some more options

04e8a68

Adding proptypes explanation

7721a76

fixing textProps

d122b35

remove children

a79f2dc

fforres requested review from jeroenransijn and Rowno March 19, 2018 20:18

Merge branch 'master' into fforres/docs

16fa176

jeroenransijn suggested changes Mar 19, 2018

View reviewed changes

Adressing comments from @jeroenransijn

3c4a9ce

jeroenransijn reviewed Mar 20, 2018

View reviewed changes

fforres and others added 2 commits March 20, 2018 13:54

adding emdash

7f1c4fb

Merge branch 'master' into fforres/docs

b84b07a

jeroenransijn reviewed Mar 20, 2018

View reviewed changes

Update

994915e

jeroenransijn approved these changes Mar 20, 2018

View reviewed changes

jeroenransijn merged commit 528e01a into master Mar 20, 2018

jeroenransijn deleted the fforres/docs branch March 20, 2018 23:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding some docs for evergreen's Autocomplete #162

Adding some docs for evergreen's Autocomplete #162

fforres commented Mar 19, 2018

jeroenransijn left a comment

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

jeroenransijn Mar 19, 2018

fforres commented Mar 20, 2018

jeroenransijn Mar 20, 2018

jeroenransijn Mar 20, 2018 •

edited

Loading

jeroenransijn Mar 20, 2018

fforres Mar 20, 2018

jeroenransijn commented Mar 20, 2018

Adding some docs for evergreen's Autocomplete #162

Adding some docs for evergreen's Autocomplete #162

Conversation

fforres commented Mar 19, 2018

jeroenransijn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

The Autocomplete component combines a set of external libraries

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fforres commented Mar 20, 2018

Choose a reason for hiding this comment

jeroenransijn Mar 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeroenransijn commented Mar 20, 2018

jeroenransijn Mar 20, 2018 •

edited

Loading