diff -u b/core/lib/Drupal/Core/Render/Element/RenderElement.php b/core/lib/Drupal/Core/Render/Element/RenderElement.php
--- b/core/lib/Drupal/Core/Render/Element/RenderElement.php
+++ b/core/lib/Drupal/Core/Render/Element/RenderElement.php
@@ -197,8 +197,8 @@
elseif (!empty($element['#group_details'])) {
// Intentionally empty to clarify the flow; we simply return $element.
}
- // Otherwise, this element belongs to a group and the group exists, so we
- // do not render it.
+ // Otherwise, this element belongs to a group and the group exists, so we do
+ // not render it.
elseif (Element::children($element['#groups'][$group])) {
$element['#printed'] = TRUE;
}
@@ -206,7 +206,11 @@
// Set attributes to indicate that there is a child with an error.
if (!empty($element['#children_errors'])) {
- $element['#attributes']['class'][] = 'error';
+ $element['#attributes']['class'][] = 'form-wrapper--child-error';
+ if ($element['#type'] === 'details') {
+ $element['#attributes']['class'][] = 'details--child-error';
+ }
+ $element['#attributes']['data-children-errors-count'] = count($element['#children_errors']);
}
return $element;
diff -u b/core/misc/vertical-tabs.es6.js b/core/misc/vertical-tabs.es6.js
--- b/core/misc/vertical-tabs.es6.js
+++ b/core/misc/vertical-tabs.es6.js
@@ -61,7 +61,7 @@
var vertical_tab = new Drupal.verticalTab({
title: $that.find('> summary').text(),
details: $that,
- children_errors: $that.hasClass('error')
+ children_errors: $that.data('children-errors-count')
});
tab_list.append(vertical_tab.item);
$that
@@ -249,7 +249,7 @@
);
if (settings.children_errors) {
- tab.item.addClass('error');
+ tab.item.addClass('vertical-tab__menu-item--child-error');
}
return tab;
diff -u b/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
--- b/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -36,7 +36,7 @@
var vertical_tab = new Drupal.verticalTab({
title: $that.find('> summary').text(),
details: $that,
- children_errors: $that.hasClass('error')
+ children_errors: $that.data('children-errors-count')
});
tab_list.append(vertical_tab.item);
$that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', vertical_tab);
@@ -140,7 +140,7 @@
tab.item = $('').append(tab.link = $('').append(tab.title = $('').text(settings.title)).append(tab.summary = $('')));
if (settings.children_errors) {
- tab.item.addClass('error');
+ tab.item.addClass('vertical-tab__menu-item--child-error');
}
return tab;
diff -u b/core/modules/node/tests/src/Functional/NodeEditFormTest.php b/core/modules/node/tests/src/Functional/NodeEditFormTest.php
--- b/core/modules/node/tests/src/Functional/NodeEditFormTest.php
+++ b/core/modules/node/tests/src/Functional/NodeEditFormTest.php
@@ -126,7 +126,7 @@
$open_details_elements = count($this->cssSelect('details[open="open"]'));
$this->drupalPostForm(NULL, $edit, t('Save'));
// 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.');
reverted:
--- b/core/themes/bartik/css/components/form.css
+++ a/core/themes/bartik/css/components/form.css
@@ -52,9 +52,6 @@
color: #3b3b3b;
text-shadow: 0 1px 0 #fff;
}
-.error > summary {
- background: #fff;
-}
details summary a {
color: #3b3b3b;
}
reverted:
--- b/core/themes/classy/css/components/details.css
+++ a/core/themes/classy/css/components/details.css
@@ -21,30 +21,3 @@
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 -u b/core/themes/seven/css/components/details.css b/core/themes/seven/css/components/details.css
--- b/core/themes/seven/css/components/details.css
+++ b/core/themes/seven/css/components/details.css
@@ -9,3 +9,25 @@
-details.error:not([open]) summary:before {
- height: 20px;
-}
\ No newline at end of file
+.details--child-error:not([open]) summary:before {
+ content: '';
+ display: inline-block;
+ height: 16px;
+ width: 14px;
+ background: url(../../../../misc/icons/e32700/error.svg) no-repeat center;
+ background-size: contain;
+ float: right; /* LTR */
+}
+[dir="rtl"] .details--child-error:not([open]) summary:before {
+ float: left;
+}
+.details--child-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--child-error:not([open]) {
+ box-shadow: inset -7px 0 0 #e62600;
+ border-radius: 0 2px 2px 0;
+ padding-left: 0;
+ padding-right: 7px;
+}
diff -u b/core/themes/seven/css/components/entity-meta.css b/core/themes/seven/css/components/entity-meta.css
--- b/core/themes/seven/css/components/entity-meta.css
+++ b/core/themes/seven/css/components/entity-meta.css
@@ -57,13 +57,13 @@
.entity-meta details .summary {
display: none; /* Hide JS summaries. @todo Rethink summaries. */
}
-.entity-meta details.error:not([open]) {
- padding-left: 7px;
+.entity-meta .details--child-error:not([open]) {
+ padding-left: 6px;
}
-.entity-meta details.error:not([open]) > * {
+.entity-meta .details--child-error:not([open]) > * {
position: relative;
left: -7px;
- margin-right: -11px;
+ margin-right: -12px;
}
[dir="rtl"] .entity-meta details.error:not([open]) {
padding-left: 0;
@@ -77 +77 @@
-}
\ No newline at end of file
+}
diff -u b/core/themes/seven/css/components/vertical-tabs.css b/core/themes/seven/css/components/vertical-tabs.css
--- b/core/themes/seven/css/components/vertical-tabs.css
+++ b/core/themes/seven/css/components/vertical-tabs.css
@@ -37,13 +37,43 @@
.vertical-tabs__menu-item.last {
border-bottom: none;
}
-.vertical-tabs__menu-item.error:not(.is-selected) {
+.vertical-tab__menu-item--child-error.is-selected {
+ padding-top: 1px;
+}
+.vertical-tab__menu-item--child-error:not(.is-selected) {
border: 1px solid #e62600;
- border-bottom: 1px solid #ccc;
border-right: 0;
+ border-bottom-color: #ccc;
+ box-shadow: inset 7px 0 0 #e62600; /* LTR */
+ border-radius: 2px 0 0 2px; /* LTR */
+ padding-left: 7px; /* LTR */
+}
+.vertical-tab__menu-item--child-error:not(.is-selected) a {
+ padding-left: 7px; /* LTR */
+ padding-right: 10px;
+ border-bottom: 1px solid #e62600;
+ color: #e62600;
+}
+[dir="rtl"] .vertical-tab__menu-item--child-error:not(.is-selected) {
+ box-shadow: inset -7px 0 0 #e62600;
+ border-radius: 0 2px 2px 0;
+ padding-left: 0;
+ padding-right: 7px;
}
-.vertical-tabs__menu-item.error:not(.is-selected) .vertical-tabs__menu-item-title:before {
+[dir="rtl"] .vertical-tab__menu-item--child-error:not(.is-selected) a {
+ padding-right: 7px;
+}
+.vertical-tab__menu-item--child-error:not(.is-selected) .vertical-tabs__menu-item-title:before {
+ content: '';
+ display: inline-block;
height: 14px;
+ width: 14px;
+ background: url(../../../../misc/icons/e32700/error.svg) no-repeat center;
+ background-size: contain;
+ float: right;
+}
+[dir="rtl"] .vertical-tab__menu-item--child-error:not(.is-selected) .vertical-tabs__menu-item-title:before {
+ float: left;
}
[dir="rtl"] .vertical-tabs__menu-item.is-selected {
border-left: 1px solid #fcfcfa;
reverted:
--- b/core/themes/stable/css/core/vertical-tabs.css
+++ a/core/themes/stable/css/core/vertical-tabs.css
@@ -38,39 +38,6 @@
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;
only in patch2:
unchanged:
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -10,6 +10,7 @@ global-styling:
css/components/captions.css: {}
css/components/comments.css: {}
css/components/contextual.css: {}
+ css/components/details.css: {}
css/components/demo-block.css: {}
# @see https://www.drupal.org/node/2389735
css/components/dropbutton.component.css: {}
only in patch2:
unchanged:
--- /dev/null
+++ b/core/themes/bartik/css/components/details.css
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+
+/* Errors */
+.details--child-error:not([open]) summary {
+ background-color: #f1f1f1;
+}
+.details--child-error:not([open]) summary:before {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 14px;
+ background: url(../../../../misc/icons/e32700/error.svg) no-repeat center;
+ background-size: contain;
+ float: right; /* LTR */
+}
+[dir="rtl"] .details--child-error:not([open]) summary:before {
+ float: left;
+}
+.details--child-error:not([open]) {
+ border: 2px solid red;
+ box-shadow: inset 7px 0 0 red; /* LTR */
+ padding-left: 7px; /* LTR */
+}
+[dir="rtl"] .details--child-error:not([open]) {
+ box-shadow: inset -7px 0 0 red;
+ padding-left: 0;
+ padding-right: 7px;
+}
only in patch2:
unchanged:
--- a/core/themes/bartik/css/components/vertical-tabs.component.css
+++ b/core/themes/bartik/css/components/vertical-tabs.component.css
@@ -14,3 +14,40 @@
/* This is required to win specificity over [dir="rtl"] .region-content ul */
padding: 0;
}
+.vertical-tab__menu-item--child-error.is-selected {
+ padding-top: 1px;
+}
+.vertical-tab__menu-item--child-error:not(.is-selected) {
+ border-top: 1px solid red;
+ background-color: #f1f1f1;
+ box-shadow: inset 7px 0 0 red; /* LTR */
+ border-radius: 2px 0 0 2px; /* LTR */
+ padding-left: 7px; /* LTR */
+}
+.vertical-tab__menu-item--child-error:not(.is-selected) a {
+ padding-left: 7px; /* LTR */
+ border-bottom: 1px solid red;
+ color: #e32700;
+}
+[dir="rtl"] .vertical-tab__menu-item--child-error:not(.is-selected) {
+ box-shadow: inset -7px 0 0 red;
+ border-radius: 0 2px 2px 0;
+ padding-left: 0;
+ padding-right: 7px;
+}
+[dir="rtl"] .vertical-tab__menu-item--child-error:not(.is-selected) a {
+ padding-left: 7px;
+ padding-right: 7px;
+}
+.vertical-tab__menu-item--child-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-tab__menu-item--child-error:not(.is-selected) .vertical-tabs__menu-item-title:before {
+ float: left;
+}
only in patch2:
unchanged:
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -12,6 +12,7 @@ global-styling:
css/components/buttons.css: {}
css/components/colors.css: {}
css/components/messages.css: {}
+ css/components/details.css: {}
css/components/dropbutton.component.css: {}
css/components/entity-meta.css: {}
css/components/field-ui.css: {}