IBX-11635: Use design-system text input component

src/bundle/Resources/encore/ibexa.css.config.js

@@ -5,6 +5,7 @@ module.exports = (Encore) => {
         path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
         path.resolve(__dirname, '../public/scss/ibexa.scss'),
         path.resolve(__dirname, '../public/scss/ui/ibexa-modules.scss'),
+        path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
         path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'),
         path.resolve(
             './vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/plugins/confirmDate/confirmDate.css',
@@ -19,5 +20,6 @@ module.exports = (Encore) => {
         .addEntry('ibexa-admin-ui-security-base-css', [
             path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
             path.resolve(__dirname, '../public/scss/ibexa.scss'),
+            path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
         ]);
 };

src/bundle/Resources/encore/ibexa.js.config.js

@@ -49,6 +49,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+    path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
     path.resolve(__dirname, '../public/js/scripts/admin.table.js'),
     path.resolve(__dirname, '../public/js/scripts/core/collapse.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.dropdown.js'),
@@ -247,9 +248,13 @@ module.exports = (Encore) => {
         ])
         .addEntry('ibexa-admin-ui-login-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+            path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
             path.resolve(__dirname, '../public/js/scripts/login.js'),
         ])
-        .addEntry('ibexa-admin-ui-reset-password-js', [path.resolve(__dirname, '../public/js/scripts/admin.input.text.js')])
+        .addEntry('ibexa-admin-ui-reset-password-js', [
+            path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+            path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
+        ])
         .addEntry('ibexa-admin-ui-user-invitation-modal', [path.resolve(__dirname, '../public/js/scripts/user.invitation.modal.js')])
         .addEntry('ibexa-admin-ui-tabs-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.location.tab.js'),

src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js

@@ -4,27 +4,45 @@
     if (modal) {
         const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]');
         const submitBtn = modal.querySelector('#custom_url_add_add');
-        const input = modal.querySelector('[required="required"]');
+        const input = modal.querySelector('#custom_url_add_path') || modal.querySelector('[name="custom_url_add[path]"]');
         const siteRootCheckbox = modal.querySelector('[name="custom_url_add[site_root]"]');
         const toggleButtonState = () => {
+            if (!input || !submitBtn) {
+                return;
+            }
+
             const hasValue = input.value.trim().length !== 0;
             const methodName = hasValue ? 'removeAttribute' : 'setAttribute';
 
             submitBtn[methodName]('disabled', true);
         };
         const clearValues = () => {
+            if (!input) {
+                return;
+            }
+
             input.value = '';
             toggleButtonState();
         };
         const toggleSiteAccessSelect = (event) => {
             const isChecked = event.target.checked;
             const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown');
 
+            if (!siteAccessSelect) {
+                return;
+            }
+
             siteAccessSelect.classList.toggle('ibexa-dropdown--is-disabled', isChecked);
         };
 
-        input.addEventListener('input', toggleButtonState, false);
-        siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
+        if (input) {
+            input.addEventListener('input', toggleButtonState, false);
+        }
+
+        if (siteRootCheckbox) {
+            siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
+        }
+
         discardBtns.forEach((btn) => btn.addEventListener('click', clearValues, false));
     }
 })(window, window.document);

src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js

@@ -10,7 +10,7 @@
     }
 
     const globalSearchInput = globalSearch.querySelector('.ibexa-global-search__input');
-    const clearBtn = globalSearch.querySelector(' .ibexa-input-text-wrapper__action-btn--clear');
+    const clearBtn = globalSearch.querySelector('.ids-clear-btn, .ibexa-input-text-wrapper__action-btn--clear');
     const autocompleteNode = globalSearch.querySelector('.ibexa-global-search__autocomplete');
     const autocompleteListNode = globalSearch.querySelector('.ibexa-global-search__autocomplete-list');
     const autocompleteResultsCountNumber = globalSearch.querySelector('.ibexa-global-search__autocomplete-total-count-number');
@@ -152,6 +152,6 @@
     };
 
     globalSearchInput.addEventListener('keyup', handleTyping, false);
-    clearBtn.addEventListener('click', hideAutocomplete, false);
+    clearBtn?.addEventListener('click', hideAutocomplete, false);
     doc.addEventListener('keydown', focusSearch, false);
 })(window, document, window.ibexa, window.Routing, window.Translator);

src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js

@@ -7,8 +7,12 @@
 
     const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]');
     const submitBtn = modal.querySelector('[type="submit"]');
-    const inputs = [...modal.querySelectorAll('[required="required"]')];
+    const inputs = [...modal.querySelectorAll('[required], [required="required"]')];
     const toggleButtonState = () => {
+        if (!submitBtn || inputs.length === 0) {
+            return;
+        }
+
         const isInvalid = inputs.some((input) => input.value.trim().length === 0);
         const methodName = isInvalid ? 'setAttribute' : 'removeAttribute';
 

src/bundle/Resources/public/js/scripts/user.invitation.modal.js

@@ -9,7 +9,7 @@ export class UserInvitationModal {
         this.modal = options.modal;
         this.stickyTopContainer = this.modal.querySelector('.ibexa-user-invitation-modal__sticky-top');
         this.searchInput = this.modal.querySelector('.ibexa-user-invitation-modal__search-input');
-        this.searchBtn = this.modal.querySelector('.ibexa-input-text-wrapper__action-btn--search');
+        this.searchBtn = this.modal.querySelector('.ids-input-text__search-btn, .ibexa-input-text-wrapper__action-btn--search');
         this.searchNoEntries = this.modal.querySelector('.ibexa-user-invitation-modal__search-no-entries');
         this.badFileAlert = this.modal.querySelector('.ibexa-user-invitation-modal__bad-file-alert');
         this.badFileAlertCloseBtn = this.badFileAlert.querySelector('.ibexa-alert__close-btn');
@@ -490,7 +490,7 @@ export class UserInvitationModal {
         this.goToNextIssueBtn.addEventListener('click', this.scrollToNextIssue, false);
 
         this.searchInput.addEventListener('keyup', this.handleSearch, false);
-        this.searchBtn.addEventListener('keyup', this.handleSearch, false);
+        this.searchBtn?.addEventListener('keyup', this.handleSearch, false);
 
         this.fakeSubmitBtn.addEventListener(
             'click',

src/bundle/Resources/public/scss/_dropdown.scss

@@ -186,8 +186,10 @@
         display: flex;
         flex-direction: column;
 
-        .ibexa-input-text-wrapper {
+        .ibexa-input-text-wrapper,
+        .ids-input-text {
             width: 100%;
+            display: block;
             padding: calculateRem(8px) calculateRem(12px);
 
             &__actions {
@@ -196,7 +198,8 @@
         }
 
         &--search-hidden {
-            .ibexa-input-text-wrapper {
+            .ibexa-input-text-wrapper,
+            .ids-input-text {
                 display: none;
             }
         }

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

@@ -20,6 +20,10 @@
         flex: 1 1 auto;
         order: 2;
         margin: calculateRem(2px);
+
+        .c-taggify__new-tag-input-wrapper {
+            width: 100%;
+        }
     }
 
     &__tags {
@@ -35,6 +39,7 @@
         border: 0 none;
         outline: none;
         background: transparent;
+        padding: 0;
     }
 
     &__bottom-hint {

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss

@@ -18,24 +18,29 @@
     }
 
     &__search-input {
-        position: absolute;
-        width: calc(100% - #{calculateRem(224px)});
-        top: 50%;
-        left: calculateRem(65px);
-        border: none;
-        padding: 0;
-        font-family: $ibexa-font-family-headings;
-        font-weight: $ibexa-font-weight-bold;
-        font-size: $ibexa-text-font-size-extra-large;
-        opacity: 0;
-        transform: translateY(-50%) scaleX(0);
-        transform-origin: left;
-        transition:
-            all $ibexa-admin-transition-duration $ibexa-admin-transition,
-            transform 0s;
+        &.ids-input-text {
+            position: absolute;
+            width: calc(100% - #{calculateRem(224px)});
+            top: 50%;
+            left: calculateRem(65px);
+            opacity: 0;
+            transform: translateY(-50%) scaleX(0);
+            transform-origin: left;
+            transition:
+                all $ibexa-admin-transition-duration $ibexa-admin-transition,
+                transform 0s;
+        }
+
+        .ids-input {
+            border: none;
+            padding: 0;
+            font-family: $ibexa-font-family-headings;
+            font-weight: $ibexa-font-weight-bold;
+            font-size: $ibexa-text-font-size-extra-large;
 
-        &:focus {
-            outline: none;
+            &:focus {
+                outline: none;
+            }
         }
     }
 }

src/bundle/Resources/public/ts/admin.search.ts

@@ -4,7 +4,7 @@
     const headerSearchInput = document.querySelector<HTMLInputElement>('.ibexa-global-search__input');
     const languageSelector = document.querySelector<HTMLSelectElement>('.ibexa-filters__item--language-selector .ibexa-filters__select');
     const headerSearchSubmitBtn = document.querySelector<HTMLButtonElement>(
-        '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search',
+        '.ibexa-main-header .ids-input-text__search-btn, .ibexa-main-header .ibexa-input-text-wrapper__action-btn--search',
     );
 
     if (!headerSearchInput || !searchInput || !searchForm) {

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

@@ -24,42 +24,36 @@
                         <div class="ibexa-login__input-label-wrapper">
                             <label class="ibexa-label" for="username">{{ 'authentication.username'|trans|desc('Username') }}</label>
                         </div>
-                        {%- embed '@ibexadesign/ui/component/input_text.html.twig' -%}
-                            {% block content %}
-                                <input
-                                    type="text"
-                                    id="username"
-                                    class="form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--name"
-                                    name="_username"
-                                    value="{{ last_username }}"
-                                    required="required"
-                                    autofocus="autofocus"
-                                    autocomplete="on"
-                                    tabindex="1"
-                                    placeholder=" "
-                                />
-                            {% endblock %}
-                        {%- endembed -%}
+                        {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+                            type: 'text',
+                            input_attr: {
+                                id: 'username',
+                                class: 'ibexa-login__input ibexa-login__input--name',
+                                name: '_username',
+                                value: last_username,
+                                required: true,
+                                autofocus: true,
+                                autocomplete: 'on',
+                                tabindex: '1',
+                                placeholder: ' '
+                            }
+                        } only -%}
                     </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>
                         </div>
-                        {%- embed '@ibexadesign/ui/component/input_text.html.twig' with {
+                        {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
                             type: 'password',
-                        } -%}
-                            {% block content %}
-                                <input
-                                    type="password"
-                                    id="password"
-                                    class="form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--password"
-                                    name="_password"
-                                    required="required"
-                                    tabindex="2"
-                                    placeholder=" "
-                                />
-                            {% endblock %}
-                        {%- endembed -%}
+                            input_attr: {
+                                id: 'password',
+                                class: 'ibexa-login__input ibexa-login__input--password',
+                                name: '_password',
+                                required: true,
+                                tabindex: '2',
+                                placeholder: ' '
+                            }
+                        } only -%}
                     </div>
 
                     <input type="hidden" name="_csrf_token" value="{{ csrf_token("authenticate") }}" />

src/bundle/Resources/views/themes/admin/content_type/available_field_types.html.twig

@@ -4,15 +4,15 @@
         <h3 class="ibexa-available-field-types__title">{{ 'content_type.view.edit.content_field_types'|trans|desc('Field types') }}</h3>
     </div>
     <div class="ibexa-available-field-types__search-bar">
-        {% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true, search_button_type: 'button' } %}
-            {% block content %}
-                <input
-                    type="text"
-                    class="ibexa-input ibexa-input--text ibexa-available-field-types__sidebar-filter form-control"
-                    placeholder="{{ 'content_type.view.edit.search'|trans|desc('Search...') }}"
-                />
-            {% endblock %}
-        {% endembed %}
+        {% include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+            has_search: true,
+            search_button_type: 'button',
+            input_attr: {
+                type: 'text',
+                class: 'ibexa-available-field-types__sidebar-filter',
+                placeholder: 'content_type.view.edit.search'|trans|desc('Search...')
+            }
+        } only %}
     </div>
     <ul class="ibexa-available-field-types__list">
         {% for item in field_type_toolbar %}

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

@@ -149,15 +149,15 @@
                 {% endif %}
             {% endblock items_list_header %}
 
-            {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%}
-                {% block content %}
-                    <input
-                        type="text"
-                        placeholder="{{ 'dropdown.search'|trans|desc('Search...') }}"
-                        class="ibexa-dropdown__items-filter ibexa-input ibexa-input--text ibexa-input--small form-control"
-                    />
-                {% endblock %}
-            {%- endembed -%}
+            {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+                has_search: true,
+                input_attr: {
+                    type: 'text',
+                    size: 'small',
+                    class: 'ibexa-dropdown__items-filter',
+                    placeholder: 'dropdown.search'|trans|desc('Search...')
+                }
+            } only -%}
 
             {% if has_select_all_toggler and choices_flat|length >= min_select_all_toggler_items %}
                 {% set selection_toggler_label = value|length