Add an optional icon and description to the page title (#17579)

Wojdylak · web-flow · commit 259feb5bf2ee · 2024-12-17T09:08:45.000+01:00
This isn't strictly necessary for Sylius itself, but it might be useful in the Sylius Stack. <img width="1448" alt="Zrzut ekranu 2024-12-16 o 16 32 19" src="https://github.com/user-attachments/assets/b257a839-849a-49e6-a55d-b6e0e3c03662" /> <img width="1448" alt="Zrzut ekranu 2024-12-16 o 16 32 07" src="https://github.com/user-attachments/assets/1a5f7a35-1fed-494b-8211-200504cc868a" /> <img width="1448" alt="Zrzut ekranu 2024-12-16 o 16 31 54" src="https://github.com/user-attachments/assets/dae1aec3-253f-4197-86a3-e466da4a18de" /> <img width="1448" alt="Zrzut ekranu 2024-12-16 o 16 31 42" src="https://github.com/user-attachments/assets/30bde271-05d8-4dca-ac54-06984a9d2cee" />  ## Summary by CodeRabbit - **New Features** - Improved header layout with enhanced flexibility for icons and subheaders. - Utilized Bootstrap's flex utilities for better alignment and spacing in the header section.
diff --git a/src/Sylius/Bundle/AdminBundle/templates/shared/helper/header.html.twig b/src/Sylius/Bundle/AdminBundle/templates/shared/helper/header.html.twig
@@ -1,15 +1,17 @@
 {% macro default(level, header, icon, subheader) %}
-    <h{{ level }} class="page-title">
-        {# TODO: Decide whether we want to have an image here #}
-        {#        {% if icon is not empty %}#}
-        {#            <i class="circular {{ icon }} icon"></i>#}
-        {#        {% endif %}#}
-        {{ header }}
-        {% if subheader is not empty %}
-            {# TODO: Fix subheader styling #}
-            {#            <small class="text-body-secondary">{{ subheader }}</small>#}
+    <div class="d-flex gap-3 align-items-center">
+        {% if icon %}
+            <div>{{ ux_icon(icon, {'class': 'icon icon-md text-primary'}) }}</div>
         {% endif %}
-    </h{{ level }}>
+        <div class="d-flex flex-column gap-2">
+            <h{{ level }} class="page-title">
+                {{ header }}
+            </h{{ level }}>
+            {% if subheader %}
+                <div>{{ subheader }}</div>
+            {% endif %}
+        </div>
+    </div>
 {% endmacro %}
 
 {% macro h1(header, icon, subheader) %}
