olmps / memo

Memo is an open-source, programming-oriented spaced repetition software (SRS) written in Flutter.
BSD 3-Clause "New" or "Revised" License
1.82k stars 158 forks source link

[Collection Creation] - Tags Component #217

Closed ggirotto closed 2 years ago

ggirotto commented 2 years ago

Summary

Create the tags selection component which will be used in the collection creation Details Page.

Business Rules

The tags field must autocomplete the user text with the tags that starts with the matching text. We will suggest to the user at most 3 (it may have less, including 0) tags based on the text input. In the end of these suggested tags list, it must have a CREATE TAG button, which will create a new tag with the text input. It shouldn't be possible to create an empty tag ("").

The user may remove the tags by tapping the x button in the right corner of the tags.

If the tags width is greater than the screen width, it must wrap the tags below each other, similar how Flutter's Wrap Widget works (this will impact the field height, which should adjust itself based on the new content height).

The tags must have at most 20 characters and they can have space.

Screenshots

Tags component ![CleanShot 2021-10-27 at 16 51 55](https://user-images.githubusercontent.com/11745745/139138480-14c69af9-3f30-4730-b1b4-7cc246e012fb.png)