Skip to content

feat(refinement-list): implement InstantSearch.css #3152

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.

Sign up for GitHub

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

Merged
francoischalifour merged 16 commits into from
Oct 3, 2018
Merged

feat(refinement-list): implement InstantSearch.css #3152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
123b7bd
feat(refinement-list): apply new options, markup and css
francoischalifour Sep 27, 2018
0233f9d
feat(refinement-list): update stories
francoischalifour Sep 27, 2018
2c1cfcf
feat(refinement-list): support noRefinement class
francoischalifour Sep 27, 2018
a9cd7ee
feat(refinement-list): update noRefinement class condition
francoischalifour Sep 27, 2018
88facbd
refactor: reorder imports
francoischalifour Sep 27, 2018
6ba58dd
docs(migration): conver JSX to HTML
francoischalifour Sep 27, 2018
28f5f71
refactor(test): reorder props
francoischalifour Sep 27, 2018
5fd3a49
feat(refinement-list): default to `mark` tags
francoischalifour Sep 27, 2018
dcb75c6
revert: convert JSX to HTML
francoischalifour Sep 27, 2018
9b6b41b
feat: apply changes
francoischalifour Oct 2, 2018
6e0664a
test(refinement-list): migrate tests to Enzyme
francoischalifour Oct 2, 2018
e93925c
fix: remove unnecessary cssClasses prop types
francoischalifour Oct 2, 2018
da00e80
fix(refinement-list): fix disabledShowMore class
francoischalifour Oct 2, 2018
eea32e2
test(refinement-list): test show more rendering
francoischalifour Oct 2, 2018
884425e
feat(refinement-list): use single class name for item component
francoischalifour Oct 3, 2018
b7db199
test(RefinementList): migrate from Sinon to Jest
francoischalifour Oct 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 13 additions & 35 deletions dev/app/builtin/stories/refinement-list.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,9 @@ export default () => {
window.search.addWidget(
instantsearch.widgets.refinementList({
container,
attributeName: 'brand',
attribute: 'brand',
operator: 'or',
limit: 10,
templates: {
header: 'Brands',
},
})
);
})
Expand All @@ -30,16 +27,13 @@ export default () => {
window.search.addWidget(
instantsearch.widgets.refinementList({
container,
attributeName: 'brand',
attribute: 'brand',
operator: 'or',
limit: 3,
templates: {
header: 'Brands with show more',
},
showMore: {
templates: {
active: '<button>Show less</button>',
inactive: '<button>Show more</button>',
active: 'Show less',
inactive: 'Show more',
Copy link
Contributor

@samouss samouss Oct 2, 2018

Choose a reason for hiding this comment

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

I thought at some point we discussed about putting all the templates together rather than having multiple templates across options.

Copy link
Contributor Author

@francoischalifour francoischalifour Oct 2, 2018

Choose a reason for hiding this comment

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

It would make sense. Do you mean something like this?

{
  templates: {
    showMoreActive: '',
	showMoreInactive: '',
  }
}

Copy link
Contributor

@samouss samouss Oct 2, 2018

Choose a reason for hiding this comment

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

Yes - same for searchable. But we can do it in another pass no worries.

},
limit: 10,
},
Expand All @@ -53,13 +47,10 @@ export default () => {
window.search.addWidget(
instantsearch.widgets.refinementList({
container,
attributeName: 'brand',
attribute: 'brand',
operator: 'or',
limit: 10,
templates: {
header: 'Searchable brands',
},
searchForFacetValues: {
searchable: {
placeholder: 'Find other brands...',
templates: {
noResults: 'No results',
Expand All @@ -75,13 +66,10 @@ export default () => {
window.search.addWidget(
instantsearch.widgets.refinementList({
container,
attributeName: 'brand',
attribute: 'brand',
operator: 'or',
limit: 10,
templates: {
header: 'Searchable brands',
},
searchForFacetValues: {
searchable: {
placeholder: 'Find other brands...',
},
})
Expand All @@ -94,17 +82,13 @@ export default () => {
window.search.addWidget(
instantsearch.widgets.refinementList({
container,
attributeName: 'price_range',
attribute: 'price_range',
operator: 'and',
limit: 10,
cssClasses: {
header: 'facet-title',
item: 'facet-value checkbox',
count: 'facet-count pull-right',
active: 'facet-active',
},
templates: {
header: 'Price ranges',
selectedItem: 'facet-active',
},
transformData(data) {
data.label = data.label
Expand All @@ -122,12 +106,9 @@ export default () => {
window.search.addWidget(
instantsearch.widgets.refinementList({
container,
attributeName: 'brand',
attribute: 'brand',
operator: 'or',
limit: 10,
templates: {
header: 'Transformed brands',
},
transformItems: items =>
items.map(item => ({
...item,
Expand All @@ -144,13 +125,10 @@ export default () => {
window.search.addWidget(
instantsearch.widgets.refinementList({
container,
attributeName: 'brand',
attribute: 'brand',
operator: 'or',
limit: 10,
templates: {
header: 'Transformed searchable brands',
},
searchForFacetValues: {
searchable: {
placeholder: 'Find other brands...',
templates: {
noResults: 'No results',
Expand Down
142 changes: 142 additions & 0 deletions docgen/src/guides/v3-migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,138 @@ Widget removed.
</div>
```

### RefinementList

#### CSS classes

| Before | After |
| ----------------------------------- | --------------------------------------- |
| `ais-refinement-list` | `ais-RefinementList` |
| | `ais-RefinementList--noRefinement` |
| | `ais-RefinementList-noResults` |
| `ais-refinement-list--header` | |
| `ais-refinement-list--body` | |
| `ais-refinement-list--footer` | |
| `ais-refinement-list--list` | `ais-RefinementList-list` |
| `ais-refinement-list--item` | `ais-RefinementList-item` |
| `ais-refinement-list--item__active` | `ais-RefinementList-item--selected` |
| `ais-refinement-list--label` | `ais-RefinementList-label` |
| `ais-refinement-list--checkbox` | `ais-RefinementList-checkbox` |
| | `ais-RefinementList-labelText` |
| `ais-refinement-list--count` | `ais-RefinementList-count` |
| | `ais-RefinementList-showMore` |
| | `ais-RefinementList-showMore--disabled` |

#### Options

| Before | After |
| ---------------------- | ------------ |
| `attributeName` | `attribute` |
| `searchForFacetValues` | `searchable` |

* `escapeFacetValues` defaults to `true`
* `isAlwaysActive` defaults to `true`

#### Markup

##### Default

```html
<div class="ais-RefinementList">
<div class="ais-RefinementList-searchBox">
<!-- SearchBox widget here -->
</div>
<ul class="ais-RefinementList-list">
<li class="ais-RefinementList-item ais-RefinementList-item--selected">
<label class="ais-RefinementList-label">
<input class="ais-RefinementList-checkbox" type="checkbox" value="Insignia™" checked="" />
<span class="ais-RefinementList-labelText">Insignia™</span>
<span class="ais-RefinementList-count">746</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input class="ais-RefinementList-checkbox" type="checkbox" value="Samsung">
<span class="ais-RefinementList-labelText">Samsung</span>
<span class="ais-RefinementList-count">633</span>
</label>
</li>
</ul>
<button class="ais-RefinementList-showMore">Show more</button>
</div>
```

##### Show more disabled

```html
<div class="ais-RefinementList">
<div class="ais-RefinementList-searchBox">
<!-- SearchBox widget here -->
</div>
<ul class="ais-RefinementList-list">
<li class="ais-RefinementList-item ais-RefinementList-item--selected">
<label class="ais-RefinementList-label">
<input class="ais-RefinementList-checkbox" type="checkbox" value="Insignia™" checked="" />
<span class="ais-RefinementList-labelText">Insignia™</span>
<span class="ais-RefinementList-count">746</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input class="ais-RefinementList-checkbox" type="checkbox" value="Samsung">
<span class="ais-RefinementList-labelText">Samsung</span>
<span class="ais-RefinementList-count">633</span>
</label>
</li>
</ul>
<button class="ais-RefinementList-showMore ais-RefinementList-showMore--disabled" disabled>Show more</button>
</div>
```

##### With search and no results

```html
<div class="ais-RefinementList">
<div class="ais-RefinementList-searchBox">
<div class="ais-SearchBox">
<form class="ais-SearchBox-form" novalidate>
<input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="" />
<button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
<svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path>
</svg>
</button>
<button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
<svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
<path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"></path>
</svg>
</button>
<span class="ais-SearchBox-loadingIndicator" hidden>
<svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
<g fill="none" fillRule="evenodd">
<g transform="translate(1 1)" strokeWidth="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18" />
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"
/>
</path>
</g>
</g>
</svg>
</span>
</form>
</div>
</div>
<div class="ais-RefinementList-noResults">No results.</div>
</div>
```

### SortBy

#### Options
Expand Down Expand Up @@ -600,3 +732,13 @@ We've moved the `label` into the `templates.labelText` template to make it consi
| Before | After |
| ------------------- | -------------------- |
| `excludeAttributes` | `excludedAttributes` |

### connectRefinementList

#### Options

| Before | After |
| --------------- | ----------- |
| `attributeName` | `attribute` |

* `escapeFacetValues` defaults to `true`
Loading