chore(dropdown): change so JS code do not have to mangle arrow icon

asudoh · May 2, 2018 · 879187f · 879187f
1 parent dac0975
commit 879187f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 17 deletions.
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -51,8 +51,7 @@
     }
   }
 
-  .#{$prefix}--dropdown__arrow,
-  .#{$prefix}--dropdown-text svg {
+  .#{$prefix}--dropdown__arrow {
     fill: $brand-01;
     position: absolute;
     right: 1rem;
@@ -125,8 +124,7 @@
   }
 
   .#{$prefix}--dropdown--open {
-    .#{$prefix}--dropdown__arrow,
-    .#{$prefix}--dropdown-text svg {
+    .#{$prefix}--dropdown__arrow {
       transform: rotate(-180deg);
     }
 
@@ -196,8 +194,7 @@
       outline: none;
     }
 
-    .#{$prefix}--dropdown__arrow,
-    .#{$prefix}--dropdown-text svg {
+    .#{$prefix}--dropdown__arrow {
       position: relative;
       top: -2px;
       left: 8px;

diff --git a/src/components/dropdown/dropdown--inline.html b/src/components/dropdown/dropdown--inline.html
@@ -1,6 +1,6 @@
 <ul data-dropdown data-value data-dropdown-type="inline" class="bx--dropdown bx--dropdown--inline" tabindex="0">
   <li class="bx--dropdown-text">
-    Inline Dropdown label
+    <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
     <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
       <path d="M10 0L5 5 0 0z"></path>
     </svg>

diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -141,19 +141,13 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
       detail: { item: itemToSelect },
     });
 
-    const caretHTML = `
-    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-    `;
-
     if (this.element.dispatchEvent(eventStart)) {
       if (this.element.dataset.dropdownType !== 'navigation') {
-        const text = this.element.querySelector(this.options.selectorText);
-        if (text && this.element.dataset.dropdownType !== 'inline') {
+        const selectorText =
+          this.element.dataset.dropdownType !== 'inline' ? this.options.selectorText : this.options.selectorTextInner;
+        const text = this.element.querySelector(selectorText);
+        if (text) {
           text.innerHTML = itemToSelect.innerHTML;
-        } else {
-          text.innerHTML = `${itemToSelect.innerHTML} ${caretHTML}`;
         }
         itemToSelect.classList.add(this.options.classSelected);
       }
@@ -197,6 +191,7 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
    * @type {Object}
    * @property {string} selectorInit The CSS selector to find selectors.
    * @property {string} [selectorText] The CSS selector to find the element showing the selected item.
+   * @property {string} [selectorTextInner] The CSS selector to find the element showing the selected item, used for inline mode.
    * @property {string} [selectorItem] The CSS selector to find clickable areas in dropdown items.
    * @property {string} [selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
    * @property {string} [classSelected] The CSS class for the selected dropdown item.
@@ -212,6 +207,7 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
     return {
       selectorInit: '[data-dropdown]',
       selectorText: `.${prefix}--dropdown-text`,
+      selectorTextInner: `.${prefix}--dropdown-text__inner`,
       selectorItem: `.${prefix}--dropdown-link`,
       selectorItemSelected: `.${prefix}--dropdown--selected`,
       classSelected: `${prefix}--dropdown--selected`,