Change the dropbutton theme function to ensure consistent output and accommodate the splitbutton design

Created on 2 June 2014, almost 11 years ago

Updated 25 March 2025, 13 days ago

Problem/Motivation

During ✨ Add new Splitbutton render element to eventually replace Dropbutton Needs work 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

📌 Task

Status

Postponed: needs info

Version

11.0 🔥

Component

theme system

Created by

🇬🇧United Kingdom lewisnyman Nomadic

Live updates comments and jobs are added and updated live.

frontend

CSS
It involves the content or handling of Cascading Style Sheets.

Drupalaton 2014

JavaScript

stale-issue-cleanup
To track issues in the developing policy for closing stale issues, [Policy, no patch] closing older issues

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment 13 days ago →
🇺🇸United States smustgrave
Thank you for creating this issue to improve Drupal.

We are working to decide if this task is still relevant to a currently supported version of Drupal. There hasn't been any discussion here for over 8 years which suggests that this has either been implemented or is no longer relevant. Your thoughts on this will allow a decision to be made.

Since we need more information to move forward with this issue, the status is now Postponed (maintainer needs more info). If we don't receive additional information to help with the issue, it may be closed after three months.

Thanks!

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024