diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index eb62701..c1aa3a9 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -194,7 +194,7 @@ drupal.dropbutton:
js:
misc/dropbutton/dropbutton.js: {}
css:
- component:
+ theme:
misc/dropbutton/dropbutton.css: {}
dependencies:
- core/jquery
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 733fc9f..9d8e845 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1720,7 +1720,7 @@ function drupal_common_theme() {
'variables' => array('links' => array(), 'attributes' => array('class' => array('links')), 'heading' => array(), 'set_active_class' => FALSE),
),
'dropbutton_wrapper' => array(
- 'variables' => array('children' => NULL),
+ 'variables' => array('attributes' => array(), 'children' => NULL),
),
'image' => array(
// HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft
diff --git a/core/lib/Drupal/Core/Render/Element/Dropbutton.php b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
index 76fab89..c690089 100644
--- a/core/lib/Drupal/Core/Render/Element/Dropbutton.php
+++ b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
@@ -34,7 +34,8 @@ public function getInfo() {
*/
public static function preRenderDropbutton($element) {
$element['#attached']['library'][] = 'core/drupal.dropbutton';
- $element['#attributes']['class'][] = 'dropbutton';
+ $element['#attributes']['class'][] = 'dropbutton__menu';
+ $element['#attributes']['class'][] = 'js-dropbutton__menu';
if (!isset($element['#theme_wrappers'])) {
$element['#theme_wrappers'] = array();
}
diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css
deleted file mode 100644
index 5990514..0000000
--- a/core/misc/dropbutton/dropbutton.css
+++ /dev/null
@@ -1,164 +0,0 @@
-
-/**
- * @file
- * Base styles for dropbuttons.
- */
-
-/**
- * When a dropbutton has only one option, it is simply a button.
- */
-.dropbutton-wrapper,
-.dropbutton-wrapper div {
- box-sizing: border-box;
-}
-.js .dropbutton-wrapper,
-.js .dropbutton-widget {
- display: block;
- position: relative;
-}
-
-@media screen and (max-width:600px) {
- .js .dropbutton-wrapper {
- width: 100%;
- }
-}
-
-/* Splitbuttons */
-@media screen and (min-width:600px) {
- .form-actions .dropbutton-wrapper {
- float: left; /* LTR */
- }
- [dir="rtl"] .form-actions .dropbutton-wrapper {
- float: right;
- }
-}
-.js .form-actions .dropbutton-widget {
- position: static;
-}
-.js td .dropbutton-widget {
- position: absolute;
-}
-.js td .dropbutton-wrapper {
- min-height: 2em;
-}
-.js td .dropbutton-multiple {
- padding-right: 10em; /* LTR */
- margin-right: 2em; /* LTR */
- max-width: 100%;
-}
-[dir="rtl"].js td .dropbutton-multiple {
- padding-right: 0;
- margin-right: 0;
- padding-left: 10em;
- margin-left: 2em;
-}
-.js td .dropbutton-multiple .dropbutton-action a,
-.js td .dropbutton-multiple .dropbutton-action input,
-.js td .dropbutton-multiple .dropbutton-action button {
- width: auto;
-}
-
-/* UL styles are over-scoped in core, so this selector needs weight parity. */
-.js .dropbutton-widget .dropbutton {
- list-style-image: none;
- list-style-type: none;
- margin: 0;
- overflow: hidden;
- padding: 0;
-}
-.js .dropbutton li,
-.js .dropbutton a {
- display: block;
- outline: none;
-}
-
-.js .dropbutton li:hover,
-.js .dropbutton li:focus,
-.js .dropbutton a:hover,
-.js .dropbutton a:focus {
- outline: initial;
-}
-
-/**
- * The dropbutton styling.
- *
- * A dropbutton is a widget that displays a list of action links as a button
- * with a primary action. Secondary actions are hidden behind a click on a
- * twisty arrow.
- *
- * The arrow is created using border on a zero-width, zero-height span.
- * The arrow inherits the link color, but can be overridden with border colors.
- */
-.js .dropbutton-multiple .dropbutton-widget {
- padding-right: 2em; /* LTR */
-}
-.js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
- padding-left: 2em;
- padding-right: 0;
-}
-.dropbutton-multiple.open,
-.dropbutton-multiple.open .dropbutton-widget {
- max-width: none;
-}
-.dropbutton-multiple.open {
- z-index: 100;
-}
-.dropbutton-multiple .dropbutton .secondary-action {
- display: none;
-}
-.dropbutton-multiple.open .dropbutton .secondary-action {
- display: block;
-}
-.dropbutton-toggle {
- bottom: 0;
- display: block;
- position: absolute;
- right: 0; /* LTR */
- text-indent: 110%;
- top: 0;
- white-space: nowrap;
- width: 2em;
-}
-[dir="rtl"] .dropbutton-toggle {
- left: 0;
- right: auto;
-}
-.dropbutton-toggle button {
- background: none;
- border: 0;
- cursor: pointer;
- display: block;
- height: 100%;
- margin: 0;
- padding: 0;
- width: 100%;
-}
-.dropbutton-toggle button:hover,
-.dropbutton-toggle button:focus {
- outline: initial;
-}
-.dropbutton-arrow {
- border-bottom-color: transparent;
- border-left-color: transparent;
- border-right-color: transparent;
- border-style: solid;
- border-width: 0.3333em 0.3333em 0;
- display: block;
- height: 0;
- line-height: 0;
- position: absolute;
- right: 40%; /* 0.6667em; */ /* LTR */
- top: 50%;
- margin-top: -0.1666em;
- width: 0;
- overflow: hidden;
-}
-[dir="rtl"] .dropbutton-arrow {
- left: 0.6667em;
- right: auto;
-}
-.dropbutton-multiple.open .dropbutton-arrow {
- border-bottom: 0.3333em solid;
- border-top-color: transparent;
- top: 0.6667em;
-}
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index 4f7645c..c132d39 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -8,18 +8,18 @@
"use strict";
/**
- * Process elements with the .dropbutton class on page load.
+ * Process elements with the .js-dropbutton class on page load.
*
* @type {Drupal~behavior}
*/
Drupal.behaviors.dropButton = {
attach: function (context, settings) {
- var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
+ var $dropbuttons = $(context).find('.js-dropbutton').once('dropbutton__menu');
if ($dropbuttons.length) {
// Adds the delegated handler that will toggle dropdowns on click.
var $body = $('body').once('dropbutton-click');
if ($body.length) {
- $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
+ $body.on('click', '.dropbutton__trigger', dropbuttonClickHandler);
}
// Initialize all buttons.
var il = $dropbuttons.length;
@@ -39,7 +39,7 @@
*/
function dropbuttonClickHandler(e) {
e.preventDefault();
- $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
+ $(e.target).closest('.js-dropbutton').toggleClass('is-open');
}
/**
@@ -71,27 +71,30 @@
/**
* @type {jQuery}
*/
- this.$list = $dropbutton.find('.dropbutton');
+ this.$list = $dropbutton.find('.dropbutton__menu');
/**
* Find actions and mark them.
*
* @type {jQuery}
*/
- this.$actions = this.$list.find('li').addClass('dropbutton-action');
-
+ this.$actions = this.$list.find('li');
// Add the special dropdown only if there are hidden actions.
if (this.$actions.length > 1) {
// Identify the first element of the collection.
- var $primary = this.$actions.slice(0, 1);
- // Identify the secondary actions.
- var $secondary = this.$actions.slice(1);
- $secondary.addClass('secondary-action');
+ var $primary = this.$actions.slice(0, 1).find('a, input, button');
+ // Remove parent
for first dropbutton action and move.
+ $primary.unwrap().addClass('button dropbutton__primary-action').each(function() {
+ $(this).parent().before(this);
+ });
+ // Identify the secondary actions, reset their appearance.
+ var $secondary = this.$actions.slice(1).find('a, input, button');
+ $secondary.addClass('dropbutton__menu-item reset-appearance').removeClass('button');
// Add toggle link.
$primary.after(Drupal.theme('dropbuttonToggle', options));
// Bind mouse events.
this.$dropbutton
- .addClass('dropbutton-multiple')
+ .addClass('dropbutton')
.on({
/**
@@ -122,7 +125,9 @@
});
}
else {
- this.$dropbutton.addClass('dropbutton-single');
+ // If there's only one action, add a button class.
+ var $action = this.$actions.slice(0, 1).find('a');
+ $action.unwrap().unwrap().addClass('button');
}
}
@@ -152,8 +157,8 @@
*/
toggle: function (show) {
var isBool = typeof show === 'boolean';
- show = isBool ? show : !this.$dropbutton.hasClass('open');
- this.$dropbutton.toggleClass('open', show);
+ show = isBool ? show : !this.$dropbutton.hasClass('is-open');
+ this.$dropbutton.toggleClass('is-open', show);
},
/**
@@ -216,7 +221,7 @@
* A string representing a DOM fragment.
*/
dropbuttonToggle: function (options) {
- return '
';
+ return '';
}
});
diff --git a/core/misc/icons/ffffff/caret-down.svg b/core/misc/icons/ffffff/caret-down.svg
new file mode 100644
index 0000000..1514a0e
--- /dev/null
+++ b/core/misc/icons/ffffff/caret-down.svg
@@ -0,0 +1 @@
+
diff --git a/core/modules/book/src/Tests/BookTest.php b/core/modules/book/src/Tests/BookTest.php
index b1c9fa3..ffa62c4 100644
--- a/core/modules/book/src/Tests/BookTest.php
+++ b/core/modules/book/src/Tests/BookTest.php
@@ -641,7 +641,7 @@ public function testAdminBookNodeListing() {
$this->drupalGet('admin/structure/book/' . $this->book->id());
$this->assertText($this->book->label(), 'The book title is displayed on the administrative book listing page.');
- $elements = $this->xpath('//table//ul[@class="dropbutton"]/li/a');
+ $elements = $this->xpath('//table//div[@class="js-dropbutton"]//a');
$this->assertEqual((string) $elements[0], 'View', 'View link is found from the list.');
}
diff --git a/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php b/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php
index 9ed2e46..8f195a3 100644
--- a/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php
+++ b/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php
@@ -216,7 +216,7 @@ protected function doTestTranslationOverview() {
$elements = $this->xpath('//table//a[@href=:href]', array(':href' => $view_path));
$this->assertEqual((string) $elements[0], $entity->getTranslation($langcode)->label(), format_string('Label correctly shown for %language translation.', array('%language' => $langcode)));
$edit_path = $entity->url('edit-form', array('language' => $language));
- $elements = $this->xpath('//table//ul[@class="dropbutton"]/li/a[@href=:href]', array(':href' => $edit_path));
+ $elements = $this->xpath('//table//div[@class="js-dropbutton"]//a[@href=:href]', array(':href' => $edit_path));
$this->assertEqual((string) $elements[0], t('Edit'), format_string('Edit link correct for %language translation.', array('%language' => $langcode)));
}
}
diff --git a/core/modules/field_ui/src/Tests/ManageFieldsTest.php b/core/modules/field_ui/src/Tests/ManageFieldsTest.php
index c09550f..62fcc76 100644
--- a/core/modules/field_ui/src/Tests/ManageFieldsTest.php
+++ b/core/modules/field_ui/src/Tests/ManageFieldsTest.php
@@ -154,7 +154,7 @@ function manageFieldsPage($type = '') {
// Assert entity operations for all fields.
$number_of_links = 3;
$number_of_links_found = 0;
- $operation_links = $this->xpath('//ul[@class = "dropbutton"]/li/a');
+ $operation_links = $this->xpath('//div[@class = "js-dropbutton"]//a');
$url = base_path() . "admin/structure/types/manage/$type/fields/node.$type.body";
foreach ($operation_links as $link) {
diff --git a/core/modules/language/config/optional/tour.tour.language.yml b/core/modules/language/config/optional/tour.tour.language.yml
index 7ee56b4..e0775d1 100644
--- a/core/modules/language/config/optional/tour.tour.language.yml
+++ b/core/modules/language/config/optional/tour.tour.language.yml
@@ -44,7 +44,7 @@ tips:
body: '
Operations are provided for editing and deleting your languages.
You can edit the name and the direction of the language.
Deleted languages can be added back at a later time. Deleting a language will remove all interface translations associated with it, and content in this language will be set to be language neutral. Note that you cannot delete the default language of the site.