feat(dropdown): added inline dropdown, style changes to dropdown, fix…

…ed link in data table readme (carbon-design-system#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js
asudoh · May 21, 2018 · ffe5e04 · ffe5e04
1 parent 1a7a071
commit ffe5e04
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 32 deletions.
diff --git a/src/components/dropdown/dropdown--inline.html b/src/components/dropdown/dropdown--inline.html
diff --git a/src/components/dropdown/dropdown.config.js b/src/components/dropdown/dropdown.config.js
@@ -31,5 +31,12 @@ module.exports = {
         light: true,
       },
     },
+    {
+      name: 'inline',
+      label: 'Inline',
+      context: {
+        inline: true,
+      },
+    },
   ],
 };
diff --git a/src/components/dropdown/dropdown.hbs b/src/components/dropdown/dropdown.hbs
@@ -1,8 +1,19 @@
-<ul data-dropdown data-value class="bx--dropdown{{#if up}} bx--dropdown--up{{/if}}{{#if light}} bx--dropdown--light{{/if}}" tabindex="0">
-  <li class="bx--dropdown-text">Dropdown label</li>
-  <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>
+<ul data-dropdown{{#if inline}} data-dropdown-type="inline"{{/if}} data-value class="bx--dropdown{{#if up}} bx--dropdown--up{{/if}}{{#if light}} bx--dropdown--light{{/if}}{{#if inline}} bx--dropdown--inline{{/if}}" tabindex="0">
+  <li class="bx--dropdown-text">
+    {{#unless inline}}
+      Dropdown label
+    {{else}}
+      <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>
+    {{/unless}}
+  </li>
+  {{#unless inline}}
+    <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>
+  {{/unless}}
   <li>
     <ul class="bx--dropdown-list">
       <li data-option data-value="all" class="bx--dropdown-item">