Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3060697 by huzooka, bnjmnm, Meenakshi.g, quiron, shashikant_chauhan, Lal_, lauriii, tim.plunkett: Use dropbutton variants with #dropbutton_type instead of custom classes

merge-requests/2/head
Lauri Eskola 2020-06-25 17:54:48 +03:00
parent aada3e1f28
commit 0551c86071
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
6 changed files with 40 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/modules/system/system.post_update.php
View File

@ -148,6 +148,13 @@ function system_post_update_uninstall_stable() {
}
}
/**
* Clear caches due to trustedCallbacks changing in ClaroPreRender.
*/
function system_post_update_claro_dropbutton_variants() {
// Empty post-update hook.
}
/**
* Update schema version to integers.
*

4
core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsUiTest.php
View File

@ -74,7 +74,7 @@ class ClaroViewsUiTest extends WebDriverTestBase {
$list_item_selectors = ['li:first-child', 'li:last-child'];
// Test list item CSS classes.
foreach ($list_item_selectors as $list_item_selector) {
$this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item.dropbutton__item--small"));
$this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item"));
}
// Click on the Display name and wait for the Views UI dialog.
@ -89,7 +89,7 @@ class ClaroViewsUiTest extends WebDriverTestBase {
$this->assertTrue($extra_actions_dropbutton_list->hasClass('dropbutton--small'));
// Check list item CSS classes.
foreach ($list_item_selectors as $list_item_selector) {
$this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item.dropbutton__item--small"));
$this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item"));
}
}

47
core/themes/claro/claro.theme
View File

@ -245,9 +245,17 @@ function claro_element_info_alter(&$type) {
$type['text_format']['#pre_render'][] = [ClaroPreRender::class, 'textFormat'];
}
// Add a pre-render function that handles dropbutton variants.
if (isset($type['dropbutton'])) {
$type['dropbutton']['#pre_render'][] = [ClaroPreRender::class, 'dropButton'];
// Add a pre-render function for Operations to set #dropbutton_type.
if (isset($type['operations'])) {
// In Claro, Operations should always use the extrasmall dropbutton variant.
// To add CSS classes based on variants, the element must have the
// #dropbutton_type property before it is processed by
// \Drupal\Core\Render\Element\Dropbutton::preRenderDropbutton(). This
// ensures #dropbutton_type is available to preRenderDropbutton().
$operations_pre_renders = !empty($type['operations']['#pre_render']) ? $type['operations']['#pre_render'] : [];
array_unshift($operations_pre_renders, [ClaroPreRender::class, 'operations']);
$type['operations']['#pre_render'] = $operations_pre_renders;
}
if (isset($type['vertical_tabs'])) {
@ -612,13 +620,13 @@ function claro_views_ui_display_tab_alter(&$element) {
foreach ($nested_child_keys as $nested_key) {
$child_count++;
$prefix = $dummy_dropbutton[$key][$nested_key]['#prefix'];
$dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
$dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item$3', $prefix);
}
}
else {
$child_count++;
$prefix = $dummy_dropbutton[$key]['#prefix'];
$dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
$dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item$3', $prefix);
}
}
@ -1004,20 +1012,6 @@ function claro_preprocess_views_view_table(&$variables) {
}
}
/**
* Implements hook_preprocess_HOOK() for links__dropbutton__operations.
*
* Operations always use the extra small dropbutton variant.
*/
function claro_preprocess_links__dropbutton__operations(&$variables) {
$item_classes = ['dropbutton__item', 'dropbutton__item--extrasmall'];
$variables['attributes']['class'][] = 'dropbutton--extrasmall';
foreach ($variables['links'] as &$link_data) {
$link_data['attributes']->addClass($item_classes);
}
}
/**
* Implements hook_preprocess_HOOK() for links__dropbutton.
*/
@ -1029,21 +1023,8 @@ function claro_preprocess_links__dropbutton(&$variables) {
: 'dropbutton--single';
}
$item_classes = ['dropbutton__item'];
// Check that the dropbutton has a supported variant class.
// @todo Revisit after https://www.drupal.org/node/3057581 is added.
if (!empty($variables['attributes']['class'])) {
if (array_search('dropbutton--small', $variables['attributes']['class'])) {
$item_classes[] = 'dropbutton__item--small';
}
elseif (array_search('dropbutton--extrasmall', $variables['attributes']['class'])) {
$item_classes[] = 'dropbutton__item--extrasmall';
}
}
foreach ($variables['links'] as &$link_data) {
$link_data['attributes']->addClass($item_classes);
$link_data['attributes']->addClass('dropbutton__item');
}
}

12
core/themes/claro/css/components/dropbutton.css
View File

@ -305,14 +305,14 @@
/* Variants */
.no-touchevents .dropbutton__item--small:first-of-type > * {
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
padding-top: calc(0.625rem - 1px);
padding-bottom: calc(0.625rem - 1px);
font-size: 0.79rem;
line-height: 0.75rem;
}
.no-touchevents .dropbutton__item--extrasmall:first-of-type > * {
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
padding-top: calc(0.375rem - 1px);
padding-bottom: calc(0.375rem - 1px);
font-size: 0.79rem;
@ -434,16 +434,16 @@
/* Variants. */
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > a,
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 0.79rem;
line-height: 0.75rem;
}
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.79rem;

12
core/themes/claro/css/components/dropbutton.pcss.css
View File

@ -246,14 +246,14 @@
}
/* Variants */
.no-touchevents .dropbutton__item--small:first-of-type > * {
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
font-size: var(--dropbutton-small-font-size);
line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton__item--extrasmall:first-of-type > * {
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
font-size: var(--dropbutton-extrasmall-font-size);
@ -369,16 +369,16 @@
}
/* Variants. */
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > a,
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--small > .button {
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: var(--dropbutton-small-spacing-size);
padding-bottom: var(--dropbutton-small-spacing-size);
font-size: var(--dropbutton-small-font-size);
line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > a,
.no-touchevents .dropbutton__item:first-of-type ~ .dropbutton__item--extrasmall > .button {
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: var(--dropbutton-extrasmall-spacing-size);
padding-bottom: var(--dropbutton-extrasmall-spacing-size);
font-size: var(--dropbutton-extrasmall-font-size);

16
core/themes/claro/src/ClaroPreRender.php
View File

@ -110,17 +110,11 @@ class ClaroPreRender implements TrustedCallbackInterface {
}
/**
* Prerender callback for Dropbutton element.
*
* @todo Revisit after https://www.drupal.org/node/3057581 is added.
* Prerender callback for the Operations element.
*/
public static function dropButton($element) {
if (!empty($element['#dropbutton_type']) && is_string($element['#dropbutton_type'])) {
$supported_types = ['small', 'extrasmall'];
if (in_array($element['#dropbutton_type'], $supported_types)) {
$element['#attributes']['class'][] = 'dropbutton--' . $element['#dropbutton_type'];
}
public static function operations($element) {
if (empty($element['#dropbutton_type'])) {
$element['#dropbutton_type'] = 'extrasmall';
}
return $element;
}
@ -199,7 +193,7 @@ class ClaroPreRender implements TrustedCallbackInterface {
return [
'managedFile',
'verticalTabs',
'dropButton',
'operations',
'container',
'textFormat',
'messagePlaceholder',