Problem/Motivation
During #1899236: Add new Splitbutton render element to eventually replace Dropbutton 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
Comment #1
LewisNyman CreditAttribution: LewisNyman commentedComment #2
LewisNyman CreditAttribution: LewisNyman commentedComment #3
tim.plunkettWell dropbuttons used to be fine, but are now broken in 2/3 core themes. So we have to wait on that first.
Comment #4
LewisNyman CreditAttribution: LewisNyman commentedComment #5
LewisNyman CreditAttribution: LewisNyman commentedI'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.
Comment #6
nod_Pretty sure that'll be needed.