How to markup a dropdown menu in button group

[stomita]

I can create a button with dropdown menu and there are examples of markup in official page.
But when it comes to set a dropdown menu button in button group, it seems there is no example.

I tried following:

  <div class="slds-button-group" role="group">
    <button class="slds-button slds-button--neutral">Save</button>
    <div class="slds-dropdown-trigger">
      <button class="slds-button slds-button--icon-border-filled">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Actions</span>
      </button>
      <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
        <ul class="slds-dropdown__list" role="menu">
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Save as</a></li>
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Delete</a></li>
        </ul>
      </div>
    </div>
  </div>

But the result includes spacer in buttons (not grouped).

Is there any correct way to achieve the UI ?

[stomita]

I could create the desired UI by following markup, but it looks creepy...

  <div class="slds-button-group" role="group">
    <button class="slds-button slds-button--neutral">Save</button>
    <div class="slds-dropdown-trigger">
      <div class="slds-button-group">
        <button class="slds-button" style="display: none"></button>
        <button class="slds-button slds-button--icon-border-filled">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Actions</span>
        </button>
      </div>
      <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
        <ul class="slds-dropdown__list" role="menu">
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Save as</a></li>
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Delete</a></li>
        </ul>
      </div>
    </div>
  </div>

[stefsullrew]

Hi @stomita, you'll need to add the class .slds-button--last to your .slds-dropdown-trigger div element. It's mentioned in the component chart on the button-groups page: http://www.lightningdesignsystem.com/components/button-groups (And if you go to the page header component, you can see an example of it on the Record Home variant.)

Cheers!

[stomita]

Thanks @stefsullrew, it surely solves.

I'll write down the updated markup here for later reference.

  <div class="slds-button-group" role="group">
    <button class="slds-button slds-button--neutral">Save</button>
    <div class="slds-dropdown-trigger slds-button--last">
      <button class="slds-button slds-button--icon-border-filled">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Actions</span>
      </button>
      <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
        <ul class="slds-dropdown__list" role="menu">
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Save as</a></li>
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Delete</a></li>
        </ul>
      </div>
    </div>
  </div>