Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web & vue): icons added for recent & popular searches #1635

Merged
merged 19 commits into from Apr 10, 2021

Conversation

anik-ghosh-au7
Copy link
Contributor

@anik-ghosh-au7 anik-ghosh-au7 commented Mar 26, 2021

Before submitting a pull request, please make sure the following is done:

  • Describe the proposed changes and how it'll improve the library experience.

The below-mentioned changes are applicable for the DataSearch and Category components

  1. Default icons added for recent and popular searches
  2. Support added to override default icons though - recentSearchesIcon or popularSearchesIcon props
  3. Support added to customize the icons through the recent-search-icon or
    popular-search-icon keys of the innerClass prop
  • Please make sure that there are no linting errors in the code.

  • Add a demo video/gif/screenshot to explain how did you test the fix.

  1. Demo (web) - https://www.loom.com/share/139ecfafe0a245a0acc995f409f7761d
  2. Demo (vue) - https://www.loom.com/share/c326e5b28fd6479e973f1658451fa1c6
  1. Playground - feat: example added for datasearch with custom suggestion icons playground#65
  2. Vue Playground - feat: example added for datasearch with custom suggestion icons vue-playground#26

@siddharthlatest
Copy link
Member

siddharthlatest commented Mar 26, 2021

@anik-ghosh-au7 Can we use idiomatic naming convention for the innerClass keys? We can use the same name for them as the class names.

Can you also include a link to the doc changes PR associated with this enhancement?

We should include a storybook story for the same.

@anik-ghosh-au7
Copy link
Contributor Author

@siddharthlatest I will make the changes and create the PR for docs

@anik-ghosh-au7 anik-ghosh-au7 changed the title feat(web): icons added for recent & popular searches feat(web & web): icons added for recent & popular searches Mar 26, 2021
@anik-ghosh-au7 anik-ghosh-au7 changed the title feat(web & web): icons added for recent & popular searches feat(web & vue): icons added for recent & popular searches Mar 26, 2021
Copy link
Contributor

@bietkul bietkul left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anik-ghosh-au7 Make the following changes:

  • The default color of the icon doesn't match the suggestion text. The color of the icons is dark and bold which catches the user’s eye from the suggestion.
    alt i

Share a demo after making the changes.

packages/web/src/components/shared/PopularSvg.js Outdated Show resolved Hide resolved
packages/web/src/components/shared/RecentSvg.js Outdated Show resolved Hide resolved
packages/vue/src/components/shared/PopularSvg.js Outdated Show resolved Hide resolved
packages/vue/src/components/shared/PopularSvg.js Outdated Show resolved Hide resolved
packages/vue/src/components/shared/RecentSvg.js Outdated Show resolved Hide resolved
packages/web/src/components/search/CategorySearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/CategorySearch.js Outdated Show resolved Hide resolved
packages/vue/src/components/search/DataSearch.jsx Outdated Show resolved Hide resolved
packages/vue/src/components/search/DataSearch.jsx Outdated Show resolved Hide resolved
packages/vue/src/components/search/DataSearch.jsx Outdated Show resolved Hide resolved
@anik-ghosh-au7
Copy link
Contributor Author

anik-ghosh-au7 commented Apr 9, 2021

packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/vue/src/components/shared/CustomSvg.js Outdated Show resolved Hide resolved
packages/vue/src/components/search/DataSearch.jsx Outdated Show resolved Hide resolved
@anik-ghosh-au7
Copy link
Contributor Author

@bietkul, I have made the above changes

Final demo -

https://www.loom.com/share/3738113fe17844fba38f24b46884ca18

packages/vue/src/components/search/DataSearch.jsx Outdated Show resolved Hide resolved
packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/DataSearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/CategorySearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/CategorySearch.js Outdated Show resolved Hide resolved
packages/web/src/components/search/CategorySearch.js Outdated Show resolved Hide resolved
@bietkul bietkul merged commit 20ddf4d into appbaseio:next Apr 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants