IBX-11415: Use ibexa DS label component

composer.json

@@ -27,6 +27,7 @@
         "ibexa/content-forms": "~5.0.x-dev",
         "ibexa/core": "~5.0.x-dev",
         "ibexa/design-engine": "~5.0.x-dev",
+        "ibexa/design-system-twig": "dev-main",
         "ibexa/polyfill-php82": "^1.0",
         "ibexa/rest": "~5.0.x-dev",
         "ibexa/search": "~5.0.x-dev",
@@ -97,5 +98,11 @@
         "branch-alias": {
             "dev-main": "5.0.x-dev"
         }
-    }
+    },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/ibexa/design-system-twig"
+        }
+    ]
 }

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

@@ -371,7 +371,7 @@
     const validateInput = (input) => {
         const isInputEmpty = !input.value;
         const field = input.closest('.form-group');
-        const labelNode = field?.querySelector('.ibexa-label');
+        const labelNode = field?.querySelector('.ids-label');
         const errorNode = field?.querySelector('.ibexa-form-error');
 
         input.classList.toggle('is-invalid', isInputEmpty);

src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js

@@ -18,7 +18,7 @@ const checkIsEmpty = (field) => {
     let errorMessage = '';
     const Translator = getTranslator();
     const input = field.querySelector('.ibexa-input');
-    const label = field.querySelector('.ibexa-label');
+    const label = field.querySelector('.ids-label');
 
     if (label) {
         const fieldName = label.innerText;
@@ -35,7 +35,7 @@ const checkIsEmpty = (field) => {
 };
 const validateIsEmptyField = (field) => {
     const input = field.querySelector('.ibexa-input');
-    const label = field.querySelector('.ibexa-label');
+    const label = field.querySelector('.ids-label');
     const errorWrapper = field.querySelector('.ibexa-form-error');
     const validatorOutput = checkIsEmpty(field);
     const { isValid, errorMessage } = validatorOutput;

src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js

@@ -54,12 +54,12 @@
         const checkedBtn = event.currentTarget;
         const languageCode = checkedBtn.value;
         const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId });
-        const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item')?.querySelector('.ibexa-label');
-        const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ibexa-label');
+        const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item')?.querySelector('.ids-label');
+        const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ids-label');
         const submitBtn = form.querySelector('.ibexa-extra-actions__confirm-btn');
 
         allLanguageItems.forEach((item) => {
-            item.classList.remove('ibexa-label--active');
+            item.classList.remove('ids-label--active');
         });
 
         fetch(checkVersionDraftLink, {
@@ -83,7 +83,7 @@
             }
 
             submitBtn.disabled = false;
-            activeLanguageItem?.classList.add('ibexa-label--active');
+            activeLanguageItem?.classList.add('ids-label--active');
         });
     };
     const attachEventsToEditActionsWidget = (container) => {

src/bundle/Resources/public/scss/_adaptive-filters.scss

@@ -114,7 +114,7 @@
         align-items: flex-end;
         padding-right: calculateRem(16px);
 
-        .ibexa-label {
+        .ids-label {
             margin-top: 0;
         }
     }

src/bundle/Resources/public/scss/_add-translation.scss

@@ -10,7 +10,7 @@
         flex-wrap: wrap;
         padding-bottom: calculateRem(140px);
 
-        .ibexa-label {
+        .ids-label {
             margin-top: 0;
         }
     }

src/bundle/Resources/public/scss/_content-type-edit.scss

@@ -57,7 +57,7 @@
         .form-check {
             margin-bottom: calculateRem(16px);
 
-            .ibexa-label {
+            .ids-label {
                 margin-bottom: 0;
             }
         }

src/bundle/Resources/public/scss/_custom-url-form.scss

@@ -6,7 +6,7 @@
         margin-bottom: calculateRem(24px);
 
         &:first-child {
-            .ibexa-label {
+            .ids-label {
                 margin-top: 0;
             }
         }

src/bundle/Resources/public/scss/_details.scss

@@ -19,7 +19,7 @@
         flex-basis: 25%;
         padding: calculateRem(8px) calculateRem(8px) calculateRem(8px) 0;
 
-        .ibexa-label {
+        .ids-label {
             margin-top: calculateRem(8px);
             margin-bottom: 0;
         }

src/bundle/Resources/public/scss/_extra-actions.scss

@@ -135,7 +135,7 @@
             padding-left: 0;
         }
 
-        .ibexa-label {
+        .ids-label {
             @include edit-language-item;
         }
 

src/bundle/Resources/public/scss/_field-group.scss

@@ -30,7 +30,7 @@
         &__language-form {
             display: flex;
 
-            .ibexa-label {
+            .ids-label {
                 margin: calculateRem(8px) calculateRem(8px) 0;
             }
 

src/bundle/Resources/public/scss/_filters.scss

@@ -61,7 +61,7 @@
             margin-bottom: 0;
         }
 
-        .ibexa-label {
+        .ids-label {
             font-size: $ibexa-text-font-size-medium;
             color: $ibexa-color-dark;
             margin-top: calculateRem(16px);

src/bundle/Resources/public/scss/_instant-filter.scss

@@ -64,7 +64,7 @@
                 }
 
                 &:hover {
-                    .ibexa-label--checkbox-radio {
+                    .ids-choice-input-label {
                         color: $ibexa-color-primary;
                     }
 

src/bundle/Resources/public/scss/_labels.scss

@@ -2,7 +2,7 @@
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *;
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/mixins' as *;
 
-.ibexa-label {
+.ids-label {
     @include label-required();
 
     & {
@@ -37,7 +37,7 @@
 }
 
 .form-check-inline {
-    .ibexa-label {
+    .ids-label {
         &--checkbox-radio {
             margin: 0;
         }
@@ -46,7 +46,7 @@
 
 .ibexa-form-block {
     .form-group:first-of-type {
-        .ibexa-label {
+        .ids-label {
             margin-top: 0;
         }
     }

src/bundle/Resources/public/scss/_list-filters.scss

@@ -87,7 +87,7 @@
     }
 
     &__item {
-        .ibexa-label {
+        .ids-label {
             margin: 0;
             padding: 0;
         }

src/bundle/Resources/public/scss/_login.scss

@@ -8,7 +8,7 @@
     background-image: url('/bundles/ibexaadminui/img/login-background.jpg');
     background-size: cover;
 
-    .ibexa-label {
+    .ids-label {
         margin-top: calculateRem(40px);
     }
 
@@ -81,7 +81,7 @@
         margin-top: calculateRem(32px);
 
         & + .has-error {
-            .ibexa-label {
+            .ids-label {
                 margin-top: 0;
             }
         }

src/bundle/Resources/public/scss/_mixins.scss

@@ -4,7 +4,7 @@
 
 @mixin datetime-field() {
     &.is-invalid {
-        .ibexa-label {
+        .ids-label {
             color: $ibexa-color-danger;
         }
 

src/bundle/Resources/public/scss/_modals.scss

@@ -37,7 +37,7 @@
                 margin-top: calculateRem(18px);
             }
 
-            .ibexa-label {
+            .ids-label {
                 font-size: calculateRem(16px);
             }
 

src/bundle/Resources/public/scss/_search-links-form.scss

@@ -21,7 +21,7 @@
         padding-left: calculateRem(24px);
         border-left: calculateRem(1px) solid $ibexa-color-light;
 
-        .ibexa-label {
+        .ids-label {
             margin-top: 0;
         }
 

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

@@ -414,7 +414,7 @@
         }
 
         .form-group:first-child {
-            .ibexa-label {
+            .ids-label {
                 margin-top: 0;
             }
         }

src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss

@@ -35,7 +35,7 @@
         display: flex;
         align-self: flex-end;
 
-        .ibexa-label {
+        .ids-label {
             display: none;
             padding-bottom: calculateRem(8px);
         }
@@ -83,7 +83,7 @@
     &--disabled {
         pointer-events: none;
 
-        .ibexa-label {
+        .ids-label {
             color: $ibexa-color-black-300;
         }
 
@@ -167,7 +167,7 @@
                 justify-content: space-between;
                 width: 100%;
 
-                .ibexa-label {
+                .ids-label {
                     display: inline-flex;
                     margin: calculateRem(8px) 0 0 0;
                 }

src/bundle/Resources/public/scss/fieldType/edit/_ibexa_binaryfile.scss

@@ -35,7 +35,7 @@
                 font-size: calculateRem(16px);
                 margin-right: calculateRem(40px);
 
-                .ibexa-label {
+                .ids-label {
                     margin-bottom: 0;
                 }
             }

src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image.scss

@@ -7,7 +7,7 @@
         &__file-name-wrapper,
         &__dimensions-wrapper,
         &__file-size-wrapper {
-            .ibexa-label {
+            .ids-label {
                 margin-top: 0;
                 margin-bottom: 0;
             }

src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image_asset.scss

@@ -25,7 +25,7 @@
 
     .ibexa-field-edit-preview {
         &__file-name-wrapper {
-            .ibexa-label {
+            .ids-label {
                 margin-top: 0;
                 margin-bottom: 0;
             }

src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss

@@ -28,7 +28,7 @@
             min-width: 0;
             padding: calculateRem(8px);
 
-            .ibexa-label {
+            .ids-label {
                 margin-top: 0;
                 margin-bottom: 0;
                 white-space: nowrap;

src/bundle/Resources/public/scss/fieldType/edit/_ibexa_user.scss

@@ -9,7 +9,7 @@
             max-width: 80%;
 
             .ibexa-data-source__field:first-of-type {
-                .ibexa-label {
+                .ids-label {
                     margin-top: 0;
                 }
             }

src/bundle/Resources/public/scss/ui/modules/common/_popup.scss

@@ -74,7 +74,7 @@
         }
     }
 
-    .ibexa-label--checkbox-radio {
+    .ids-choice-input-label {
         padding-left: calculateRem(4px);
     }
 }

src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig

@@ -7,7 +7,7 @@
     {% if errors|length > 0 %}{% set wrapper_class = (wrapper_class|default('') ~ ' is-invalid')|trim %}{% endif %}
 
     {% set label_wrapper_attr = label_wrapper_attr|default({})|merge({'class': (label_wrapper_attr.class|default('') ~ 'ibexa-field__label-wrapper')|trim}) %}
-    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-field__label ibexa-label')|trim}) %}
+    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-field__label ids-label')|trim}) %}
     {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-input ibexa-input--text ibexa-data-source__input')|trim}) %}
     {% set wrapper_attr = wrapper_attr|default({})|merge({'class': (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %}
 

src/bundle/Resources/views/themes/admin/account/login/index.html.twig

@@ -22,7 +22,7 @@
                 {% block login_form_fields %}
                     <div class="form-group{% if error %} has-error{% endif %}">
                         <div class="ibexa-login__input-label-wrapper">
-                            <label class="ibexa-label" for="username">{{ 'authentication.username'|trans|desc('Username') }}</label>
+                            <twig:ibexa:label for="username">{{ 'authentication.username'|trans|desc('Username') }}</twig:ibexa:label>
                         </div>
                         {%- embed '@ibexadesign/ui/component/input_text.html.twig' -%}
                             {% block content %}
@@ -43,7 +43,7 @@
                     </div>
                     <div class="form-group{% if error %} has-error{% endif %} position-relative">
                         <div class="ibexa-login__input-label-wrapper">
-                            <label class="ibexa-label" for="password">{{ 'authentication.password'|trans|desc('Password') }}</label>
+                            <twig:ibexa:label for="password">{{ 'authentication.password'|trans|desc('Password') }}</twig:ibexa:label>
                         </div>
                         {%- embed '@ibexadesign/ui/component/input_text.html.twig' with {
                             type: 'password',

src/bundle/Resources/views/themes/admin/account/notifications/filters/form_fields.html.twig

@@ -34,9 +34,9 @@
     } %}
         {% block content %}
             <div class="form-group">
-                <label class="ibexa-label form-label">
+                <twig:ibexa:label class="form-label">
                     {{ 'ibexa.notifications.search_form.label.from'|trans|desc('From') }}
-                </label>
+                </twig:ibexa:label>
                 {{ form_widget(form.children.min, {
                     attr: {
                         'data-seconds': 0,
@@ -48,9 +48,9 @@
             </div>
 
             <div class="form-group">
-                <label class="ibexa-label form-label">
+                <twig:ibexa:label class="form-label">
                     {{ 'ibexa.notifications.search_form.label.to'|trans|desc('To') }}
-                </label>
+                </twig:ibexa:label>
                 {{ form_widget(form.children.max, {
                     attr: {
                         'data-seconds': 0,

src/bundle/Resources/views/themes/admin/content/form_fields.html.twig

@@ -52,7 +52,7 @@
     {% if required %}{% set wrapper_class = (wrapper_class ~ ' ibexa-data-source__field--required')|trim %}{% endif %}
     {% if errors|length > 0 %}{% set wrapper_class = (wrapper_class|default('') ~ ' is-invalid')|trim %}{% endif %}
 
-    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-label ibexa-data-source__label')|trim}) %}
+    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ids-label ibexa-data-source__label')|trim}) %}
     {% set label_wrapper_attr = label_wrapper_attr|default({})|merge({'class': (label_wrapper_attr.class|default('') ~ ' ibexa-data-source__label-wrapper')|trim}) %}
     {% set attr = attr|merge({
         class: (attr.class|default('') ~ ' ibexa-data-source__input' ~ (is_small ? ' ibexa-input--small'))|trim,
@@ -105,7 +105,7 @@
         {% set attr = attr|merge({'readonly': 'readonly'}) %}
     {% endif %}
     {% set label_wrapper_attr = label_wrapper_attr|default({})|merge({'class': (label_wrapper_attr.class|default('') ~ 'ibexa-field-edit__label-wrapper')|trim}) %}
-    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-label ibexa-field-edit__label')|trim}) %}
+    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ids-label ibexa-field-edit__label')|trim}) %}
     {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-data-source__input')|trim}) %}
     {% set wrapper_attr = wrapper_attr|default({})|merge({'class': (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %}