IBX-3619: Tag update helper

src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js

@@ -1,16 +1,34 @@
 (function (global, doc, ibexa) {
-    const parseAll = () => {
+    const parseAll = (baseElement = doc) => {
+        if (!baseElement) {
+            return;
+        }
+
         const middleEllipsisContainers = [...doc.querySelectorAll('.ibexa-middle-ellipsis')];
 
+        if (baseElement instanceof Element) {
+            middleEllipsisContainers.push(baseElement);
+        }
+
         middleEllipsisContainers.forEach((middleEllipsisContainer) => {
             const partStart = middleEllipsisContainer.querySelector('.ibexa-middle-ellipsis__name--start');
 
             middleEllipsisContainer.classList.toggle('ibexa-middle-ellipsis--ellipsized', partStart.scrollWidth > partStart.offsetWidth);
             ibexa.helpers.tooltips.parse(middleEllipsisContainer);
         });
     };
+    const update = (baseElement, content) => {
+        const contentElements = [...baseElement.querySelectorAll('.ibexa-middle-ellipsis__name-ellipsized')];
+
+        baseElement.dataset.bsOriginalTitle = content;
+        contentElements.forEach((contentElement) => {
+            contentElement.innerHTML = content;
+        });
+        parseAll(baseElement);
+    };
 
     ibexa.addConfig('helpers.ellipsis.middle', {
         parseAll,
+        update,
     });
 })(window, window.document, window.ibexa);

src/bundle/Resources/public/scss/_tag.scss

@@ -3,7 +3,7 @@
     align-items: center;
     position: relative;
     height: calculateRem(24px);
-    padding: calculateRem(4px) calculateRem(24px) calculateRem(4px) calculateRem(10px);
+    padding: calculateRem(4px) calculateRem(10px);
     border-radius: calculateRem(12px);
     background-color: $ibexa-color-light-500;
     max-width: 100%;
@@ -24,6 +24,7 @@
     }
 
     &__remove-btn {
+        display: none;
         position: absolute;
         right: calculateRem(8px);
         cursor: pointer;
@@ -38,6 +39,14 @@
         }
     }
 
+    &--deletable {
+        padding-right: calculateRem(24px);
+
+        .ibexa-tag__remove-btn {
+            display: inline-block;
+        }
+    }
+
     $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200, 'secondary' $ibexa-color-dark $ibexa-color-light-500,
         'info' $ibexa-color-info $ibexa-color-info-200, 'danger' $ibexa-color-danger $ibexa-color-danger-200,
         'success' $ibexa-color-success $ibexa-color-success-200, 'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;

src/bundle/Resources/views/themes/admin/ui/tag.html.twig

@@ -1,6 +1,9 @@
 {% import '@ibexadesign/ui/component/macros.html.twig' as html %}
 
-{% set tag_attributes = tag_attributes|default({})|merge({'class': (tag_attributes.class|default('') ~ ' ibexa-tag')|trim}) %}
+{% set is_deletable = is_deletable is defined ? is_deletable : true %}
+{% set tag_attributes = tag_attributes|default({})|merge({
+    'class': (tag_attributes.class|default('') ~ ' ibexa-tag' ~ (is_deletable ? ' ibexa-tag--deletable'))|trim
+}) %}
 
 <div {{ html.attributes(tag_attributes) }}>
     <div class="ibexa-tag__content" {% if is_loading_state %} hidden {% endif %}>