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

docs(two-column-layout-example): add categories, brands and faq plugins #910

Conversation

FabienMotte
Copy link
Contributor

@FabienMotte FabienMotte commented Mar 2, 2022

This PR adds the categories, brands and faq plugins to the Autocomplete two columns layout example.

Main PR: #908

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 2, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e0c3ff1:

Sandbox Source
@algolia/autocomplete-example-github-repositories-custom-plugin Configuration
@algolia/autocomplete-example-instantsearch Configuration
algolia/autocomplete Configuration
@algolia/autocomplete-example-preview-panel-in-modal Configuration
algolia/autocomplete Configuration
algolia/autocomplete Configuration
algolia/autocomplete Configuration
@algolia/autocomplete-example-reshape Configuration
@algolia/autocomplete-example-vue Configuration

@FabienMotte FabienMotte force-pushed the docs/two-columns-layout-example-2 branch from 6b57c2e to d988a02 Compare March 3, 2022 10:50
@FabienMotte FabienMotte force-pushed the docs/two-columns-layout-example-3 branch from 3b137f9 to 5c6bc07 Compare March 3, 2022 10:53
@FabienMotte FabienMotte marked this pull request as ready for review March 3, 2022 11:57
@FabienMotte FabienMotte requested review from a team, dhayab and Haroenv and removed request for a team March 3, 2022 11:57
Copy link
Contributor

@Haroenv Haroenv left a comment

Choose a reason for hiding this comment

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

👍

Copy link
Member

@sarahdayan sarahdayan left a comment

Choose a reason for hiding this comment

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

A few comments:

  • All three plugins seem to share exactly the same logic, the only things that change are the data and templates. Would it make sense to have a single plugin?
  • The tag icon seems to be missing the top punch and the info icon seems to be missing the dot on the "i".
  • I find the uppercase letters in the breadcrumb a bit blocky. Wdyt about just capitalizing it?
  • Right before going into mobile view, the products stretch a lot in height, the prices "break" on several lines and so do the product names. Maybe we could limit it with line clamps and going with two rows?
    Capture d’écran 2022-03-08 à 11 28 58

examples/two-columns-layout/src/plugins/faqPlugin.tsx Outdated Show resolved Hide resolved
examples/two-columns-layout/src/plugins/faqPlugin.tsx Outdated Show resolved Hide resolved
examples/two-columns-layout/src/plugins/brandsPlugin.tsx Outdated Show resolved Hide resolved
examples/two-columns-layout/src/components/Breadcrumb.tsx Outdated Show resolved Hide resolved
@FabienMotte FabienMotte changed the title docs(two-columns-layout-example): add categories, brands and faq plugins docs(two-column-layout-example): add categories, brands and faq plugins Mar 8, 2022
@FabienMotte FabienMotte force-pushed the docs/two-columns-layout-example-2 branch 2 times, most recently from 47c2540 to f26f445 Compare March 9, 2022 17:36
@FabienMotte FabienMotte force-pushed the docs/two-columns-layout-example-3 branch from 5c6bc07 to 19f5ee9 Compare March 9, 2022 18:31
@FabienMotte
Copy link
Contributor Author

FabienMotte commented Mar 9, 2022

All three plugins seem to share exactly the same logic, the only things that change are the data and templates. Would it make sense to have a single plugin?

@sarahdayan All 3 plugins don't share much code, I don't see how would you do it?

@FabienMotte FabienMotte force-pushed the docs/two-columns-layout-example-3 branch from a350612 to 3a5daa8 Compare March 10, 2022 17:27
@Haroenv
Copy link
Contributor

Haroenv commented Mar 14, 2022

I find the uppercase letters in the breadcrumb a bit blocky. Wdyt about just capitalizing it?

Have we tried smallcaps?

@FabienMotte
Copy link
Contributor Author

I find the uppercase letters in the breadcrumb a bit blocky. Wdyt about just capitalizing it?

Have we tried smallcaps?

Seems fine to me with small caps!

image

@sarahdayan
Copy link
Member

sarahdayan commented Mar 25, 2022

Not a fan of smallcaps 😀 I personally think regular case works better.

@FabienMotte FabienMotte force-pushed the docs/two-columns-layout-example-2 branch from f26f445 to f2306a9 Compare March 28, 2022 16:32
@FabienMotte FabienMotte force-pushed the docs/two-columns-layout-example-3 branch from 3a5daa8 to be9bcf5 Compare March 28, 2022 16:33
* chore(two-columns-layout-example): add articles plugin

* chore(two-columns-layout-example): add popular plugin

* apply suggestions from code review

* docs(two-column-layout-example): add reshape functions and quick access plugin (#912)

* chore(two-columns-layout-example): add reshape functions

* docs(two-columns-layout-example): add quick access plugin

* chore: move reshape functions at file top-level

* apply suggestions from code review

* docs(two-column-layout-example): add smart preview feature (#913)

* docs(two-columns-layout-example): add smart preview feature

* docs(two-columns-layout-example): add faq article preview

* apply suggestions from code review

* docs(two-column-layout-example): add no results state and popular categories plugin (#914)

* docs(two-columns-layout-example): add no results state and popular categories plugin

* chore: fix empty div with Fragment

* chore: fix empty div when no recent searches exist

* chore: fix casing

* apply suggestions from code review

* apply suggestions from pair session

* fix empty recent searches

* fix linting

* apply suggestion from code review

* smart preview no longer depends on the DOM

* apply suggestions from feedback

* apply suggestions from feedback

* apply suggestion from code review

* apply suggestion from feedback
@FabienMotte FabienMotte merged commit 9384542 into docs/two-columns-layout-example-2 Mar 28, 2022
@FabienMotte FabienMotte deleted the docs/two-columns-layout-example-3 branch March 28, 2022 16:41
FabienMotte added a commit that referenced this pull request Mar 28, 2022
* docs(two-columns-layout-example): add products plugin

* apply suggestions from review

* remove useless type

* use classic header for recent searches and fix padding

* apply suggestions from code review

* docs(two-column-layout-example): add categories, brands and faq plugins (#910)

* chore(two-columns-layout-example): add categories plugin

* chore(two-columns-layout-example): add brands plugin

* chore(two-columns-layout-example): add faq plugin

* apply suggestions from code review

* remove debug option

* docs(two-column-layout-example): add articles and popular plugins (#911)

* chore(two-columns-layout-example): add articles plugin

* chore(two-columns-layout-example): add popular plugin

* apply suggestions from code review

* docs(two-column-layout-example): add reshape functions and quick access plugin (#912)

* chore(two-columns-layout-example): add reshape functions

* docs(two-columns-layout-example): add quick access plugin

* chore: move reshape functions at file top-level

* apply suggestions from code review

* docs(two-column-layout-example): add smart preview feature (#913)

* docs(two-columns-layout-example): add smart preview feature

* docs(two-columns-layout-example): add faq article preview

* apply suggestions from code review

* docs(two-column-layout-example): add no results state and popular categories plugin (#914)

* docs(two-columns-layout-example): add no results state and popular categories plugin

* chore: fix empty div with Fragment

* chore: fix empty div when no recent searches exist

* chore: fix casing

* apply suggestions from code review

* apply suggestions from pair session

* fix empty recent searches

* fix linting

* apply suggestion from code review

* smart preview no longer depends on the DOM

* apply suggestions from feedback

* apply suggestions from feedback

* apply suggestion from code review

* apply suggestion from feedback
FabienMotte added a commit that referenced this pull request Mar 29, 2022
* docs(examples): scaffold two columns layout example

* fix consistent naming

* chore: fix linting

* chore: fix styles

* chore: fix deps

* chore: add missing dep for Codesandbox

* apply suggestions from code review

* remove useless media queries

* apply suggestions from code review

* docs(two-column-layout-example): add products plugin (#909)

* docs(two-columns-layout-example): add products plugin

* apply suggestions from review

* remove useless type

* use classic header for recent searches and fix padding

* apply suggestions from code review

* docs(two-column-layout-example): add categories, brands and faq plugins (#910)

* chore(two-columns-layout-example): add categories plugin

* chore(two-columns-layout-example): add brands plugin

* chore(two-columns-layout-example): add faq plugin

* apply suggestions from code review

* remove debug option

* docs(two-column-layout-example): add articles and popular plugins (#911)

* chore(two-columns-layout-example): add articles plugin

* chore(two-columns-layout-example): add popular plugin

* apply suggestions from code review

* docs(two-column-layout-example): add reshape functions and quick access plugin (#912)

* chore(two-columns-layout-example): add reshape functions

* docs(two-columns-layout-example): add quick access plugin

* chore: move reshape functions at file top-level

* apply suggestions from code review

* docs(two-column-layout-example): add smart preview feature (#913)

* docs(two-columns-layout-example): add smart preview feature

* docs(two-columns-layout-example): add faq article preview

* apply suggestions from code review

* docs(two-column-layout-example): add no results state and popular categories plugin (#914)

* docs(two-columns-layout-example): add no results state and popular categories plugin

* chore: fix empty div with Fragment

* chore: fix empty div when no recent searches exist

* chore: fix casing

* apply suggestions from code review

* apply suggestions from pair session

* fix empty recent searches

* fix linting

* apply suggestion from code review

* smart preview no longer depends on the DOM

* apply suggestions from feedback

* apply suggestions from feedback

* apply suggestion from code review

* apply suggestion from feedback

* remove smart preview for now

* add quick access selected transition

* fix see all link margin

* add getItemInputValue for faq

* apply feedback

* apply feedback

* apply feedback

* apply last fixes
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.

3 participants