IBX-2004: Add tabs error state; fix tabs in Page Builder (#260)

src/bundle/Resources/public/scss/_tabs.scss

@@ -92,6 +92,22 @@
         }
     }
 
+    &__tab-warning-icon {
+        display: none;
+        position: absolute;
+        right: calculateRem(20px);
+        top: 50%;
+        transform: translateY(-50%);
+        width: calculateRem(16px);
+        height: calculateRem(16px);
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+        background: $ibexa-color-danger;
+        color: $ibexa-color-white;
+        z-index: 10;
+    }
+
     &__tab {
         height: calculateRem(48px);
         display: flex;
@@ -104,6 +120,12 @@
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
         margin-left: calculateRem(-3px);
 
+        &--error {
+            .ibexa-tabs__tab-warning-icon {
+                display: flex;
+            }
+        }
+
         &:first-of-type {
             margin-left: 0;
         }

src/bundle/Resources/public/scss/ibexa.scss

@@ -83,7 +83,6 @@
 @import 'admin.section-view';
 @import 'content-tree';
 @import 'flatpickr';
-@import 'warning-icon';
 @import 'trash-search-form';
 @import 'inputs';
 @import 'links';

src/bundle/Resources/views/themes/admin/ui/component/tab/tabs.html.twig

@@ -6,8 +6,8 @@
 {% endif %}
 
 {% include '@ibexadesign/ui/component/tab/tabs_header.html.twig' with {
-    tabs: tabs,
-    active_tab: active_tab,
+    tabs,
+    active_tab,
     hide_toggler: hide_toggler|default(false),
     include_tab_more: include_tab_more|default(false),
 } %}

src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_header.html.twig

@@ -8,6 +8,7 @@
                             id: tab.id,
                             label: tab.label,
                             active: tab == active_tab,
+                            has_error: tab.has_error|default(false),
                         } %}
                     {% endfor %}
                 {% endblock %}

src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_link.html.twig

@@ -1,3 +1,10 @@
-<a id="ibexa-tab-label-{{ id }}" href="#ibexa-tab-{{ id }}" data-bs-toggle="tab" class="nav-link ibexa-tabs__link {% if active %}active{% endif %} {{ class|default('') }}">
+<a
+    id="ibexa-tab-label-{{ id }}"
+    href="#ibexa-tab-{{ id }}"
+    data-bs-toggle="tab"
+    class="nav-link ibexa-tabs__link
+        {% if active %}active{% endif %}
+        {{ class|default('') }}"
+>
     {{ label }}
 </a>

src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab.html.twig

@@ -1,11 +1,15 @@
-{% set active = active|default(false) %}
-
-<li class="nav-item ibexa-tabs__tab ibexa-adaptive-items__item {% if active %}ibexa-tabs__tab--active{% endif %}">
+<li
+    class="
+        nav-item ibexa-tabs__tab ibexa-adaptive-items__item
+        {% if active|default(false) %}ibexa-tabs__tab--active{% endif %}
+        {% if has_error|default(false) %}ibexa-tabs__tab--error{% endif %}"
+>
     {% block tab_link %}
         {% include '@ibexadesign/ui/component/tab/tabs_link.html.twig' with {
             id: tab.id,
             label: tab.label,
         } %}
+        {% include '@ibexadesign/ui/component/tab/tabs_tab_warning_icon.html.twig' %}
     {% endblock %}
     {% include '@ibexadesign/ui/component/tab/tab_corner.html.twig' %}
 </li>

src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab_warning_icon.html.twig

@@ -0,0 +1,3 @@
+<span class="ibexa-tabs__tab-warning-icon">
+    !
+</span>