fix(select): fix delay of arrow icon change on opening popup (#256)

Trendyol · Sep 29, 2022 · 17ee9be · 17ee9be
1 parent c178d69
commit 17ee9be
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -16,7 +16,8 @@ module.exports = {
         'tooltip',
         'progress-indicator',
         'checkbox',
-        'alert'
+        'alert',
+        'select'
       ],
     ],
   },

diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css
@@ -94,6 +94,18 @@
   font-size: var(--bl-font-size-m);
 }
 
+.dropdown-icon.open {
+  display: none;
+}
+
+.select-open .dropdown-icon.open {
+  display: inline-block;
+}
+
+.select-open .dropdown-icon.closed {
+  display: none;
+}
+
 .selected .dropdown-icon {
   --icon-color: var(--bl-color-secondary);
 }

diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts
@@ -27,7 +27,8 @@ describe('bl-select', () => {
             variant="secondary"
           >
           </bl-button>
-          <bl-icon  class="dropdown-icon" name="arrow_down"></bl-icon>
+          <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
+          <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
           </div>
         </div>
         <div class="popover">

diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
@@ -211,8 +211,13 @@ export default class BlSelect extends LitElement {
       <div class="actions">
         ${removeButton}
         <bl-icon
-          class="dropdown-icon"
-          name="${this._isPopoverOpen ? 'arrow_up' : 'arrow_down'}"
+          class="dropdown-icon open"
+          name="arrow_up"
+        ></bl-icon>
+
+        <bl-icon
+          class="dropdown-icon closed"
+          name="arrow_down"
         ></bl-icon>
       </div>
     </div>`;