Skip to content

Commit

Permalink
Adds autocomplete components (#1490)
Browse files Browse the repository at this point in the history
* adds token components

* adds component that renders a text input with tokens

* adds autocomplete components

* updates AutocompleteMenu component API to be more like SelectPanel

* Format token files with Prettier

* bugfixes for using AutocompleteMenu outside of AutocompleteOverlay

- allows the user to pass a custom scrollContainerRef if the menu is rendered inside a scrolling element besides AutocompleteOverlay
- hides the AutocompleteMenu when it is rendered outside of the AutocompleteOverlay component

* updates Storybook with more complete demos of the Autocomplete components' functionality

* memoize functions and other data created inside the component

* Update docs/content/Token.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update src/Token/TokenBase.tsx

Co-authored-by: Cole Bemis <colebemis@github.com>

* addresses first batch of changes requested in code review

* Update src/stories/TextInputWithTokens.stories.tsx

Co-authored-by: Cole Bemis <colebemis@github.com>

* fixes issue label remove button in Storybook

* refactors TokenBase to do less inside the 'styled' function

* renames LabelToken to IssueLabelToken

* renames TokenProfile to ProfileToken

* allows link tokens to have clickable 'x', fixes keyboard nav for IssueLabelTokens, fixes IssueLabelToken import typo

* renames token size keys from abbreviated sizes to full word

* Update src/TextInputWithTokens.tsx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update src/TextInputWithTokens.tsx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/TextInputWithTokens.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* pulls in updates to Token components, changes 'tokenSizeVariant' prop to 'size'

* define type of 'tokens' prop based on the type of 'tokenComponent' prop

* corrects the typo that caused the backspacing bug

* fixes filtering bug caused by incomplete dependency list

* only selects items when menu is visible, disables native input autocomplete

* renames event args from 'e' to 'event'

* runs lint:fix

* runs lint:fix

* runs lint:fix

* updates comments in TextInputWithTokens

* changes IssueLabelToken's implementation of color transform to match Memex and dotcom

* updates package-lock

* rms tinycolor2 types

* improves Storybook stories

* improves Storybook stories, fixes maxHeight and preventTokenWrapping style bugs

* adds missing dependency to IssueLabelToken style object

* configure Storybook controls for token stories

* rms storybook-addon/knobs

* improve IssueLabelToken isSelected+focus style, fix lineHeight

* adds tests

* fixes ESLint errors

* Update src/Token/Token.tsx

Co-authored-by: Cole Bemis <colebemis@github.com>

* adds tests

* adds more tests, fixes ESLint errors

* removes Knobs tab from Storybook

* Storybook updates

* updates docs

* fixes bug where autocomplete items would not deselect

* fixes ESLint errors

* improve click target area for interactive tokens

* updates token size keys, renames Token test file

* updates docs

* updates snapshots

* updates default 'size' prop, updates docs

* fixes lint errors in docs mdx file

* reverts changes to TextInput

* fixes bad merge with utils/types

* adds tests, does minor cleanup

* rms unused vars

* Update docs/content/Token.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* addresses more code review feedback

* Update docs/content/TextInputTokens.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update src/index.ts

Co-authored-by: Cole Bemis <colebemis@github.com>

* updates snapshots for AvatarToken name change

* adds TextInputWithTokens to React docs sidebar

* fixes import errors in test file

* updates textinputwithtokens snapshots

* checks for window obj before rendering portalled content

* renders prop tables in Token docs

* adds props table to TextInputWithTokens docs

* adds prop tables to autocomplete docs

* rms missing exports

* fixes bundlesize issue, improves cursor UX for non-interactive tokens

* updates snapshots

* addresses most of the PR feedback from @jfuchs

* resolve text clipping styling issue in docs

* moves scrollIntoViewingArea to behaviors and adds tests

* fixes broken examples

* adds autocomplete component types to the exports

* adds changeset

Co-authored-by: Cole Bemis <colebemis@github.com>
  • Loading branch information
mperrotti and colebemis committed Oct 13, 2021
1 parent 273ef29 commit c156b07
Show file tree
Hide file tree
Showing 23 changed files with 6,148 additions and 33 deletions.
5 changes: 5 additions & 0 deletions .changeset/khaki-apples-applaud.md
@@ -0,0 +1,5 @@
---
'@primer/components': minor
---

Adds `Autocomplete`, `AutocompleteMenu`, `AutocompleteInput`, and `AutocompleteOverlay` components

0 comments on commit c156b07

Please sign in to comment.