feat(select): seperate divider from remove button, be smaller icons a…

…nd give padding, improve storybook for select
Trendyol · Dec 26, 2023 · 2fc9859 · 2fc9859
1 parent 96cf8f4
commit 2fc9859
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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>