From bf564cf8b02d44089af8e89f68b07415b884e541 Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Mon, 31 Jan 2022 17:03:13 +0100
Subject: [PATCH] IBX-2159: Page Builder: add notification/feedback to user
 about invalid fields/layout

---
 .../Resources/public/js/scripts/admin.content.edit.js       | 5 +++++
 src/bundle/Resources/public/scss/_buttons.scss              | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/src/bundle/Resources/public/js/scripts/admin.content.edit.js b/src/bundle/Resources/public/js/scripts/admin.content.edit.js
index 51015c97de..ed8b62fc74 100644
--- a/src/bundle/Resources/public/js/scripts/admin.content.edit.js
+++ b/src/bundle/Resources/public/js/scripts/admin.content.edit.js
@@ -55,6 +55,11 @@
     };
     const focusOnFirstError = () => {
         const invalidFields = doc.querySelectorAll('.ibexa-field-edit.is-invalid');
+
+        if (!invalidFields.length) {
+            return;
+        }
+
         const invalidSection = invalidFields[0].closest('.ibexa-anchor-navigation-sections__section');
 
         fields.forEach((field) => field.removeAttribute('tabindex'));
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
index 3d80169e4c..c225c1dd37 100644
--- a/src/bundle/Resources/public/scss/_buttons.scss
+++ b/src/bundle/Resources/public/scss/_buttons.scss
@@ -206,6 +206,12 @@
             fill: $ibexa-color-info;
         }
 
+        &.ibexa-btn--error {
+            background-color: $ibexa-color-danger-100;
+            border-color: $ibexa-color-danger;
+            fill: $ibexa-color-danger;
+        }
+
         &:not(.ibexa-btn--selected) {
             &:hover,
             &:focus {