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.

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

fix(theme): update icons and Detached mode design #443

Merged
merged 9 commits into from
Feb 11, 2021
Merged

fix(theme): update icons and Detached mode design #443

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
75286a5
fix(css): remove extra padding top from detached panel
Shipow Feb 10, 2021
ec4f966
Merge branch 'next' of https://github.com/algolia/autocomplete.js int…
Shipow Feb 10, 2021
80d534c
fix(icons): icons from feather set
Shipow Feb 10, 2021
ce8154c
fix(icons): icons from feather set - demo js
Shipow Feb 10, 2021
fa4d4fc
fix(css): better detached mode layout
Shipow Feb 10, 2021
67fbd2e
fix(css): run linter
Shipow Feb 10, 2021
5811cd2
chore: format files
francoischalifour Feb 11, 2021
3a98501
chore: increase bundle size threshold
francoischalifour Feb 11, 2021
62af71d
test(js): update snapshots
francoischalifour Feb 11, 2021
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
18 changes: 7 additions & 11 deletions examples/js/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,8 @@ function ProductItem({ hit, insights }: ProductItemProps) {
title="Select"
>
<svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
<path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"></path>
<path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"></path>

</svg>
</button>
<button
Expand All @@ -162,18 +163,13 @@ function ProductItem({ hit, insights }: ProductItemProps) {
}}
>
<svg
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
width="20"
height="20"
fill="currentColor"
width="18"
height="18"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path d="M19 5h-14l1.5-2h11zM21.794 5.392l-2.994-3.992c-0.196-0.261-0.494-0.399-0.8-0.4h-12c-0.326 0-0.616 0.156-0.8 0.4l-2.994 3.992c-0.043 0.056-0.081 0.117-0.111 0.182-0.065 0.137-0.096 0.283-0.095 0.426v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.219-0.071-0.422-0.189-0.585-0.004-0.005-0.007-0.010-0.011-0.015zM4 7h16v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707zM15 10c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121c0-0.552-0.448-1-1-1s-1 0.448-1 1c0 1.38 0.561 2.632 1.464 3.536s2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>

</svg>
</button>
</div>
Expand Down
10 changes: 4 additions & 6 deletions packages/autocomplete-js/src/components/ResetIcon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,16 @@ import { Component } from '../types/Component';
export const ResetIcon: Component<{}, SVGSVGElement> = () => {
const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
element.setAttribute('class', 'aa-ResetIcon');
element.setAttribute('viewBox', '0 0 20 20');
element.setAttribute('width', '20');
element.setAttribute('height', '20');
element.setAttribute('viewBox', '0 0 24 24');
element.setAttribute('width', '18');
element.setAttribute('height', '18');
element.setAttribute('fill', 'currentColor');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute(
'd',
'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
'M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z'
);
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('clip-rule', 'evenodd');

element.appendChild(path);

Expand Down
11 changes: 3 additions & 8 deletions packages/autocomplete-js/src/components/SearchIcon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,16 @@ import { Component } from '../types/Component';
export const SearchIcon: Component<{}, SVGSVGElement> = () => {
const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
element.setAttribute('class', 'aa-SubmitIcon');
element.setAttribute('viewBox', '0 0 20 20');
element.setAttribute('viewBox', '0 0 24 24');
element.setAttribute('width', '20');
element.setAttribute('height', '20');
element.setAttribute('fill', 'currentColor');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute(
'd',
'M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z'
'M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z'
);
path.setAttribute('stroke', 'currentColor');
path.setAttribute('fill', 'none');
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('stroke-width', '1.4');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');

element.appendChild(path);

Expand Down
16 changes: 4 additions & 12 deletions packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,8 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
<svg width="20" height="20" viewBox="0 0 20 20">
<path
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
stroke="currentColor"
fill="none"
fillRule="evenodd"
strokeWidth="1.4"
strokeLinecap="round"
strokeLinejoin="round"
/>
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
<path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
</svg>
</div>
<div className="aa-ItemContent">
Expand All @@ -51,8 +43,8 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
width="18"
height="18"
>
<rect fill="none" height="24" width="24" />
<path d="M5,15h2V8.41L18.59,20L20,18.59L8.41,7H15V5H5V15z" />
<path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>

</svg>
</button>
</div>
Expand Down
16 changes: 5 additions & 11 deletions packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ export function getTemplates<TItem extends RecentSearchesItem>({
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
<svg width="20" height="20" viewBox="0 0 22 22" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
</svg>
</div>
<div className="aa-ItemContent">
Expand All @@ -42,15 +41,10 @@ export function getTemplates<TItem extends RecentSearchesItem>({
viewBox="0 0 24 24"
width="18"
height="18"
fill="none"
stroke="currentColor"
fill="currentColor"
>
<path
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
<path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>

</svg>
</button>
</div>
Expand Down
25 changes: 14 additions & 11 deletions packages/autocomplete-theme-classic/src/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,18 +486,21 @@ body {
.aa-DetachedOverlay {
background: var(--aa-background-color);
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
padding: var(--aa-spacing-half) 0 var(--aa-spacing-half)
var(--aa-spacing-half);
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 0;

.aa-DetachedFormContainer {
border-bottom: solid 1px var(--aa-selected-color);
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: var(--aa-spacing-half);
padding-bottom: var(--aa-spacing-half);
padding: var(--aa-spacing-half);
.aa-Form {
padding: 0 var(--aa-spacing-half) 0 0;
}
Expand All @@ -512,18 +515,18 @@ body {
}
.aa-Panel {
background-color: var(--aa-background-color);
height: 100vh; // TODO: compute with js
left: var(--aa-spacing-half);
overflow-y: auto;
padding-bottom: var(--aa-spacing);
padding-right: var(--aa-spacing-half);
padding-top: var(--aa-spacing-half);
right: 0;
overflow: hidden;
padding: 0 var(--aa-spacing-half);
position: relative;

.aa-PanelLayout {
box-shadow: none;
height: 100%;
margin: 0;
max-height: none;
overflow-y: auto;
padding: 0;
width: 100%;
}
.aa-Item {
border-radius: 3px;
Expand Down