Skip to content

feat(GeoSearch): implement InstantSearch.css #3138

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
samouss merged 6 commits into from
Sep 25, 2018
Merged

feat(GeoSearch): implement InstantSearch.css #3138

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c2dc3b7
feat(Geo): update classes
samouss Sep 24, 2018
f8fe07c
feat(Geo): update template
samouss Sep 24, 2018
c7829f7
docs(Geo): add migration
samouss Sep 24, 2018
46ee3ab
chore: update InstantSearch.css to 7.1.0
samouss Sep 24, 2018
f18bd73
fix(geo): update key names
samouss Sep 24, 2018
1975862
refactor(Geo): use object notation for cx
samouss Sep 24, 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
Prev Previous commit
Next Next commit
docs(Geo): add migration
  • Loading branch information
@samouss
samouss committed Sep 24, 2018
commit c7829f7a115c2cca4a4da1baab1cc00c6b635b92
60 changes: 60 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 @@ -39,6 +39,66 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
</div>
```

### GeoSearch

#### CSS classes

| Before | After |
| ------------------------------------- | ------------------------------- |
| `ais-geo-search` | `ais-GeoSearch` |
| `ais-geo-search--map` | `ais-GeoSearch-map` |
| `ais-geo-search--controls` | `ais-GeoSearch-tree` |
| `ais-geo-search--control` | `ais-GeoSearch-control` |
| `ais-geo-search--toggle-label` | `ais-GeoSearch-label` |
| `ais-geo-search--toggle-label-active` | `ais-GeoSearch-label--selected` |
| `ais-geo-search--toggle-inpit` | `ais-GeoSearch-input` |
| `ais-geo-search--redo` | `ais-GeoSearch-redo` |
| | `ais-GeoSearch-redo--disabled` |
| `ais-geo-search--clear` | `ais-GeoSearch-reset` |

#### Markup

With the control element:

```html
<div class="ais-GeoSearch">
<div class="ais-GeoSearch-map">
<!-- Map element here -->
</div>
<div class="ais-GeoSearch-tree">
<div class="ais-GeoSearch-control">
<label class="ais-GeoSearch-label">
<input class="ais-GeoSearch-input" type="checkbox">
Search as I move the map
</label>
</div>
<button class="ais-GeoSearch-reset">
Clear the map refinement
</button>
</div>
</div>
```

With the redo button:

```html
<div class="ais-GeoSearch">
<div class="ais-GeoSearch-map">
<!-- Map element here -->
</div>
<div class="ais-GeoSearch-tree">
<div class="ais-GeoSearch-control">
<button class="ais-GeoSearch-redo">
Redo search here
</button>
</div>
<button class="ais-GeoSearch-reset">
Clear the map refinement
</button>
</div>
</div>
```

### Hits

#### Options
Expand Down