From 2fc98595b4045c17b27e3e2c1c291c921fbde8b8 Mon Sep 17 00:00:00 2001
From: Erbil Nas <erbil.nas@trendyol.com>
Date: Tue, 26 Dec 2023 14:33:07 +0300
Subject: [PATCH] feat(select): seperate divider from remove button, be smaller
 icons and give padding, improve storybook for select

---
 src/components/select/bl-select.css         | 22 ++++++++++-----------
 src/components/select/bl-select.stories.mdx |  5 +++--
 src/components/select/bl-select.ts          | 15 +++++++++-----
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css
index 00f37022..ad68bf2c 100644
--- a/src/components/select/bl-select.css
+++ b/src/components/select/bl-select.css
@@ -103,15 +103,6 @@
   display: none;
 }
 
-.remove-all::after {
-  content: "";
-  position: absolute;
-  left: 1.5rem;
-  bottom: 4px;
-  height: 1rem;
-  border-left: 1px solid var(--bl-color-neutral-lighter);
-}
-
 .selected .remove-all {
   display: block;
 }
@@ -193,7 +184,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--bl-size-2xs);
+  gap: var(--bl-size-4xs);
   margin-left: var(--bl-size-2xs);
 }
 
@@ -397,7 +388,12 @@ legend span {
   animation: spin 1s linear infinite;
 }
 
-.search-bar-divider {
+.action-divider {
+  display: none;
+}
+
+.select-wrapper .action-divider {
+  display: block;
   height: 1rem;
   width: 1px;
   background-color: var(--bl-color-neutral-lighter);
@@ -412,3 +408,7 @@ legend span {
     transform: rotate(360deg);
   }
 }
+
+.actions bl-icon {
+  padding: 4px;
+}
diff --git a/src/components/select/bl-select.stories.mdx b/src/components/select/bl-select.stories.mdx
index 6ec1b5fd..9dcdc067 100644
--- a/src/components/select/bl-select.stories.mdx
+++ b/src/components/select/bl-select.stories.mdx
@@ -255,16 +255,17 @@ Select component can be disabled by using `disabled` attribute.
 ## Searchable
 
 <bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/265#issuecomment-1845414216)</bl-badge>
-<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=13059%3A6927)</bl-badge>
 
 Select component can be searchable by using `search-bar` attribute.
 
+Display a loading icon in place of the search icon with using `search-bar-loading-state` attribute, seamlessly integrating it with your API endpoint to provide a smooth user experience during data retrieval.
+
 <Canvas>
   <Story name="Searchable" args={{ searchBar: true, searchBarPlaceholder: 'Search your options' }}>
     {SelectTemplate.bind({})}
   </Story>
 
-  <Story name="Searchable with Multiple Option" args={{ searchBar: true,  searchBarPlaceholder: 'Search your options', multiple: true }}>
+  <Story name="Searchable with Multiple Option" args={{ searchBar: true,  searchBarPlaceholder: 'Search your options', multiple: true, viewSelectAll: true }}>
     {SelectTemplate.bind({})}
   </Story>
 
diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
index ee82b506..6c21fa5f 100644
--- a/src/components/select/bl-select.ts
+++ b/src/components/select/bl-select.ts
@@ -377,19 +377,24 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
         ></bl-button>`
       : "";
 
+    const isSearchBarVisible = this.searchBar && this.opened;
+    const isMultipleWithSelection = this.multiple && this._selectedOptions.length > 0;
+
+    const isDividerShown = isSearchBarVisible || isMultipleWithSelection;
+
     const searchMagIcon = html`<bl-icon
       class="search-mag-icon"
       name="search"
-      style="color: var(--bl-color-primary)"
+      style="color: var(--bl-color-primary);font-size: var(--bl-font-size-s)"
     ></bl-icon>`;
 
     const searchLoadingIcon = html`<bl-icon
       class="search-loading-icon"
       name="loading"
-      style="color: var(--bl-color-primary)"
+      style="color: var(--bl-color-primary);font-size: var(--bl-font-size-s)"
     ></bl-icon>`;
 
-    const searchActionDivider = html`<div class="search-bar-divider"></div>`;
+    const actionDivider = isDividerShown ? html`<div class="action-divider"></div>` : "";
 
     const search = html`<fieldset
       class=${classMap({
@@ -423,7 +428,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
 
       <div class="actions" @click=${this.togglePopover}>
         ${this.opened ? (this.searchBarLoadingState ? searchLoadingIcon : searchMagIcon) : ""}
-        ${this.opened ? searchActionDivider : removeButton}
+        ${!this.opened ? removeButton : ""} ${actionDivider}
         <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
 
         <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
@@ -451,7 +456,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
           ${inputSelectedOptions}
           <span class="additional-selection-count">+${this._additionalSelectedOptionCount}</span>
           <div class="actions">
-            ${removeButton}
+            ${removeButton} ${actionDivider}
             <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
 
             <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>