make dropbutton component follow css coding standards [#2428193]

Problem/Motivation

The dropbutton dont follow the css coding standard. Makes it hard for themers to figure out which classes are used by javascript and which are not
[#1887918#separate-concerns]

This issue came up as we were cleaning up templates, in core as part of the banana#2

Proposed resolution

* prefix everything that the dropbutton component required of classnames with .js- refactore the css, to reflect that and ensure that the css files gets * splitted up in MAT filestructure [#1887922]
* component must be completely functional with the module.css file (or component) and running in stark, with not theme.css files loaded
* component keeps same design when *.theme.css is activated in classy, stark & seven.

dropbutton is placed on these pages
/node/1/edit
/admin/structure/views/view/aggregator_rss_feed/edit/page_1
/admin/structure/types/manage/page/fields

Remaining tasks

User interface changes

API changes

Comment	File	Size	Author
#3	dropbottom-2.diff	43.15 KB	mortendk
#3
	dropbottom.diff	39.97 KB	mortendk

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

17 February 2015 at 19:38

Status:

Needs review

» Needs work

The last submitted patch, dropbottom.diff, failed testing.

Comment #2

mortendk CreditAttribution: mortendk commented 17 February 2015 at 21:14

Issue tags:

+jsbanana

Comment #3

mortendk CreditAttribution: mortendk commented 17 February 2015 at 23:52

Status:

Needs work

» Needs review

File	Size
dropbottom-2.diff	43.15 KB

structure in a more BEM like way

<div class="js-dropbutton-wrapper js-dropbutton-processed js-dropbutton-wrapper--multiple">
  <div class="js-dropbutton-widget">
  <ul class="js-dropbutton">
  <li class="publish js-dropbutton-action">
    <input type="submit" name="op" value="Save and keep published" class="button form-submit">
  </li>
  <li class="js-dropbutton__toggle">
    <button type="button">
      <span class="js-dropbutton__toggle__arrow">
        <span class="visually-hidden">List additional actions</span>
      </span>
    </button>
  </li>
  <li class="unpublish js-dropbutton-action js-dropbutton__secondary-action">
    <input type="submit" name="op" value="Save and unpublish" class="button form-submit">
  </li>
</ul>
</div>

Comment #4

18 February 2015 at 00:11

Status:

Needs review

» Needs work

The last submitted patch, 3: dropbottom-2.diff, failed testing.

Comment #5

LewisNyman

he/him

CreditAttribution: LewisNyman commented 20 February 2015 at 21:15

Status:

Needs work

» Closed (duplicate)

Closing as a duplicate of #2278473: Simplify Dropbutton markup in line with our CSS standards, please post the patch there.

Also see: #1899236: Add new Splitbutton render element to eventually replace Dropbutton

Comment #6

mortendk CreditAttribution: mortendk commented 20 February 2015 at 22:03

lewis im not sure im agreeing that this is a duplicate of the issue. This is not rewriting the markup this is purely seperating the css names from the js