feat(theme): patch theme (#497)

* feat(theme): patch theme Co-authored-by: Kevin Granger <[email protected]> * feat: convert CSS color vars to RGB and alpha tuples * feat: remove capitalize on header * feat: rename columns CSS classes * fix: fix scrollable class case * chore: update comments * fix: rename ItemIcon CSS modifiers * fix: fix DetachedContainer modal CSS modifier case * chore: improve stylelint config * chore: update comments * chore: run lint * chore(examples): update icon class * fix: remove `aa-key-shadow` var * feat: use base `z-index` var * refactor: update CSS vars descriptions * docs: update comments * fix: inherit font family * fix: use CSS vars for font-weight * fix: extract description mark to CSS var * feat: design scrollbar * fix: edit spacing and alignments * feat: design products * fix: fix bottom scroll on Safari mobile * fix: fix stuck hover state issue on Safari mobile * chore(examples): set `categoriesPerItem` to 2 * chore: increase bundle size * fix: give full opacity to scroll bar * docs(examples): update playground products Co-authored-by: Kevin Granger <[email protected]> Co-authored-by: Sarah Dayan <[email protected]>
algolia · Apr 1, 2021 · 9bf41e2 · 9bf41e2
1 parent e3df81e
commit 9bf41e2
Show file tree

Hide file tree

Showing 24 changed files with 941 additions and 401 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -13,7 +13,9 @@
   "rules": {
     "order/properties-alphabetical-order": true,
     "no-descending-specificity": null,
-    "selector-class-pattern": ["^aa-[A-Za-z0-9-]*$"],
+    "selector-class-pattern": [
+      "^aa-(?:[A-Z][a-z]+)+(?:--[a-z]+(?:[A-Z][a-z]+)?)?$"
+    ],
     "prettier/prettier": true,
     "max-nesting-depth": null,
     "rule-empty-line-before": [

diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -23,6 +23,10 @@
     {
       "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",
       "maxSize": "4 kB"
+    },
+    {
+      "path": "packages/autocomplete-theme-classic/dist/theme.css",
+      "maxSize": "4.25 kB"
     }
   ]
 }
diff --git a/cypress/test-apps/js/app.tsx b/cypress/test-apps/js/app.tsx
@@ -131,7 +131,7 @@ type ProductItemProps = {
 function ProductItem({ hit, insights, components }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
+      <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
       <div className="aa-ItemContent">

diff --git a/cypress/test-apps/js/categoriesPlugin.tsx b/cypress/test-apps/js/categoriesPlugin.tsx
@@ -54,7 +54,7 @@ export function createCategoriesPlugin({
             item({ item, components }) {
               return (
                 <Fragment>
-                  <div className="aa-ItemIcon aa-ItemIcon--no-border">
+                  <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                     <svg
                       viewBox="0 0 24 24"
                       width="18"

diff --git a/examples/playground/app.tsx b/examples/playground/app.tsx
@@ -45,6 +45,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
     'exact_matches',
     'categories',
   ],
+  categoriesPerItem: 2,
 });
 const categoriesPlugin = createCategoriesPlugin({ searchClient });
 
@@ -82,6 +83,16 @@ autocomplete({
                 },
               },
             ],
+          }).then(([hits]) => {
+            return hits.map((hit) => ({
+              ...hit,
+              comments: hit.popularity % 100,
+              sale: hit.free_shipping,
+              // eslint-disable-next-line @typescript-eslint/camelcase
+              sale_price: hit.free_shipping
+                ? (hit.price - hit.price / 10).toFixed(2)
+                : hit.price,
+            }));
           });
         },
         templates: {
@@ -122,24 +133,159 @@ type ProductItemProps = {
 function ProductItem({ hit, insights, components }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
-        <img src={hit.image} alt={hit.name} width="40" height="40" />
-      </div>
       <div className="aa-ItemContent">
-        <div className="aa-ItemContentTitle">
-          <components.Snippet hit={hit} attribute="name" />
+        <div className="aa-ItemVisual aa-ItemIcon aa-ItemIcon--alignTop">
+          <img src={hit.image} alt={hit.name} width="40" height="40" />
         </div>
-        <div className="aa-ItemContentDescription">
-          <components.Snippet hit={hit} attribute="description" />
+
+        <div className="aa-ItemContentBody">
+          <div className="aa-ItemContentTitle">
+            <components.Snippet hit={hit} attribute="name" />
+          </div>
+          <div className="aa-ItemContentDescription">
+            By <strong>{hit.brand}</strong> in{' '}
+            <strong>{hit.categories[0]}</strong>
+          </div>
+
+          <div
+            className="aa-ItemContentDescription"
+            style={{
+              display: 'grid',
+              gridAutoFlow: 'column',
+              justifyContent: 'start',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            {hit.rating > 0 && (
+              <div className="aa-ItemContentDescription">
+                <div
+                  style={{
+                    color: 'rgba(var(--aa-muted-color-rgb), 0.5)',
+                  }}
+                >
+                  {Array.from({ length: 5 }, (_value, index) => {
+                    const isFilled = hit.rating >= index + 1;
+
+                    return (
+                      <svg
+                        key={index}
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill={isFilled ? 'currentColor' : 'none'}
+                        stroke="currentColor"
+                        strokeWidth="1"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                      </svg>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+            <div
+              style={{
+                display: 'grid',
+                gridAutoFlow: 'column',
+                justifyContent: 'start',
+                alignItems: 'center',
+                gap: 4,
+              }}
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style={{
+                  position: 'relative',
+                  top: '1px',
+                }}
+              >
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+              <span>{hit.comments.toLocaleString()}</span>
+            </div>
+          </div>
+
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <div
+              style={{
+                display: 'grid',
+                gridAutoFlow: 'column',
+                justifyContent: 'start',
+                alignItems: 'center',
+                gap: 4,
+              }}
+            >
+              <div>
+                <span
+                  style={{
+                    color: '#000',
+                    fontSize: '0.9em',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  ${hit.sale_price.toLocaleString()}
+                </span>{' '}
+                {hit.sale && (
+                  <span
+                    style={{
+                      color: 'rgb(var(--aa-muted-color-rgb))',
+                      fontSize: '0.9em',
+                      textDecoration: 'line-through',
+                    }}
+                  >
+                    ${hit.price.toLocaleString()}
+                  </span>
+                )}
+              </div>
+              {hit.sale && (
+                <span
+                  style={{
+                    textTransform: 'uppercase',
+                    fontSize: '0.64em',
+                    background: '#539753',
+                    color: '#fff',
+                    fontWeight: 600,
+                    borderRadius: 9999,
+                    padding: '2px 6px',
+                    display: 'inline-block',
+                    lineHeight: '1.25em',
+                  }}
+                >
+                  On sale
+                </span>
+              )}
+            </div>
+          </div>
         </div>
       </div>
+
       <div className="aa-ItemActions">
         <button
           className="aa-ItemActionButton aa-TouchOnly aa-ActiveOnly"
           type="button"
           title="Select"
+          disabled={true}
+          style={{
+            pointerEvents: 'none',
+          }}
         >
-          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+          <svg viewBox="0 0 24 24" fill="currentColor">
             <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" />
           </svg>
         </button>
@@ -159,7 +305,7 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
             });
           }}
         >
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+          <svg viewBox="0 0 24 24" fill="currentColor">
             <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" />
           </svg>
         </button>

diff --git a/examples/playground/categoriesPlugin.tsx b/examples/playground/categoriesPlugin.tsx
@@ -36,7 +36,7 @@ export function createCategoriesPlugin({
                   params: {
                     facetName: 'categories',
                     facetQuery: query,
-                    maxFacetHits: query ? 3 : 10,
+                    maxFacetHits: query ? 3 : 5,
                   },
                 },
               ],
@@ -58,23 +58,24 @@ export function createCategoriesPlugin({
             item({ item, components }) {
               return (
                 <Fragment>
-                  <div className="aa-ItemIcon aa-ItemIcon--no-border">
-                    <svg
-                      viewBox="0 0 24 24"
-                      width="18"
-                      height="18"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-                      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-                      <line x1="12" y1="22.08" x2="12" y2="12" />
-                    </svg>
-                  </div>
                   <div className="aa-ItemContent">
+                    <div className="aa-ItemIcon aa-ItemIcon--noBorder">
+                      <svg
+                        viewBox="0 0 24 24"
+                        width="18"
+                        height="18"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                        <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                        <line x1="12" y1="22.08" x2="12" y2="12" />
+                      </svg>
+                    </div>
+
                     <div className="aa-ItemContentTitle">
                       <components.Highlight hit={item} attribute="label" />
                     </div>

diff --git a/examples/playground/shortcutsPlugin.tsx b/examples/playground/shortcutsPlugin.tsx
@@ -78,14 +78,14 @@ export const shortcutsPlugin: AutocompletePlugin<DarkModeItem, undefined> = {
             return createElement(
               Fragment,
               {},
-              createElement(
-                'div',
-                { className: 'aa-ItemIcon' },
-                isDarkThemeSelected() ? lightIcon : darkIcon
-              ),
               createElement(
                 'div',
                 { className: 'aa-ItemContent' },
+                createElement(
+                  'div',
+                  { className: 'aa-ItemIcon' },
+                  isDarkThemeSelected() ? lightIcon : darkIcon
+                ),
                 createElement(
                   'div',
                   { className: 'aa-ItemContentTitle' },

diff --git a/examples/playground/types/ProductHit.tsx b/examples/playground/types/ProductHit.tsx
@@ -3,6 +3,7 @@ import { Hit } from '@algolia/client-search';
 export type ProductRecord = {
   brand: string;
   categories: string[];
+  comments: number;
   description: string;
   free_shipping: boolean;
   hierarchicalCategories: {
@@ -20,6 +21,8 @@ export type ProductRecord = {
   price: number;
   prince_range: string;
   rating: number;
+  sale: boolean;
+  sale_price: number;
   type: string;
 };
 

diff --git a/examples/query-suggestions-with-hits/app.tsx b/examples/query-suggestions-with-hits/app.tsx
@@ -114,7 +114,7 @@ type ProductItemProps = {
 function ProductItem({ hit, insights, components }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
+      <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
       <div className="aa-ItemContent">

diff --git a/examples/query-suggestions-with-inline-categories/app.tsx b/examples/query-suggestions-with-inline-categories/app.tsx
@@ -33,7 +33,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
         item({ item, components }) {
           return (
             <Fragment>
-              <div className="aa-ItemIcon aa-ItemIcon--no-border">
+              <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                 <svg
                   viewBox="0 0 24 24"
                   width="18"

diff --git a/examples/recently-viewed-items/app.tsx b/examples/recently-viewed-items/app.tsx
@@ -90,7 +90,7 @@ type ProductItemProps = {
 function AutocompleteProductItem({ hit, components }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
+      <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
       <div className="aa-ItemContent">

diff --git a/examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx b/examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx
@@ -80,7 +80,7 @@ export function createLocalStorageRecentlyViewedItems<
                     <img src={item.image} alt={item.label} />
                   </div>
                 ) : (
-                  <div className="aa-ItemIcon aa-ItemIcon--no-border">
+                  <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                     <svg
                       viewBox="0 0 24 24"
                       width="18"