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

src/components/data-table-v2/README.md

@@ -69,7 +69,7 @@ The update to tables splits out the `scss` files into multiple partial files wit
 ### FAQ
 
 **How do I sort the tables**
-The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action `here`.
+The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action [in the React Storybook](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20sorting&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).
 
 **How do I use the expandable rows**
 If you would like to programmatically expand table rows, you can add the `bx--expandable-row-v2` to the `selectorParentRows` elements.

src/components/dropdown/_dropdown.scss

@@ -109,6 +109,7 @@
     display: block;
     color: currentColor;
     text-decoration: none;
+    font-weight: normal;
     padding: $spacing-md $spacing-lg $spacing-md $spacing-md;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -152,4 +153,60 @@
       outline: none;
     }
   }
+
+  .#{$prefix}--dropdown--inline {
+    background-color: transparent;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus .#{$prefix}--dropdown-text {
+      @include focus-outline('border');
+    }
+
+    &[data-value=''] .#{$prefix}--dropdown-text {
+      color: $brand-01;
+    }
+
+    .#{$prefix}--dropdown-text {
+      display: inline-block;
+      padding-right: 1.5rem;
+      overflow: visible;
+      color: $brand-01;
+    }
+
+    .#{$prefix}--dropdown-text:hover {
+      background-color: $field-01;
+    }
+
+    &.#{$prefix}--dropdown--open:focus {
+      box-shadow: none;
+    }
+
+    &.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-list {
+      @include layer('overlay');
+    }
+
+    &.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-text {
+      outline: none;
+    }
+
+    .#{$prefix}--dropdown__arrow {
+      position: relative;
+      top: -2px;
+      left: 8px;
+      right: 0;
+      bottom: 0;
+    }
+
+    .#{$prefix}--dropdown-link {
+      font-weight: normal;
+    }
+
+    .#{$prefix}--dropdown-link:hover {
+      background-color: $field-01;
+      color: $text-01;
+    }
+  }
 }

src/components/dropdown/dropdown--inline.html

@@ -0,0 +1,27 @@
+<ul data-dropdown data-dropdown-type="inline" data-value class="bx--dropdown bx--dropdown--inline" tabindex="0">
+  <li class="bx--dropdown-text">
+    <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>
+  </li>
+  <li>
+    <ul class="bx--dropdown-list">
+      <li data-option data-value="all" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a>
+      </li>
+      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a>
+      </li>
+      <li data-option data-value="staging" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
+      </li>
+      <li data-option data-value="dea" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a>
+      </li>
+      <li data-option data-value="router" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a>
+      </li>
+    </ul>
+  </li>
+</ul>

src/components/dropdown/dropdown.js

@@ -143,7 +143,9 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
 
     if (this.element.dispatchEvent(eventStart)) {
       if (this.element.dataset.dropdownType !== 'navigation') {
-        const text = this.element.querySelector(this.options.selectorText);
+        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;
         }
@@ -189,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.
@@ -204,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`,

src/components/select/README.md

@@ -1,3 +1,8 @@
+#### Inline Select width
+
+The width of the inline select box should be the width of the default placeholder text + 16px/1rem of padding.
+There should be 10px of padding between the placeholder text and the caret.
+
 #### Using Form Validation
 
 Carbon Components provides HTML attributes and CSS to enable form validation for each input or control.