[FEATURE]: As a shopper, I want the search box to have an animated placeholder

herrardo commented 2 years ago

How can the project be improved?

To have an animated placeholder showing different messages to inspire the shopper to type different types of queries.

https://user-images.githubusercontent.com/4663897/160593353-64ff623c-af1f-4957-bab3-948efa45d839.mov

Even though in the video only one part of the string is animated, the idea is to animate the whole string to make things easier. So find won't be in a fixed position and will move with the rest of the string.

How can this be solved?

Hover scenario

Given a shopper who is going to type in the search box when the user hovers the search box then the placeholder is animated showing different messages when the user clicks on the search box and the input get focused then the placeholder disappears to start typing.

Normal scenario

Given a shopper who is going to type in the search box then the placeholder is animated showing different messages when the user clicks on the search box and the input get focused then the placeholder disappears to start typing.

Proposed solution

An idea could be to create a SearchInputPlaceholder component that can coexist with the SearchInput component.

Customizations supported

The text of the messages have to be configurable
The number of different texts is configurable
The animation can happen on hover
The animation can happen before the hover

Additional information

This is the module where this task has to be done: https://github.com/empathyco/x/tree/main/packages/x-components/src/x-modules/search-box

SearcInput documentation

Have a look at the Contributing Guidelines ;)

Code of Conduct

[X] I agree to follow this project's Code of Conduct.

jtomasdias00 commented 2 years ago

Hi @herrardo

My colleague @brunorodrigues1999 and I are students at the masters program in software engineering at FEUP (https://paginas.fe.up.pt/~estudar/mesw/). As part of evaluating one of our curricular units, we need to choose an open-source project and fix an issue. We would like to know if we could help with this issue? Thanks!

herrardo commented 2 years ago

Yes sure @jtomasdias00 and @BrunoRodrigues1999!

Have a look to the Contrib Guidelines first

herrardo commented 2 years ago

Good morning @jtomasdias00 Are you guys still working on this? Just let us know if you need something.

BrunoRodrigues1999 commented 2 years ago

Good morning @jtomasdias00 Are you guys still working on this? Just let us know if you need something.

Hi @herrardo , we already started working on the project, nevertheless we are having some issues when setting up the same Captura de ecrã 2022-05-09 160453

herrardo commented 2 years ago

Good morning @jtomasdias00 Are you guys still working on this? Just let us know if you need something.

Hi @herrardo , we already started working on the project, nevertheless we are having some issues when setting up the same

@jtomasdias00 Sorry guys! Didn't realize about the comment. Try to change to node v14.18.0

BrunoRodrigues1999 commented 2 years ago

Hi @herrardo . After applying the suggested changes there is still some issues Captura de ecrã 2022-05-13 163801

herrardo commented 2 years ago

Restore to initial state and Try npm ci instead of npm install @BrunoRodrigues1999

Otherwise I will connect on discord on Monday ;)

BrunoRodrigues1999 commented 2 years ago

Still not there yet. Discord it is... Captura de ecrã 2022-05-14 090352

herrardo commented 2 years ago

@BrunoRodrigues1999 We have done some research and there might be a problem with the build in Windows systems. Please try to delete the node_modules folder, and the package-lock.json file, and then do npm install to see if that solves the problem. In another case, I will open an issue for the team to review the build in Windows.

BrunoRodrigues1999 commented 2 years ago

Hi @herrardo , even deleting the package-lock.json didn't do the trick. Seems to be an issue from your side

herrardo commented 2 years ago

It is. So sorry guys, I am opening an issue to correct it.

herrardo commented 2 years ago

Bug created https://github.com/empathyco/x/issues/492 And PR to solve it https://github.com/empathyco/x/pull/493

Thanks to @JaviIG :)

@BrunoRodrigues1999 You can merge the branch of the PR #493 in your branch to see if it solves your problem if you want to try before the PR is approved.

BrunoRodrigues1999 commented 2 years ago

Hi @herrardo , i've just cloned @JaviIG repo with the fix. It indeed solved the npm install problem that we had.I' ve also ran npm run build. After that i npm run serve and got the following... Don't know if I'm in the right path to run the project in localhost.

herrardo commented 2 years ago

When running npm run serve at the root of the project you are launching the server for each one of the packages that have a server associated.

To just run the X Components, which is the project you are interested in to develop the feature, you can run npm run serve setting the x-components folder as the working directory in the terminal as explained in the x-components README

alonsogarciapablo commented 2 years ago

Hey!

I built a prototype to play with this idea (and the Animations API):

animated-placeholder

code: https://codepen.io/alonsogarciapablo/pen/ExExewx

Some considerations:

Given that users can navigate to the search input using the keyboard, I think it'd be useful to animate the placeholder when the search input has the focus (instead of relying on the mouse only).
It would be useful to provide different animations. I implemented slide in/out and fade in/out, but more animations could be implemented (eg: a typewriter effect, as in https://remoteok.com/).
Animations should also be configurable (eg: the duration/speed, etc.).
It would be great to provide a way to define custom animations.

Before this gets implemented, it would be useful to agree on what the interface/API for the SearchInputPlaceholder component will look like. Some questions: How will someone pass the different placeholders? How will someone configure the animation(s)? Will this component have to be used inside the SearchInput (eg: in a slot) so that it gets automagically positioned on top of the input or should it be used outside (like the ClearSearchInput) and developers should "manually" position it on top of the SearchInput?

alvarodE commented 2 years ago

This issue is being closed by implementing a new SearchInputPlaceholder component as part of the SearchBox XModule. An example of how to use it can be found here.

The new component is avaliable from @empathyco/x-components@3.0.0-alpha.196 (2022-10-19).

empathyco / x