feat(search bar): make categories more visible

samply · Oct 13, 2023 · 58c986f · 58c986f
1 parent f2fa776
commit 58c986f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/demo/src/styles/default/searchbars.css b/packages/demo/src/styles/default/searchbars.css
@@ -117,10 +117,18 @@ lens-search-bar-multiple::part(lens-searchbar-autocomplete-options) {
   border-bottom-right-radius: var(--border-radius-small);
 }
 
-lens-search-bar::part(lens-searchbar-autocomplete-options-item),
+lens-search-bar::part(autocomplete-options-category-name),
+lens-search-bar-multiple::part(autocomplete-category-category-name) {
+  padding: var(--gap-xs) var(--gap-s);
+  font-weight: bold;
+
+}
+
+
+  lens-search-bar::part(lens-searchbar-autocomplete-options-item),
 lens-search-bar-multiple::part(lens-searchbar-autocomplete-options-item) {
   cursor: pointer;
-  padding: var(--gap-xs) var(--gap-s);
+  padding: var(--gap-xs) var(--gap-m);
 }
 
 lens-search-bar::part(lens-searchbar-autocomplete-options-item-focused),
@@ -135,7 +143,7 @@ lens-search-bar-multiple::part(autocomplete-options-item-description) {
   font-size: var(--font-size-s);
   padding-top: var(--gap-xs);
   padding-right: var(--gap-m);
-  padding-left: var(--gap-xs);
+  /* padding-left: var(--gap-xs); */
 }
 lens-search-bar::part(autocomplete-options-item-description-focused),
 lens-search-bar-multiple::part(autocomplete-options-item-description-focused) {

diff --git a/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte b/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
@@ -350,7 +350,7 @@
             {#if $inputOptions?.length > 0}
                 {#each $inputOptions as inputOption, i}
                     {#if $inputOptions.map( option => option.name).indexOf(inputOption.name) === i}
-                        <div part="autocomplete-options-item-name">
+                        <div part="autocomplete-options-category-name">
                             {@html getBoldedText(inputOption.name)}
                         </div>
                     {/if}
@@ -390,8 +390,6 @@
                         >
                             <div part="autocomplete-options-item-name">
                                 {@html getBoldedText(
-                                    inputOption.name +
-                                        " : " +
                                         inputOption.criterion.name
                                 )}
                             </div>