diff --git a/.stylelintrc.json b/.stylelintrc.json index 18410a343..f307d44b9 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -11,19 +11,16 @@ "stylelint-prettier/recommended" ], "rules": { + "order/properties-alphabetical-order": true, + "no-descending-specificity": null, "selector-class-pattern": ["^aa-[A-Za-z0-9-]*$"], "prettier/prettier": true, - "max-nesting-depth": [ - 2, - { - "ignore": ["pseudo-classes"], - "ignoreAtRules": ["media"] - } - ], + "max-nesting-depth": null, "rule-empty-line-before": [ "always", { "ignore": ["after-comment", "first-nested", "inside-block"] } ], + "selector-max-compound-selectors": null, "plugin/no-unsupported-browser-features": [ null, { diff --git a/bundlesize.config.json b/bundlesize.config.json index a8561a5b8..f18e40a4a 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -22,7 +22,7 @@ }, { "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js", - "maxSize": "2.8 kB" + "maxSize": "3 kB" } ] } diff --git a/examples/js/app.tsx b/examples/js/app.tsx index dcb94afbf..c0e3c52a5 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -2,19 +2,25 @@ import { autocomplete, getAlgoliaHits, - highlightHit, + snippetHit, } from '@algolia/autocomplete-js'; import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights'; import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions'; import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; import { Hit } from '@algolia/client-search'; import algoliasearch from 'algoliasearch'; -import { h } from 'preact'; +import { h, Fragment } from 'preact'; import insightsClient from 'search-insights'; import '@algolia/autocomplete-theme-classic'; -type Product = { name: string; image: string }; +import { shortcutsPlugin } from './shortcutsPlugin'; + +type Product = { + name: string; + image: string; + description: string; +}; type ProductHit = Hit; const appId = 'latency'; @@ -44,6 +50,7 @@ autocomplete({ debug: true, openOnFocus: true, plugins: [ + shortcutsPlugin, algoliaInsightsPlugin, recentSearchesPlugin, querySuggestionsPlugin, @@ -58,16 +65,37 @@ autocomplete({ getItems() { return getAlgoliaHits({ searchClient, - queries: [{ indexName: 'instant_search', query }], + queries: [ + { + indexName: 'instant_search', + query, + params: { + attributesToSnippet: ['name:10', 'description:35'], + snippetEllipsisText: '…', + }, + }, + ], }); }, templates: { + header() { + return ( + + Products +
+ + ); + }, item({ item }) { return ; }, empty() { return ( -
No results for this query.
+
+
+ No products for this query. +
+
); }, }, @@ -82,14 +110,27 @@ type ProductItemProps = { function ProductItem({ hit }: ProductItemProps) { return ( -
-
- {hit.name} + +
+ {hit.name}
- -
- {highlightHit({ hit, attribute: 'name' })} +
+
+ {snippetHit({ hit, attribute: 'name' })} +
+
+ {snippetHit({ hit, attribute: 'description' })} +
-
+ + ); } diff --git a/examples/js/darkMode.ts b/examples/js/darkMode.ts new file mode 100644 index 000000000..5c1c7a0fb --- /dev/null +++ b/examples/js/darkMode.ts @@ -0,0 +1,31 @@ +function initTheme() { + if (isDarkThemeSelected()) { + applyDarkTheme(); + } else { + applyLightTheme(); + } +} + +export function isDarkThemeSelected() { + return localStorage.getItem('darkMode') === 'dark'; +} + +function applyDarkTheme() { + document.body.setAttribute('data-theme', 'dark'); + localStorage.setItem('darkMode', 'dark'); +} + +function applyLightTheme() { + document.body.removeAttribute('data-theme'); + localStorage.removeItem('darkMode'); +} + +export function toggleTheme() { + if (isDarkThemeSelected()) { + applyLightTheme(); + } else { + applyDarkTheme(); + } +} + +initTheme(); diff --git a/examples/js/index.html b/examples/js/index.html index 0d7316c1f..ab029cd48 100644 --- a/examples/js/index.html +++ b/examples/js/index.html @@ -8,6 +8,7 @@ Autocomplete JavaScript Playground +
@@ -47,6 +48,7 @@
+ diff --git a/examples/js/shortcutsPlugin.tsx b/examples/js/shortcutsPlugin.tsx new file mode 100644 index 000000000..76b104245 --- /dev/null +++ b/examples/js/shortcutsPlugin.tsx @@ -0,0 +1,98 @@ +import { AutocompletePlugin } from '@algolia/autocomplete-js'; + +import { toggleTheme, isDarkThemeSelected } from './darkMode'; + +type DarkModeItem = { + label: string; +}; + +export const shortcutsPlugin: AutocompletePlugin = { + getSources({ query }) { + if (query !== '/' && query !== 'dark' && query !== 'light') { + return []; + } + + return [ + { + getItems() { + return [ + { + label: 'Toggle dark mode', + }, + ]; + }, + onSelect({ setIsOpen }) { + toggleTheme(); + setIsOpen(true); + }, + templates: { + header({ createElement, Fragment }) { + return createElement( + Fragment, + {}, + createElement( + 'span', + { className: 'aa-SourceHeaderTitle' }, + 'Shortcuts' + ), + createElement('div', { className: 'aa-SourceHeaderLine' }) + ); + }, + item({ item, createElement, Fragment }) { + const darkIcon = createElement( + 'svg', + { + xmlns: 'http://www.w3.org/2000/svg', + fill: 'none', + viewBox: '0 0 24 24', + stroke: 'currentColor', + }, + createElement('path', { + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeWidth: 2, + d: + 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z', + }) + ); + const lightIcon = createElement( + 'svg', + { + xmlns: 'http://www.w3.org/2000/svg', + fill: 'none', + viewBox: '0 0 24 24', + stroke: 'currentColor', + }, + createElement('path', { + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeWidth: 2, + d: + 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z', + }) + ); + + return createElement( + Fragment, + {}, + createElement( + 'div', + { className: 'aa-ItemIcon' }, + isDarkThemeSelected() ? lightIcon : darkIcon + ), + createElement( + 'div', + { className: 'aa-ItemContent' }, + createElement( + 'div', + { className: 'aa-ItemContentTitle' }, + item.label + ) + ) + ); + }, + }, + }, + ]; + }, +}; diff --git a/examples/js/style.css b/examples/js/style.css index 527f682b9..ae7dabf3f 100644 --- a/examples/js/style.css +++ b/examples/js/style.css @@ -3,25 +3,32 @@ } body { + background-color: rgb(244, 244, 249); + color: rgb(65, 65, 65); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + padding: 1rem; } .container { margin: 0 auto; max-width: 640px; - padding: 1rem; + width: 100%; } .content p { - color: #555; line-height: 1.6; } .content img { max-width: 100%; } + +body[data-theme='dark'] { + background-color: rgb(0, 0, 0); + color: rgb(183, 192, 199); +} diff --git a/examples/react-renderer/src/App.css b/examples/react-renderer/src/App.css index f3dad8bd8..dc02ab37e 100644 --- a/examples/react-renderer/src/App.css +++ b/examples/react-renderer/src/App.css @@ -1,6 +1,10 @@ .container { margin: 0 auto; max-width: 640px; - padding: 1rem; + width: 100%; +} + +.aa-Panel { + max-width: 640px; width: 100%; } diff --git a/examples/react-renderer/src/App.tsx b/examples/react-renderer/src/App.tsx index 302c8b96d..6e791d18e 100644 --- a/examples/react-renderer/src/App.tsx +++ b/examples/react-renderer/src/App.tsx @@ -6,7 +6,7 @@ import './App.css'; export function App() { return (
- +
); } diff --git a/examples/react-renderer/src/Autocomplete.tsx b/examples/react-renderer/src/Autocomplete.tsx index 1ae9a6fe8..efb812b0d 100644 --- a/examples/react-renderer/src/Autocomplete.tsx +++ b/examples/react-renderer/src/Autocomplete.tsx @@ -111,15 +111,19 @@ export function Autocomplete( className="aa-Form" {...autocomplete.getFormProps({ inputElement: inputRef.current })} > -
+
+
+
+
+
@@ -131,6 +135,7 @@ export function Autocomplete( ref={panelRef} className={[ 'aa-Panel', + 'aa-Panel--desktop', autocompleteState.status === 'stalled' && 'aa-Panel--stalled', ] .filter(Boolean) @@ -152,10 +157,12 @@ export function Autocomplete( className="aa-Item" {...autocomplete.getItemProps({ item, source })} > +
+ +
-
= Omit< + AutocompleteCorePlugin, + 'getSources' +> & { + getSources: AutocompleteOptions['getSources']; +}; diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts index 66a99ea96..73fc8d0b4 100644 --- a/packages/autocomplete-js/src/types/index.ts +++ b/packages/autocomplete-js/src/types/index.ts @@ -3,6 +3,7 @@ export * from './AutocompleteClassNames'; export * from './AutocompleteCollection'; export * from './AutocompleteDom'; export * from './AutocompleteOptions'; +export * from './AutocompletePlugin'; export * from './AutocompletePropGetters'; export * from './AutocompleteRender'; export * from './AutocompleteRenderer'; diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts index 74ba8280a..d9ea72a37 100644 --- a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts +++ b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts @@ -13,34 +13,34 @@ export function getTemplates({ item({ item, createElement, Fragment }) { return createElement(Fragment, { children: [ + createElement('div', { + className: 'aa-ItemIcon aa-ItemIcon--no-border', + children: [ + createElement( + 'svg', + { + width: '20', + height: '20', + viewBox: '0 0 20 20', + }, + createElement('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', + 'fill-rule': 'evenodd', + 'stroke-width': '1.4', + 'stroke-linecap': 'round', + 'stroke-linejoin': 'round', + }) + ), + ], + }), createElement('div', { className: 'aa-ItemContent', children: [ createElement('div', { - className: 'aa-ItemSourceIcon', - children: [ - createElement( - 'svg', - { - width: '20', - height: '20', - viewBox: '0 0 20 20', - }, - createElement('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', - 'fill-rule': 'evenodd', - 'stroke-width': '1.4', - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', - }) - ), - ], - }), - createElement('div', { - className: 'aa-ItemTitle', + className: 'aa-ItemContentTitle', children: reverseHighlightHit({ hit: item, attribute: 'query', diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts index b30c696df..33620eb85 100644 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts +++ b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts @@ -13,33 +13,33 @@ export function getTemplates({ item({ item, createElement, Fragment }) { return createElement(Fragment, { children: [ + createElement('div', { + className: 'aa-ItemIcon aa-ItemIcon--no-border', + children: [ + createElement( + 'svg', + { + width: '20', + height: '20', + viewBox: '0 0 22 22', + fill: 'currentColor', + }, + createElement('path', { + d: 'M0 0h24v24H0z', + fill: 'none', + }), + createElement('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', + }) + ), + ], + }), createElement('div', { className: 'aa-ItemContent', children: [ createElement('div', { - className: 'aa-ItemSourceIcon', - children: [ - createElement( - 'svg', - { - width: '20', - height: '20', - viewBox: '0 0 22 22', - fill: 'currentColor', - }, - createElement('path', { - d: 'M0 0h24v24H0z', - fill: 'none', - }), - createElement('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', - }) - ), - ], - }), - createElement('div', { - className: 'aa-ItemTitle', + className: 'aa-ItemContentTitle', children: reverseHighlightHit({ hit: item, attribute: 'query', diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index c44553bc5..2762deeb2 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -1,229 +1,486 @@ -.aa-Form { - flex-grow: 1; - margin: 0; - position: relative; -} - -.aa-InputWrapperPrefix, -.aa-InputWrapperSuffix { - height: 100%; - position: absolute; - top: 0; - z-index: 1; -} - -.aa-InputWrapperSuffix { - right: 0; -} - -.aa-Label, -.aa-TouchSearchButtonIcon { - align-items: center; - color: #777; - cursor: initial; - display: flex; - height: 100%; -} - -.aa-InputWrapper, -.aa-TouchSearchButton { - align-items: center; - background-color: #fff; - display: flex; - height: 2.5rem; - position: relative; - width: 100%; +// ---------------- +// Variables +// ---------------- +:root { + --aa-base-unit: 16; + --aa-font-size: calc(var(--aa-base-unit) * 1px); + --aa-spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5 + --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); + --aa-spacing-half: calc(var(--aa-spacing) / 2); + --aa-icon-size: 18px; + --aa-icon-stroke-width: calc((20 / var(--aa-base-unit)) * 1.6); + --aa-primary-color: rgb(62, 52, 211); + --aa-muted-color: rgba(128, 126, 163, 0.6); + --aa-selected-color: rgba(62, 52, 211, 0.1); + --aa-icon-color: rgb(119, 119, 163); + --aa-text-color: rgb(38, 38, 39); + --aa-content-text-color: rgb(38, 38, 39, 0.7); + --aa-background-color: rgb(255, 255, 255); + --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), + 0 6px 16px -4px rgba(35, 38, 59, 0.15); } -.aa-Input, -.aa-TouchSearchButton { - border: 1px solid #d6d6e7; - border-radius: 3px; - box-shadow: rgb(119 122 175 / 30%) 0 1px 4px 0 inset; - font: inherit; +// ---------------- +// Darkmode +// ---------------- +body { + /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */ + &[data-theme='dark'], + &.dark { + --aa-primary-color: rgb(93, 85, 213); + --aa-muted-color: rgba(93, 85, 213, 0.6); + --aa-selected-color: rgba(93, 85, 213, 0.25); + --aa-icon-color: rgb(119, 119, 163); + --aa-text-color: rgb(183, 192, 199); + --aa-content-text-color: rgb(183, 192, 199, 0.8); + --aa-background-color: rgb(21, 24, 42); + --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), + 0 3px 8px 0 rgb(0, 3, 9); + } + /* stylelint-enable selector-no-qualifying-type, selector-class-pattern */ } -.aa-TouchSearchButton { - color: #5a5e9a; - cursor: pointer; - padding: 0; +// ---------------- +// Autocomplete +// ---------------- +.aa-Autocomplete, +.aa-TouchFormContainer { + font-size: var(--aa-font-size); + line-height: 1em; text-align: left; + // reset + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + // searchbox + .aa-Form { + align-items: center; + background-color: var(--aa-background-color); + border: 1px solid var(--aa-muted-color); + border-radius: 3px; + display: flex; + line-height: 1em; + padding: 0 var(--aa-spacing) 0 var(--aa-spacing-half); + position: relative; + width: 100%; + &:focus-within { + border-color: var(--aa-primary-color); + box-shadow: var(--aa-selected-color) 0 0 0 3px, + inset var(--aa-selected-color) 0 0 0 2px; + outline: currentColor none medium; + } + .aa-InputWrapperPrefix { + align-items: center; + display: flex; + flex-shrink: 0; + flex-wrap: none; + order: 1; + padding-right: var(--aa-spacing-half); + // container for search and loading icons + .aa-Label, + .aa-LoadingIndicator { + cursor: initial; + flex-shrink: 0; + text-align: center; + width: calc(var(--aa-spacing) + var(--aa-icon-size)); + button { + appearance: none; + background: none; + border: 0; + } + svg { + color: var(--aa-primary-color); + left: 2px; + position: relative; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + } + } + } + .aa-InputWrapper { + order: 3; + position: relative; + width: 100%; + // input of the searchbox, where the placeholder and query appear + .aa-Input { + appearance: none; + background: none; + border: 0; + color: var(--aa-text-color); + font: inherit; + height: calc(var(--aa-spacing) * 2.5); + width: 100%; + // remove native appearence + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + appearance: none; + } + &::placeholder { + color: var(--aa-muted-color); + opacity: 1; + } + // remove focus effect as we moved it to parent wrapper + &:focus { + border-color: none; + box-shadow: none; + outline: none; + } + } + } + .aa-InputWrapperSuffix { + align-items: center; + display: flex; + order: 4; + // accelerator to clear the query + .aa-ResetButton { + align-items: center; + background: none; + border: 0; + color: var(--aa-muted-color); + cursor: pointer; + display: flex; + &[hidden] { + display: none; + } + &:hover, + &:focus { + color: var(--aa-text-color); + } + svg { + stroke-width: var(--aa-icon-stroke-width); + width: var(--aa-icon-size); + } + } + } + } } -.aa-Input { - appearance: none; - background: none; - caret-color: #5a5e9a; - color: #23263b; - height: 100%; - padding: 0 2.25rem; +// ---------------- +// Panel +// ---------------- +.aa-Panel { position: absolute; - width: 100%; - - &::-webkit-search-decoration, - &::-webkit-search-cancel-button, - &::-webkit-search-results-button, - &::-webkit-search-results-decoration { + // reset + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + button { appearance: none; + background: none; + border: 0; } - - &::placeholder { - color: #5a5e9a; + &.aa-Panel--desktop { + .aa-PanelLayout { + background-color: var(--aa-background-color); + border-radius: 3px; + box-shadow: var(--aa-panel-shadow); + margin-top: var(--aa-spacing-half); + overflow: hidden; + padding-bottom: var(--aa-spacing-half); + padding-top: var(--aa-spacing-half); + text-align: left; + .aa-PanelLayoutResults { + overflow-y: scroll; + width: 50%; + } + .aa-PanelLayoutPreview { + border-left: solid 1px var(--aa-selected-color); + flex-shrink: 1; + max-width: 50%; + overflow: hidden; + } + } } + &.aa-Panel--touch { + left: var(--aa-spacing-half); + padding-top: var(--aa-spacing-half); + right: var(--aa-spacing-half); - &:focus { - border-color: #3c4fe0; - box-shadow: rgb(35 38 59 / 5%) 0 1px 0 0; - outline: currentColor none medium; + .aa-TouchOnly { + display: none; + } + .aa-Item { + border-radius: 3px; + padding: 0; + } + .aa-SourceHeader { + margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; + } + } + // when a query isn't resolved yet + &.aa-Panel--stalled { + filter: grayscale(1); + opacity: 0.8; + @media screen and (prefers-reduced-motion: reduce) { + transition: opacity 200ms ease-in; + } } } -.aa-Label[hidden], -.aa-LoadingIndicator[hidden] { - display: none; -} - -.aa-SubmitButton, -.aa-ResetButton, -.aa-LoadingIndicator, -.aa-TouchSearchButtonIcon { - height: 100%; - padding: 0 0.5rem; -} - -.aa-SubmitButton, -.aa-ResetButton { - background: none; - border: 0; - color: inherit; - cursor: pointer; -} - -.aa-LoadingIndicator { - position: absolute; - z-index: 2; -} - -.aa-LoadingIcon { - height: 100%; -} - -.aa-List { - list-style: none; - margin: 0; - padding: 0; +// ---------------- +// Sources +// Each source can be styled independently +// ---------------- +.aa-Source { + width: 100%; + // source title + .aa-SourceHeader { + line-height: var(--aa-spacing); + margin: var(--aa-spacing-half) calc(var(--aa-spacing-half) + 2px); + position: relative; + // Title typography + .aa-SourceHeaderTitle { + background: var(--aa-background-color); + color: var(--aa-primary-color); + display: inline-block; + font-size: 0.8em; + font-weight: 600; + padding-right: var(--aa-spacing-half); + position: relative; + text-transform: capitalize; + z-index: 2; + } + // Line separator + .aa-SourceHeaderLine { + border-bottom: solid 1px var(--aa-primary-color); + display: block; + height: 2px; + left: 0; + opacity: 0.3; + position: absolute; + right: 0; + top: var(--aa-spacing-half); + z-index: 1; + } + // hide empty header + &:empty { + display: none; + } + } + &:empty { + // hide empty section + display: none; + } + // list of results inside the source + .aa-List { + list-style: none; + margin: 0; + padding: 0; + } } +// ---------------- +// Hit Layout +// ---------------- .aa-Item { - color: #23263b; + align-items: center; + color: var(--aa-text-color); cursor: pointer; display: flex; - grid-gap: 0.5rem; - justify-content: space-between; + height: 100%; + line-height: 1.1em; + padding: 0 var(--aa-spacing-half); - mark { - background: none; - font-style: normal; - font-weight: bold; + .aa-ActiveOnly { + visibility: hidden; } - - /* stylelint-disable-next-line */ + // when the result is active &[aria-selected='true'] { - background-color: #f5f5fa; - } -} + background-color: var(--aa-selected-color); -.aa-ItemLink { - color: inherit; - text-decoration: none; -} - -.aa-ItemContent { - display: flex; - flex-grow: 1; - grid-gap: 0.5rem; - padding: 0.5rem; -} - -.aa-ItemSourceIcon, -.aa-ItemActionButton { - color: rgba(0, 0, 0, 0.4); + .aa-ItemActionButton, + .aa-ActiveOnly { + visibility: visible; + } + } + // wrap hit with url but we don't need to see it + .aa-ItemLink { + align-items: center; + color: inherit; + display: flex; + text-decoration: none; + width: 100%; + } + // the result type icon inlined svg or img + .aa-ItemIcon { + align-items: center; + background: #fff; + border-radius: 3px; + box-shadow: inset 0 0 0 1px var(--aa-selected-color); + color: var(--aa-icon-color); + display: flex; + flex-shrink: 0; + font-size: var(--aa-icon-size); + height: calc(var(--aa-icon-size) + var(--aa-spacing)); + justify-content: center; + margin: 2px var(--aa-spacing-half) 2px 2px; + stroke-width: var(--aa-icon-stroke-width); + text-align: center; + width: calc(var(--aa-icon-size) + var(--aa-spacing)); + &.aa-ItemIcon--no-border { + background: none; + box-shadow: none; + margin: 0 var(--aa-spacing-half) 0 2px; + } + img { + height: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px); + width: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px); + } + svg { + height: var(--aa-icon-size); + width: var(--aa-icon-size); + } + } + .aa-ItemContent { + color: var(--aa-text-color); + cursor: pointer; + flex-shrink: 1; + overflow: hidden; + padding: calc(var(--aa-spacing) / 4) 0; + width: 100%; + mark { + background: none; + color: var(--aa-text-color); + font-style: normal; + font-weight: bold; + } + .aa-ItemContentTitle { + display: inline-block; + max-width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .aa-ItemContentSubtitle { + color: var(--aa-muted-color); + display: inline-block; + font-size: 0.75em; + margin-top: -2px; + max-width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + &:empty { + display: none; + } + .aa-ItemContentDash { + color: var(--aa-muted-color); + display: none; + opacity: 0.4; + } + .aa-ItemContentTag { + background-color: var(--aa-selected-color); + border-radius: 3px; + margin-right: 0.4em; + padding: 0.08em 0.3em; + } + } + &.aa-ItemContent--dual { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; + .aa-ItemContentTitle, + .aa-ItemContentSubtitle { + display: block; + } + } + .aa-ItemContentDescription { + color: var(--aa-content-text-color); + font-size: 0.85em; + max-width: 100%; + overflow-x: hidden; + padding: 0.3em 0; + text-overflow: ellipsis; + mark { + background: rgb(245 223 77 / 0.5); + color: var(--aa-text-color); + font-style: normal; + font-weight: 500; + } + &:empty { + display: none; + } + } + } + // secondary click action + .aa-ItemActionButton { + align-items: center; + background: none; + border: 0; + color: var(--aa-muted-color); + cursor: pointer; + display: flex; + flex-shrink: 0; + &:hover svg, + &:focus svg { + color: var(--aa-text-color); + } + svg { + color: var(--aa-muted-color); + margin: 0 var(--aa-spacing-half); + stroke-width: var(--aa-icon-stroke-width); + width: var(--aa-icon-size); + &:hover, + &:focus { + color: var(--aa-text-color); + } + } + } } -.aa-ItemActionButton { - background-color: transparent; - border: 0; +//---------------- +// Touch +//---------------- +.aa-TouchSearchButton { + align-items: center; + background-color: var(--aa-background-color); + border: 1px solid var(--aa-muted-color); + border-radius: 3px; + color: var(--aa-muted-color); cursor: pointer; - opacity: 0.8; - padding: 0.5rem; - transition: color 100ms; - @media screen and (prefers-reduced-motion: reduce) { - transition: none; - } - - &:hover, - &:focus { - color: rgba(80, 80, 80, 1); + display: flex; + font: inherit; + height: calc(var(--aa-spacing) * 2.5); + padding: 0 var(--aa-spacing-half); + position: relative; + text-align: left; + .aa-TouchSearchButtonIcon { + align-items: center; + color: var(--aa-icon-color); + cursor: initial; + display: flex; + height: 100%; + margin-right: var(--aa-spacing-half); } } .aa-TouchOverlay { backdrop-filter: blur(16px); - background: rgba(255, 255, 255, 0.95); + background: var(--aa-background-color); bottom: 0; left: 0; - padding: 0.5rem; + padding: var(--aa-spacing-half); position: fixed; right: 0; top: 0; -} - -.aa-TouchFormContainer { - display: flex; - grid-gap: 0.5rem; - justify-content: space-between; -} - -.aa-TouchCancelButton { - background: none; - border: 0; - color: inherit; - cursor: pointer; - font-size: inherit; - padding: 0; -} - -.aa-PanelLayout { - margin-top: 5px; -} - -.aa-Panel { - &--desktop { - max-width: 480px; - position: absolute; - width: 100%; - - .aa-PanelLayout { - background-color: #fff; - border: 1px solid rgba(150, 150, 150, 0.16); - border-radius: 3px; - box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05), - 0 8px 16px -4px rgba(35, 38, 59, 0.25); - } - - &--stalled { - filter: grayscale(1); - opacity: 0.5; - transition: opacity 200ms ease-in; - @media screen and (prefers-reduced-motion: reduce) { - transition: none; - } - } + .aa-TouchFormContainer { + display: flex; + justify-content: space-between; } - - &--touch { - .aa-Item { - border-radius: 5px; - } + .aa-TouchCancelButton { + background: none; + border: 0; + color: inherit; + cursor: pointer; + font-size: inherit; + padding: 0; + padding-left: var(--aa-spacing-half); } } diff --git a/yarn.lock b/yarn.lock index 9639bd480..74709a8b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4279,6 +4279,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5: json-schema-traverse "^0.4.1" uri-js "^4.2.2" +ajv@^7.0.2: + version "7.0.3" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-7.0.3.tgz#13ae747eff125cafb230ac504b2406cf371eece2" + integrity sha512-R50QRlXSxqXcQP5SvKUrw8VZeypvo12i2IX0EeR5PiZ7bEKeHWgzgo264LDadUsCU42lTJVhFikTqJwNeH34gQ== + dependencies: + fast-deep-equal "^3.1.1" + json-schema-traverse "^1.0.0" + require-from-string "^2.0.2" + uri-js "^4.2.2" + algoliasearch-helper@^3.1.1: version "3.3.2" resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.3.2.tgz#7ba2b233fb8ce216f35a55a21fa0faadeca3f21a" @@ -7162,7 +7172,7 @@ debug@3.1.0, debug@=3.1.0: dependencies: ms "2.0.0" -debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0: +debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee" integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ== @@ -8636,6 +8646,18 @@ fast-glob@^3.0.3, fast-glob@^3.1.1, fast-glob@^3.2.4: micromatch "^4.0.2" picomatch "^2.2.1" +fast-glob@^3.2.5: + version "3.2.5" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661" + integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.0" + merge2 "^1.3.0" + micromatch "^4.0.2" + picomatch "^2.2.1" + fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" @@ -9449,6 +9471,18 @@ globby@^10.0.1: merge2 "^1.2.3" slash "^3.0.0" +globby@^11.0.2: + version "11.0.2" + resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.2.tgz#1af538b766a3b540ebfb58a32b2e2d5897321d83" + integrity sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og== + dependencies: + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.1.1" + ignore "^5.1.4" + merge2 "^1.3.0" + slash "^3.0.0" + globby@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" @@ -11600,6 +11634,11 @@ json-schema-traverse@^0.4.1: resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg== +json-schema-traverse@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2" + integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug== + json-schema@0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" @@ -12565,6 +12604,24 @@ meow@^8.0.0: type-fest "^0.18.0" yargs-parser "^20.2.3" +meow@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364" + integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ== + dependencies: + "@types/minimist" "^1.2.0" + camelcase-keys "^6.2.2" + decamelize "^1.2.0" + decamelize-keys "^1.1.0" + hard-rejection "^2.1.0" + minimist-options "4.1.0" + normalize-package-data "^3.0.0" + read-pkg-up "^7.0.1" + redent "^3.0.0" + trim-newlines "^3.0.0" + type-fest "^0.18.0" + yargs-parser "^20.2.3" + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -16524,6 +16581,11 @@ require-directory@^2.1.1: resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I= +require-from-string@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909" + integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw== + "require-like@>= 0.1.1": version "0.1.2" resolved "https://registry.yarnpkg.com/require-like/-/require-like-0.1.2.tgz#ad6f30c13becd797010c468afa775c0c0a6b47fa" @@ -18117,10 +18179,10 @@ stylelint-scss@^3.18.0: postcss-selector-parser "^6.0.2" postcss-value-parser "^4.1.0" -stylelint@13.8.0: - version "13.8.0" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.8.0.tgz#446765dbe25e3617f819a0165956faf2563ddc23" - integrity sha512-iHH3dv3UI23SLDrH4zMQDjLT9/dDIz/IpoFeuNxZmEx86KtfpjDOscxLTFioQyv+2vQjPlRZnK0UoJtfxLICXQ== +stylelint@13.9.0: + version "13.9.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.9.0.tgz#93921ee6e11d4556b9f31131f485dc813b68e32a" + integrity sha512-VVWH2oixOAxpWL1vH+V42ReCzBjW2AeqskSAbi8+3OjV1Xg3VZkmTcAqBZfRRvJeF4BvYuDLXebW3tIHxgZDEg== dependencies: "@stylelint/postcss-css-in-js" "^0.37.2" "@stylelint/postcss-markdown" "^0.36.2" @@ -18128,14 +18190,14 @@ stylelint@13.8.0: balanced-match "^1.0.0" chalk "^4.1.0" cosmiconfig "^7.0.0" - debug "^4.2.0" + debug "^4.3.1" execall "^2.0.0" - fast-glob "^3.2.4" + fast-glob "^3.2.5" fastest-levenshtein "^1.0.12" file-entry-cache "^6.0.0" get-stdin "^8.0.0" global-modules "^2.0.0" - globby "^11.0.1" + globby "^11.0.2" globjoin "^0.1.4" html-tags "^3.1.0" ignore "^5.1.8" @@ -18145,7 +18207,7 @@ stylelint@13.8.0: lodash "^4.17.20" log-symbols "^4.0.0" mathml-tag-names "^2.1.3" - meow "^8.0.0" + meow "^9.0.0" micromatch "^4.0.2" normalize-selector "^0.2.0" postcss "^7.0.35" @@ -18167,7 +18229,7 @@ stylelint@13.8.0: style-search "^0.1.0" sugarss "^2.0.0" svg-tags "^1.0.0" - table "^6.0.3" + table "^6.0.7" v8-compile-cache "^2.2.0" write-file-atomic "^3.0.3" @@ -18282,12 +18344,12 @@ table@^5.2.3: slice-ansi "^2.1.0" string-width "^3.0.0" -table@^6.0.3: - version "6.0.4" - resolved "https://registry.yarnpkg.com/table/-/table-6.0.4.tgz#c523dd182177e926c723eb20e1b341238188aa0d" - integrity sha512-sBT4xRLdALd+NFBvwOz8bw4b15htyythha+q+DVZqy2RS08PPC8O2sZFgJYEY7bJvbCFKccs+WIZ/cd+xxTWCw== +table@^6.0.7: + version "6.0.7" + resolved "https://registry.yarnpkg.com/table/-/table-6.0.7.tgz#e45897ffbcc1bcf9e8a87bf420f2c9e5a7a52a34" + integrity sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g== dependencies: - ajv "^6.12.4" + ajv "^7.0.2" lodash "^4.17.20" slice-ansi "^4.0.0" string-width "^4.2.0"