Merge pull request #86 from samply/refactor/fix-delete-icon-css

feat(searchbar): fix css of delete icon
samply · May 23, 2024 · 54232b9 · 54232b9
2 parents 9544186 + edb4c94
commit 54232b9
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 8 deletions.
diff --git a/packages/demo/public/delete_icon.svg b/packages/demo/public/delete_icon.svg
diff --git a/packages/demo/public/options.json b/packages/demo/public/options.json
@@ -1,5 +1,6 @@
 {
     "iconOptions": {
+        "deleteUrl": "delete_icon.svg",
         "infoUrl": "info-circle-svgrepo-com.svg",
         "selectAll": {
             "text": "Add all"

diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -307,15 +307,31 @@ lens-search-bar-multiple::part(info-button-dialogue) {
   text-align: left;
 }
 
-lens-search-bar-multiple::part(query-delete-button-item) {
-  border-color: var(--white);
+lens-search-bar::part(delete-button-icon-item), 
+lens-search-bar-multiple::part(delete-button-icon-item) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
+  transform: translate(-1px, -1px);
+  width: 20px;
 }
 
-lens-search-bar-multiple::part(query-delete-button-group) {
-  background-color: var(--white);
-  border-color: var(--white);
+lens-search-bar::part(delete-button-icon-group), 
+lens-search-bar-multiple::part(delete-button-icon) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
+  transform: translate(0px, 2px);
+}
+
+lens-search-bar::part(delete-button-icon),
+lens-search-bar-multiple::part(delete-button-icon-value) {
+  transform: translate(-1px, -1px);
+  width: 20px;
+}
+
+lens-search-bar::part(delete-button-icon):hover,
+lens-search-bar-multiple::part(delete-button-icon-value):hover {
+  filter: invert(38%) sepia(78%) saturate(1321%) hue-rotate(352deg) brightness(92%) contrast(99%);
 }
 
+
 lens-search-button::part(lens-search-button) {
   background-color: var(--light-blue);
 }
@@ -326,7 +342,6 @@ lens-search-button::part(lens-search-button):hover {
 
 lens-search-button::part(lens-search-button):active {
   background-color: #003d7e;
-  transform: translateX(1px);
 }
 
 /**

diff --git a/packages/lib/src/components/Options.wc.svelte b/packages/lib/src/components/Options.wc.svelte
@@ -35,6 +35,12 @@
                     ) {
                         store.set("infoUrl", options.iconOptions.infoUrl);
                     }
+                    if (
+                        "deleteUrl" in options.iconOptions &&
+                        typeof options.iconOptions["deleteUrl"] === "string"
+                    ) {
+                        store.set("deleteUrl", options.iconOptions.deleteUrl);
+                    }
                     if (
                         "selectAll" in options.iconOptions &&
                         typeof options.iconOptions["selectAll"] === "object" &&

diff --git a/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte b/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
@@ -4,9 +4,12 @@
         removeItemFromQuery,
         removeValueFromQuery,
     } from "../../stores/query";
+    import { iconStore } from "../../stores/icons";
     import type { QueryItem } from "../../types/queryData";
     export let itemToDelete: { type: string; index: number; item?: QueryItem };
 
+    $: deleteUrl = $iconStore.get("deleteUrl");
+
     const { type, index, item } = itemToDelete;
 
     /**
@@ -34,5 +37,15 @@
 
 <button
     part="query-delete-button query-delete-button-{type}"
-    on:click={deleteItem}>&#x2715;</button
+    on:click={deleteItem}
 >
+    {#if deleteUrl}
+        <img
+            part="delete-button-icon delete-button-icon-{type}"
+            src={deleteUrl}
+            alt="delete icon"
+        />
+    {:else}
+        &#x2715;
+    {/if}
+</button>
diff --git a/packages/lib/src/styles/searchbars.css b/packages/lib/src/styles/searchbars.css
@@ -204,7 +204,7 @@ lens-search-bar-multiple::part(query-delete-button-item) {
   position: absolute;
   top: -6px;
   right: -10px;
-  border: solid 2px var(--white);
+  border: solid 1px var(--white);
 }
 
 lens-search-bar::part(query-delete-button-group),