From 734e5b3d6cafab378e45c33391695eeb1504bc85 Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Sat, 8 Feb 2025 20:04:42 +0100
Subject: [PATCH] IBX-9448: Input side label (#1432)

---
 src/bundle/Resources/public/scss/_inputs.scss | 31 ++++++-
 .../admin/ui/component/input_text.html.twig   | 82 +++++++++++--------
 2 files changed, 77 insertions(+), 36 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
index 92b8e9cf26..1446f64153 100644
--- a/src/bundle/Resources/public/scss/_inputs.scss
+++ b/src/bundle/Resources/public/scss/_inputs.scss
@@ -400,7 +400,12 @@
 }
 
 .ibexa-input-text-wrapper {
-    position: relative;
+    display: flex;
+
+    &__input-wrapper {
+        position: relative;
+        flex-grow: 1;
+    }
 
     &__actions {
         display: flex;
@@ -425,6 +430,23 @@
         padding: 0;
     }
 
+    &__right-side-label-wrapper {
+        display: flex;
+    }
+
+    &__right-side-label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: $ibexa-color-light-200;
+        border: calculateRem(1px) solid $ibexa-color-dark-200;
+        border-left: 0;
+        border-radius: 0 $ibexa-border-radius $ibexa-border-radius 0;
+        padding-left: calculateRem(16px);
+        padding-right: calculateRem(16px);
+        font-size: $ibexa-text-font-size-medium;
+    }
+
     &--type-number {
         max-width: calculateRem(150px);
 
@@ -482,6 +504,13 @@
             }
         }
     }
+
+    &--has-right-side-label {
+        .ibexa-input {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
 }
 
 .ibexa-input--date:placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--clear,
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
index 4f8df99009..32b0a7ae39 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
@@ -22,48 +22,60 @@
         ~ (type is defined ? " ibexa-input-text-wrapper--type-#{type}")
         ~ (extra_btn.label ? ' ibexa-input-text-wrapper--extra-btn')
         ~ (is_multiline ? ' ibexa-input-text-wrapper--multiline')
+        ~ (right_side_label is defined ? ' ibexa-input-text-wrapper--has-right-side-label')
     )|trim
 }) %}
 
 <div {{ html.attributes(wrapper_attr) }}>
-    {% block content %}{% endblock %}
-    <div class="ibexa-input-text-wrapper__actions">
-        {% block actions %}
-            <button 
-                type="button" 
-                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
-                tabindex="-1"
-                {% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
-            >
-                <svg class="ibexa-icon ibexa-icon--tiny-small">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
-            {% if is_password_input %}
-                <button
-                    type="button"
-                    class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
-                    tabindex="5"
+    <div class="ibexa-input-text-wrapper__input-wrapper">
+        {% block content %}{% endblock %}
+        <div class="ibexa-input-text-wrapper__actions">
+            {% block actions %}
+                <button 
+                    type="button" 
+                    class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
+                    tabindex="-1"
+                    {% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
                 >
-                    <svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
-                        <use xlink:href="{{ ibexa_icon_path('view') }}"></use>
+                    <svg class="ibexa-icon ibexa-icon--tiny-small">
+                        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                     </svg>
-                    <svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-hide d-none">
-                        <use xlink:href="{{ ibexa_icon_path('view-hide') }}"></use>
-                    </svg>
-                </button>
-            {% elseif has_search %}
-                <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
-                    <svg class="ibexa-icon ibexa-icon--small">
-                        <use xlink:href="{{ ibexa_icon_path('search') }}"></use>
-                    </svg>
-                </button>
-            {% elseif extra_btn.label is not empty %}
-                <button {{html.attributes(extra_btn.attr)}}>
-                    {{- extra_btn.label -}}
                 </button>
-            {% endif %}
-        {% endblock %}
+                {% if is_password_input %}
+                    <button
+                        type="button"
+                        class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
+                        tabindex="5"
+                    >
+                        <svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
+                            <use xlink:href="{{ ibexa_icon_path('view') }}"></use>
+                        </svg>
+                        <svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-hide d-none">
+                            <use xlink:href="{{ ibexa_icon_path('view-hide') }}"></use>
+                        </svg>
+                    </button>
+                {% elseif has_search %}
+                    <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
+                        <svg class="ibexa-icon ibexa-icon--small">
+                            <use xlink:href="{{ ibexa_icon_path('search') }}"></use>
+                        </svg>
+                    </button>
+                {% elseif extra_btn.label is not empty %}
+                    <button {{html.attributes(extra_btn.attr)}}>
+                        {{- extra_btn.label -}}
+                    </button>
+                {% endif %}
+            {% endblock %}
+        </div>
     </div>
+    {% block right_side_label %}
+        {% if right_side_label is defined %}
+            <div class="ibexa-input-text-wrapper__right-side-label-wrapper">
+                <div class="ibexa-input-text-wrapper__right-side-label">
+                    {{ right_side_label }}
+                </div>
+            </div>
+        {% endif %}
+    {% endblock %}
     {% block extra_content %}{% endblock %}
 </div>