diff --git a/core/lib/Drupal/Core/Render/Element/RenderElement.php b/core/lib/Drupal/Core/Render/Element/RenderElement.php index 243a9af..509e786 100644 --- a/core/lib/Drupal/Core/Render/Element/RenderElement.php +++ b/core/lib/Drupal/Core/Render/Element/RenderElement.php @@ -203,6 +203,7 @@ public static function preRenderGroup($element) { $element['#printed'] = TRUE; } } + $element['#attributes']['class'][] = 'error'; return $element; } diff --git a/core/misc/vertical-tabs.es6.js b/core/misc/vertical-tabs.es6.js index c7ad2fd..94821e3 100644 --- a/core/misc/vertical-tabs.es6.js +++ b/core/misc/vertical-tabs.es6.js @@ -60,7 +60,8 @@ var $that = $(this); var vertical_tab = new Drupal.verticalTab({ title: $that.find('> summary').text(), - details: $that + details: $that, + children_errors: $that.hasClass('error') }); tab_list.append(vertical_tab.item); $that @@ -246,6 +247,11 @@ .append(tab.summary = $('') ) ); + + if (settings.children_errors) { + tab.item.addClass('error'); + } + return tab; }; diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js index c47a7cb..54ff866 100644 --- a/core/misc/vertical-tabs.js +++ b/core/misc/vertical-tabs.js @@ -35,7 +35,8 @@ var $that = $(this); var vertical_tab = new Drupal.verticalTab({ title: $that.find('> summary').text(), - details: $that + details: $that, + children_errors: $that.hasClass('error') }); tab_list.append(vertical_tab.item); $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', vertical_tab); @@ -137,6 +138,11 @@ Drupal.theme.verticalTab = function (settings) { var tab = {}; tab.item = $('
  • ').append(tab.link = $('').append(tab.title = $('').text(settings.title)).append(tab.summary = $(''))); + + if (settings.children_errors) { + tab.item.addClass('error'); + } + return tab; }; })(jQuery, Drupal, drupalSettings); \ No newline at end of file diff --git a/core/modules/node/tests/src/Functional/NodeEditFormTest.php b/core/modules/node/tests/src/Functional/NodeEditFormTest.php index ea2a168..88e0528 100644 --- a/core/modules/node/tests/src/Functional/NodeEditFormTest.php +++ b/core/modules/node/tests/src/Functional/NodeEditFormTest.php @@ -126,7 +126,7 @@ public function testNodeEdit() { $open_details_elements = count($this->cssSelect('details[open="open"]')); $this->drupalPostForm(NULL, $edit, t('Save and keep published')); // The node author details must be open. - $this->assertRaw('
    '); + $this->assertRaw('
    '); // Only one extra details element should now be open. $open_details_elements++; $this->assertEqual(count($this->cssSelect('details[open="open"]')), $open_details_elements, 'Exactly one extra open <details> element found.'); diff --git a/core/themes/bartik/css/components/form.css b/core/themes/bartik/css/components/form.css index 5ff46e4..74b0a20 100644 --- a/core/themes/bartik/css/components/form.css +++ b/core/themes/bartik/css/components/form.css @@ -52,6 +52,9 @@ summary { color: #3b3b3b; text-shadow: 0 1px 0 #fff; } +.error > summary { + background: #fff; +} details summary a { color: #3b3b3b; } diff --git a/core/themes/classy/css/components/details.css b/core/themes/classy/css/components/details.css index 641dd12..e3a5135 100644 --- a/core/themes/classy/css/components/details.css +++ b/core/themes/classy/css/components/details.css @@ -21,3 +21,30 @@ summary { cursor: pointer; padding: 0.2em 0.5em; } + +/* Errors */ +details.error:not([open]) summary:before { + content: ''; + display: inline-block; + height: 14px; + width: 14px; + background: url(../../../../misc/icons/e32700/error.svg) no-repeat center; + background-size: contain; + float: right; /* LTR */ +} +[dir="rtl"] details.error:not([open]) summary:before { + float: left; +} +details.error:not([open]) { + border: 1px solid #e62600; + box-shadow: inset 7px 0 0 #e62600; /* LTR */ + border-radius: 2px 0 0 2px; /* LTR */ + padding-left: 7px; /* LTR */ + color: #e62600; +} +[dir="rtl"] details.error:not([open]) { + box-shadow: inset -7px 0 0 #e62600; + border-radius: 0 2px 2px 0; + padding-left: 0; + padding-right: 7px; +} \ No newline at end of file diff --git a/core/themes/seven/css/components/details.css b/core/themes/seven/css/components/details.css new file mode 100644 index 0000000..df689a8 --- /dev/null +++ b/core/themes/seven/css/components/details.css @@ -0,0 +1,11 @@ +/** + * @file + * Collapsible details. + * + * @see collapse.js + */ + +/* Errors */ +details.error:not([open]) summary:before { + height: 20px; +} \ No newline at end of file diff --git a/core/themes/seven/css/components/entity-meta.css b/core/themes/seven/css/components/entity-meta.css index 701e8dc..5de0523 100644 --- a/core/themes/seven/css/components/entity-meta.css +++ b/core/themes/seven/css/components/entity-meta.css @@ -57,3 +57,21 @@ .entity-meta details .summary { display: none; /* Hide JS summaries. @todo Rethink summaries. */ } +.entity-meta details.error:not([open]) { + padding-left: 7px; +} +.entity-meta details.error:not([open]) > * { + position: relative; + left: -7px; + margin-right: -11px; +} +[dir="rtl"] .entity-meta details.error:not([open]) { + padding-left: 0; + padding-right: 7px; +} +[dir="rtl"] .entity-meta details.error:not([open]) > * { + right: -8px; + left: auto; + margin-left: -12px; + margin-right: 0; +} \ No newline at end of file diff --git a/core/themes/seven/css/components/vertical-tabs.css b/core/themes/seven/css/components/vertical-tabs.css index 34b5a52..50852c9 100644 --- a/core/themes/seven/css/components/vertical-tabs.css +++ b/core/themes/seven/css/components/vertical-tabs.css @@ -37,6 +37,14 @@ .vertical-tabs__menu-item.last { border-bottom: none; } +.vertical-tabs__menu-item.error:not(.is-selected) { + border: 1px solid #e62600; + border-bottom: 1px solid #ccc; + border-right: 0; +} +.vertical-tabs__menu-item.error:not(.is-selected) .vertical-tabs__menu-item-title:before { + height: 14px; +} [dir="rtl"] .vertical-tabs__menu-item.is-selected { border-left: 1px solid #fcfcfa; border-right: none; diff --git a/core/themes/stable/css/core/vertical-tabs.css b/core/themes/stable/css/core/vertical-tabs.css index fc83da5..5d40c29 100644 --- a/core/themes/stable/css/core/vertical-tabs.css +++ b/core/themes/stable/css/core/vertical-tabs.css @@ -38,6 +38,39 @@ border-top: 0; background: #eee; } +.vertical-tabs__menu-item.error:not(.is-selected) { + border-top: 1px solid #e62600; + box-shadow: inset 7px 0 0 #e62600; /* LTR */ + border-radius: 2px 0 0 2px; /* LTR */ + padding-left: 7px; /* LTR */ +} +.vertical-tabs__menu-item.error:not(.is-selected) a { + padding-left: 7px; /* LTR */ + border-bottom: 1px solid #e62600; + color: #e62600; +} +[dir="rtl"] .vertical-tabs__menu-item.error:not(.is-selected) { + box-shadow: inset -7px 0 0 #e62600; + border-radius: 0 2px 2px 0; + padding-left: 0; + padding-right: 7px; +} +[dir="rtl"] .vertical-tabs__menu-item.error:not(.is-selected) a { + padding-left: 7px; + padding-right: 7px; +} +.vertical-tabs__menu-item.error:not(.is-selected) .vertical-tabs__menu-item-title:before { + content: ''; + display: inline-block; + height: 20px; + width: 14px; + background: url(../../../../misc/icons/e32700/error.svg) no-repeat center; + background-size: contain; + float: right; +} +[dir="rtl"] .vertical-tabs__menu-item.error:not(.is-selected) .vertical-tabs__menu-item-title:before { + float: left; +} .vertical-tabs__menu-item a { display: block; padding: 0.5em 0.6em;