Problem/Motivation

During #1899236: [meta] Rewrite dropbutton into splitbutton we found that the inconsistency of output of dropbutton make it very difficult to theme consistently, during implementation of #1989470: Dropbutton style update for Seven we ended up having to write a lot of CSS specifically for certain pages to keep them consistent.

This is a good opportunity to modify the theme function to accommodate the split button design

Proposed resolution

Let's figure out how the structure the theme function to ensure consistent mark up

Target markup, based on the SeventyEight sandbox:

      <div class="button-group" data-split-button>
        <button class="button" type="button">Primary action</button>
        <button class="button button--iconic button--popup js-popup" type="button" aria-haspopup="true" data-target="popup-4" data-component="popup"><i class="caret"><span class="visually-hidden">Menu</span></i></button>
      </div>

      <div class="popup" id="popup-4" aria-hidden="true">
        <ul class="menu js-menu" role="menu" data-component="menu" tabindex="-1">
          <li role="presentation">
            <a href="#" class="menu__item js-menu__item" role="menuitem" id="ui-id-14">Secondary action 1</a>
          </li>
          <li role="presentation">
            <a href="#" class="menu__item js-menu__item" role="menuitem" id="ui-id-15">Secondary action 2</a>
          </li>
          <li role="presentation">
            <a href="#" class="menu__item js-menu__item" role="menuitem" id="ui-id-16">Secondary action 3</a>
          </li>
        </ul>
      </div>

Bearing in mind that the actual html elements are decided by the modules calling the theme function.

Remaining tasks

Figure out a plan
Write a patch
Test

User interface changes

None

API changes

Changes to the dropbutton theme function

Comments

LewisNyman’s picture

LewisNyman’s picture

Title: Change the dropbutton theme function to ensure consistent output » Change the dropbutton theme function to ensure consistent output and accommodate the splitbutton design
Issue summary: View changes
tim.plunkett’s picture

Status: Active » Postponed

Well dropbuttons used to be fine, but are now broken in 2/3 core themes. So we have to wait on that first.

LewisNyman’s picture

Status: Postponed » Active
LewisNyman’s picture

Issue summary: View changes
Issue tags: +dreammarkup, +Drupalaton 2014

I've added the markup we used in the Seven Styleguide sandbox, it needs a few tweaks to keep inline with how we do things in Drupal 8 (eg. icons, helper classes). I think the main objective here is allowing the theme function to support grouping of the secondary actions into a separate container, instead of sitting next to the primary action.

nod_’s picture

Issue tags: +JavaScript

Pretty sure that'll be needed.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.