diff --git a/composer.json b/composer.json index 97beea181e..e34fc9058c 100644 --- a/composer.json +++ b/composer.json @@ -27,6 +27,7 @@ "ibexa/content-forms": "~6.0.x-dev", "ibexa/core": "~6.0.x-dev", "ibexa/design-engine": "~6.0.x-dev", + "ibexa/design-system-twig": "~6.0.x-dev", "ibexa/rest": "~6.0.x-dev", "ibexa/search": "~6.0.x-dev", "ibexa/twig-components": "~6.0.x-dev", @@ -97,5 +98,11 @@ "branch-alias": { "dev-main": "6.0.x-dev" } - } + }, + "repositories": [ + { + "type": "vcs", + "url": "https://github.com/ibexa/design-system-twig" + } + ] } diff --git a/features/standard/ContentType.feature b/features/standard/ContentType.feature index 96938da21b..4aca9ea98d 100644 --- a/features/standard/ContentType.feature +++ b/features/standard/ContentType.feature @@ -74,7 +74,8 @@ Feature: Content types management @javascript Scenario: New content type can be added to content type group - Given I am logged as admin + Given I open Login page in admin SiteAccess + And I log in as "admin" with password "publish" And I'm on content type Page for "Content" group When I create a new content type And I set fields diff --git a/features/standard/fields/other.feature b/features/standard/fields/other.feature index 77f3b10330..5a1baea901 100644 --- a/features/standard/fields/other.feature +++ b/features/standard/fields/other.feature @@ -28,8 +28,8 @@ Feature: Content fields setting and editing | Field | | | Examples: - | fieldInternalName | fieldName | fieldSettings | label1 | value1 | contentItemName | fieldTypeIdentifier | - | ibexa_selection | Selection | is_multiple:false,options:A first-Bielefeld-TestValue-Turtles-Zombies | value | TestValue | TestValue | ibexa_selection | + | fieldInternalName | fieldName | fieldSettings | label1 | value1 | contentItemName | fieldTypeIdentifier | + | ibexa_selection | Selection | is_multiple:false,options:A first-Bielefeld-TestValue-Turtles-Zombies | value | TestValue | TestValue | ibexa_selection | | ibexa_boolean | Checkbox | | value | true | 1 | | | ibexa_email | Email address | | value | email@example.com | email@example.com | | | ibexa_float | Float | | value | 11.11 | 11.11 | | @@ -40,7 +40,8 @@ Feature: Content fields setting and editing @javascript @APIUser:admin Scenario Outline: Edit content item with given field - Given I am logged as admin + Given I open Login page in admin SiteAccess + And I log in as "admin" with password "publish" And I'm on Content view Page for "OtherFieldsContainer/" When I perform the "Edit" action And I set content fields @@ -55,7 +56,7 @@ Feature: Content fields setting and editing Examples: | label1 | value1 | oldContentItemName | newContentItemName | fieldTypeIdentifier | - | value | Bielefeld | TestValue | Bielefeld | ibexa_selection | + | value | Bielefeld | TestValue | Bielefeld | ibexa_selection | | value | false | 1 | 0 | | | value | edited.email@example.com | email@example.com | edited.email@example.com | | | value | 12.34 | 11.11 | 12.34 | | diff --git a/src/bundle/Resources/encore/ibexa.css.config.js b/src/bundle/Resources/encore/ibexa.css.config.js index 62dfba962e..283f45eb1f 100644 --- a/src/bundle/Resources/encore/ibexa.css.config.js +++ b/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', diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js index 30b8296fd9..b12c548364 100644 --- a/src/bundle/Resources/encore/ibexa.js.config.js +++ b/src/bundle/Resources/encore/ibexa.js.config.js @@ -7,6 +7,10 @@ const layout = [ path.resolve(__dirname, '../public/js/scripts/admin.format.date.js'), path.resolve(__dirname, '../public/js/scripts/core/draggable.js'), path.resolve(__dirname, '../public/js/scripts/core/dropdown.js'), + path.resolve( + __dirname, + '../../../../../design-system-twig/src/bundle/Resources/public/ts/init_components.ts', + ), path.resolve(__dirname, '../public/js/scripts/core/backdrop.js'), path.resolve(__dirname, '../public/js/scripts/core/custom.tooltip.js'), path.resolve(__dirname, '../public/js/scripts/core/base.chart.js'), diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js index eb8935244d..4c9c04a2ef 100644 --- a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js +++ b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js @@ -1,3 +1,5 @@ +import { DropdownMultiInput, DropdownSingleInput } from '../../../../../../../design-system-twig/src/bundle/Resources/public/ts/components/dropdown'; + (function (global, doc, ibexa, Routing, Translator, bootstrap) { const SELECTOR_INPUTS_TO_VALIDATE = '.ibexa-input[required]:not([disabled]):not([hidden])'; const SELETOR_FIELD_INPUTS = @@ -102,6 +104,35 @@ return fieldNode; }; const attachFieldDefinitionNodeEvents = (fieldNode, { targetContainer }) => { + const initDropdown = (dropdownContainer) => { + const dropdownAlreadyInitialized = !!ibexa.helpers.objectInstances.getInstance(dropdownContainer); + + if (dropdownAlreadyInitialized) { + return; + } + + if (dropdownContainer.classList.contains('ids-dropdown--multi')) { + const dropdown = new DropdownMultiInput(dropdownContainer); + + dropdown.init(); + + return; + } + + if (dropdownContainer.classList.contains('ids-dropdown--single')) { + const dropdown = new DropdownSingleInput(dropdownContainer); + + dropdown.init(); + + return; + } + + const dropdown = new ibexa.core.Dropdown({ + container: dropdownContainer, + }); + + dropdown.init(); + }; const fieldGroupInput = fieldNode.querySelector('.ibexa-input--field-group'); const fieldDefinitionsInputs = fieldNode.querySelectorAll(SELETOR_FIELD_INPUTS); const removeFieldBtns = fieldNode.querySelectorAll('.ibexa-collapse__extra-action-button--remove-field-definitions'); @@ -122,20 +153,10 @@ }); } - const dropdowns = fieldNode.querySelectorAll('.ibexa-dropdown'); + const dropdowns = fieldNode.querySelectorAll('.ibexa-dropdown, .ids-dropdown'); dropdowns.forEach((dropdownContainer) => { - const dropdownAlreadyInitialized = !!ibexa.helpers.objectInstances.getInstance(dropdownContainer); - - if (dropdownAlreadyInitialized) { - return; - } - - const dropdown = new ibexa.core.Dropdown({ - container: dropdownContainer, - }); - - dropdown.init(); + initDropdown(dropdownContainer); }); draggableGroups.forEach((group) => { diff --git a/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js b/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js index 8668cff04f..b271b85ea8 100644 --- a/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js +++ b/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js @@ -18,11 +18,21 @@ }; const toggleSiteAccessSelect = (event) => { const isChecked = event.target.checked; - const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown'); + const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown, .ibexa-custom-url-from__item--siteacces .ids-dropdown'); + const sourceSelect = siteAccessSelect?.querySelector('.ibexa-input--select, .ids-dropdown__source select'); - siteAccessSelect.classList.toggle('ibexa-dropdown--is-disabled', isChecked); + if (siteAccessSelect?.classList.contains('ibexa-dropdown')) { + siteAccessSelect.classList.toggle('ibexa-dropdown--disabled', isChecked); + } else if (siteAccessSelect?.classList.contains('ids-dropdown')) { + siteAccessSelect.classList.toggle('ids-dropdown--disabled', isChecked); + } + + if (sourceSelect) { + sourceSelect.disabled = isChecked; + } }; + toggleSiteAccessSelect({ target: siteRootCheckbox }); input.addEventListener('input', toggleButtonState, false); siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false); discardBtns.forEach((btn) => btn.addEventListener('click', clearValues, false)); diff --git a/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js b/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js index f63ae54c3e..8dc6ddef27 100644 --- a/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js +++ b/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js @@ -18,12 +18,16 @@ }; doc.querySelectorAll('.ibexa-translation__language-wrapper--language').forEach((select) => { - const dropdown = select.closest('.ibexa-dropdown'); + const dropdown = select.closest('.ibexa-dropdown, .ids-dropdown'); const observer = new MutationObserver(() => toggleBtnDisabledState(select)); toggleBtnDisabledState(select); select.addEventListener('change', ({ target }) => toggleBtnDisabledState(target), false); + if (!dropdown) { + return; + } + observer.observe(dropdown, observerConfig); }); })(window, window.document); diff --git a/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js b/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js index 33fb21d9d9..70b8320398 100644 --- a/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js +++ b/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js @@ -12,7 +12,9 @@ return; } - const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select'); + const sourceSelect = filterNode.querySelector( + '.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select, .ibexa-list-filters__item-content .ids-dropdown__source select', + ); const checkboxes = filterNode.querySelectorAll( '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])', ); @@ -57,7 +59,9 @@ return; } - const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select'); + const sourceSelect = filterNode.querySelector( + '.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select, .ibexa-list-filters__item-content .ids-dropdown__source select', + ); sourceSelect?.addEventListener('change', filterChange, false); }; @@ -79,7 +83,7 @@ return; } - const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select'); + const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select, .ids-dropdown__source select'); const checkedCheckboxes = filterNode.querySelectorAll('.ibexa-input--checkbox:checked'); if (isNodeDatePicker(filterNode)) { diff --git a/src/bundle/Resources/public/js/scripts/admin.search.filters.js b/src/bundle/Resources/public/js/scripts/admin.search.filters.js index 7f6b1dcc1c..6959eda4af 100644 --- a/src/bundle/Resources/public/js/scripts/admin.search.filters.js +++ b/src/bundle/Resources/public/js/scripts/admin.search.filters.js @@ -10,9 +10,16 @@ const clearBtn = filters.querySelector('.ibexa-btn--clear'); const applyBtn = filters.querySelector('.ibexa-btn--apply'); const contentTypeSelect = doc.querySelector('.ibexa-filters__item--content-type .ibexa-filters__select'); - const sectionSelect = doc.querySelector('.ibexa-filters__item--section .ibexa-filters__select'); - const lastModifiedSelectNode = doc.querySelector('.ibexa-filters__item--modified .ibexa-filters__select'); - const lastModifiedSelect = getInstance(lastModifiedSelectNode); + const sectionSelect = filters.querySelector( + '.ibexa-filters__item--section .ibexa-input--select, .ibexa-filters__item--section .ids-dropdown__source select', + ); + const lastModifiedDropdownNode = filters.querySelector( + '.ibexa-filters__item--modified .ibexa-dropdown, .ibexa-filters__item--modified .ids-dropdown', + ); + const lastModifiedSelectNode = filters.querySelector( + '.ibexa-filters__item--modified .ibexa-input--select, .ibexa-filters__item--modified .ids-dropdown__source select', + ); + const lastModifiedSelect = getInstance(lastModifiedDropdownNode); const lastModifiedDateRangeNode = doc.querySelector('.ibexa-filters__item--modified .ibexa-date-time-range-single'); const lastModifiedDateRange = getInstance(lastModifiedDateRangeNode); const { @@ -23,8 +30,13 @@ const lastModifiedPeriod = doc.querySelector(lastModifiedPeriodSelector); const lastModifiedStartDate = doc.querySelector(lastModifiedStartSelector); const lastModifiedEndDate = doc.querySelector(lastModifiedEndSelector); - const lastCreatedSelectNode = doc.querySelector('.ibexa-filters__item--created .ibexa-filters__select'); - const lastCreatedSelect = getInstance(lastCreatedSelectNode); + const lastCreatedDropdownNode = filters.querySelector( + '.ibexa-filters__item--created .ibexa-dropdown, .ibexa-filters__item--created .ids-dropdown', + ); + const lastCreatedSelectNode = filters.querySelector( + '.ibexa-filters__item--created .ibexa-input--select, .ibexa-filters__item--created .ids-dropdown__source select', + ); + const lastCreatedSelect = getInstance(lastCreatedDropdownNode); const lastCreatedDateRangeNode = doc.querySelector('.ibexa-filters__item--created .ibexa-date-time-range-single'); const lastCreatedDateRange = getInstance(lastCreatedDateRangeNode); const { @@ -63,9 +75,8 @@ sectionSelect[0].selected = true; } - lastModifiedSelectNode[0].selected = true; - lastCreatedSelectNode[0].selected = true; - lastModifiedSelectNode.querySelector('option').selected = true; + lastModifiedSelect.selectFirstOption(); + lastCreatedSelect.selectFirstOption(); lastModifiedPeriod.value = ''; lastModifiedEnd.value = ''; lastCreatedPeriod.value = ''; @@ -240,7 +251,10 @@ removeSearchTag(event); }; const clearSection = (event) => { - sectionSelect[0].selected = true; + if (sectionSelect) { + sectionSelect[0].selected = true; + } + removeSearchTag(event); }; const clearSubtree = (event) => { diff --git a/src/bundle/Resources/public/js/scripts/filters.action.btns.js b/src/bundle/Resources/public/js/scripts/filters.action.btns.js index ea1569d8f3..c7f2566bc5 100644 --- a/src/bundle/Resources/public/js/scripts/filters.action.btns.js +++ b/src/bundle/Resources/public/js/scripts/filters.action.btns.js @@ -4,7 +4,7 @@ containers.forEach((container) => { const clearBtn = container.querySelector('.ibexa-adaptive-filters__clear-btn'); const applyBtn = container.querySelector('.ibexa-adaptive-filters__submit-btn'); - const dropdownNodes = [...container.querySelectorAll('.ibexa-dropdown')]; + const dropdownNodes = [...container.querySelectorAll('.ibexa-dropdown, .ids-dropdown')]; const textInputNodes = [...container.querySelectorAll('.ibexa-input--text')]; const dateInputNodes = [...container.querySelectorAll('.ibexa-input--date')]; const originalValuesMap = new Map(); @@ -40,8 +40,8 @@ return ( textInputNodes.every((textInputNode) => textInputNode.disabled || textInputNode.value === '') && dropdownNodes.every((dropdownNode) => { - const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled'); - const selectNode = dropdownNode.querySelector('.ibexa-input--select'); + const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled') || dropdownNode.classList.contains('ids-dropdown--disabled'); + const selectNode = dropdownNode.querySelector('.ibexa-input--select, .ids-dropdown__source select'); const dropdown = dropdownNode.ibexaInstance; return isDisabled || (dropdown.canSelectOnlyOne ? selectNode.selectedIndex === 0 : selectNode.selectedIndex === -1); @@ -78,7 +78,7 @@ } }); dropdownNodes.forEach((dropdownNode) => { - const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled'); + const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled') || dropdownNode.classList.contains('ids-dropdown--disabled'); if (!isDisabled) { const dropdown = dropdownNode.ibexaInstance; @@ -135,7 +135,7 @@ } dropdownNodes.forEach((dropdownNode) => { - const select = dropdownNode.querySelector('.ibexa-input--select'); + const select = dropdownNode.querySelector('.ibexa-input--select, .ids-dropdown__source select'); select.addEventListener('change', handleInputChange, false); }); diff --git a/src/bundle/Resources/public/js/scripts/helpers/icon.helper.js b/src/bundle/Resources/public/js/scripts/helpers/icon.helper.js index f9d9193c28..a8b1d27fec 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/icon.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/icon.helper.js @@ -1,9 +1,9 @@ import { getAdminUiConfig } from './context.helper'; -const getIconPath = (aliasPath, iconSet) => { +const getIconPath = (iconName, iconSet, useLegacyNames = true) => { const adminUiConfig = getAdminUiConfig(); const { defaultIconSet, iconSets, iconAliases } = adminUiConfig.iconPaths; - const path = iconAliases[aliasPath] || aliasPath; + const path = useLegacyNames ? iconAliases[iconName] || iconName : iconName; if (!iconSet) { iconSet = defaultIconSet; diff --git a/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js b/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js index e531ccf33c..ded5d4d6c3 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js @@ -36,7 +36,7 @@ import { getInstance } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scri node.checked = value; } else if (node.tagName === 'SELECT') { - const dropdownContainer = node.closest('.ibexa-dropdown'); + const dropdownContainer = node.closest('.ibexa-dropdown, .ids-dropdown'); if (dropdownContainer) { const dropdownInstance = getInstance(dropdownContainer); diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index 319de4f673..e407e47d31 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -561,6 +561,14 @@ } } +.ids-dropdown { + &__selection-info, + &__selection-info-items, + .ids-overflow-list { + min-width: 0; + } +} + .form-inline { .ibexa-dropdown { margin: calculateRem(5px) calculateRem(8px); diff --git a/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig index 9686cd352f..4dcbf9ff5c 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig @@ -36,12 +36,12 @@ {% endset %} - {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with { + {% include '@ibexadesign/ui/component/dropdown/dropdown_ds.html.twig' with { source: source, choices: choices, value: value, is_small: true, - } %} + } only %} {% endif %} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig b/src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig index 8e44d00a31..63d6b7e373 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig @@ -79,12 +79,12 @@ {% endset %} - {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with { + {% include '@ibexadesign/ui/component/dropdown/dropdown_ds.html.twig' with { source: source, choices: choices, value: value, is_small: true, - } %} + } only %} {% endif %} {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_ds.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_ds.html.twig new file mode 100644 index 0000000000..e0f0271a88 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_ds.html.twig @@ -0,0 +1,165 @@ +{% set preferred_choices = preferred_choices|default([]) %} +{% set translation_domain = translation_domain|default(false) %} +{% set value = value is defined ? value : null %} +{% set multiple = multiple|default(false) %} +{% set custom_init = custom_init|default(false) %} +{% set is_disabled = is_disabled|default(false) or attr.readonly|default(false) %} + +{% set source = source|default(null) %} +{% set source_attr = source_attr|default({}) %} +{% set source_id = source_id|default(source_attr.id|default(null)) %} +{% set source_name = source_name|default(source_attr.name|default(name|default('dropdown'))) %} +{% set normalized_source_attr = source_attr|merge({ + name: source_name, + disabled: is_disabled, + required: required|default(false), +}) %} +{% if source_id is not null %} + {% set normalized_source_attr = normalized_source_attr|merge({ id: source_id }) %} +{% endif %} +{% set translated_placeholder = placeholder is defined and placeholder is not none + ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) + : null +%} +{% set empty_placeholder_fallback = 'ibexa.dropdown.placeholder.all'|trans({}, 'ibexa_design_system_twig')|desc('All') %} +{% set empty_placeholder_label = translated_placeholder is not same as(null) + ? translated_placeholder|trim|default(empty_placeholder_fallback) + : null +%} + +{% set has_selected_item_template_path = selected_item_template_path is defined and selected_item_template_path is not null %} +{% set has_list_item_template_path = list_item_template_path is defined and list_item_template_path is not null %} +{% set has_selected_item_label = selected_item_label is defined and selected_item_label is not empty %} +{% set has_items_class = items_class is defined and items_class is not empty %} +{% set has_items_list_header = items_list_header is defined and items_list_header is not empty %} +{% set has_min_search_items = min_search_items is defined and min_search_items is not null %} +{% set has_min_select_all_toggler_items = min_select_all_toggler_items is defined and min_select_all_toggler_items is not null %} +{% set has_min_item_width = min_item_width is defined and min_item_width is not null %} +{% set has_grouped_preferred_choices = preferred_choices|filter(choice => choice.choices is defined)|length > 0 %} +{% set has_grouped_choices = choices|filter(choice => choice.choices is defined)|length > 0 %} + +{% set can_use_ds = not ( + custom_init + or has_selected_item_template_path + or has_list_item_template_path + or has_selected_item_label + or is_dynamic|default(false) + or is_selector|default(false) + or has_items_class + or has_items_list_header + or is_small|default(false) + or is_ghost|default(false) + or has_min_search_items + or has_min_item_width + or has_grouped_preferred_choices + or has_grouped_choices +) %} + +{% if can_use_ds %} + {% set max_visible_items = 5 %} + {% set normalized_preferred_choices = preferred_choices|map(choice => { + value: choice.value ~ '', + label: translation_domain is same as(false) ? choice.label : choice.label|trans({}, translation_domain), + }) %} + {% set normalized_choices = choices|map(choice => { + value: choice.value ~ '', + label: translation_domain is same as(false) ? choice.label : choice.label|trans({}, translation_domain), + }) %} + {% set normalized_items = normalized_preferred_choices + | merge(normalized_choices) + | reduce((carry, choice) => choice.value in carry.values + ? carry + : { + items: carry.items|merge([choice]), + values: carry.values|merge([choice.value]), + }, { + items: [], + values: [], + }) + %} + {% set normalized_ds_items = normalized_items.items|map(choice => { + id: choice.value, + label: choice.label, + }) %} + {% set ds_items = not multiple and translated_placeholder is not same as(null) + ? [{ id: '', label: empty_placeholder_label }]|merge(normalized_ds_items) + : normalized_ds_items + %} + {% set ds_value = multiple + ? (value is iterable ? value|map(item => item ~ '') : []) + : (value is not null ? value ~ '' : '') + %} + {% set ds_dropdown_props = { + name: source_name, + items: ds_items, + value: ds_value, + disabled: is_disabled, + maxVisibleItems: max_visible_items, + class: class|default(''), + source, + sourceAttributes: normalized_source_attr, + } %} + {% if translated_placeholder is not same as(null) %} + {% set ds_dropdown_props = ds_dropdown_props|merge({ placeholder: translated_placeholder }) %} + {% endif %} + {% if is_hidden|default(false) %} + {% set ds_dropdown_props = ds_dropdown_props|merge({ hidden: true }) %} + {% endif %} + + {% if multiple %} + + {% else %} + + {% endif %} +{% else %} + {% set legacy_context = { + source, + choices, + preferred_choices, + value, + multiple, + custom_init, + class: class|default(''), + translation_domain, + custom_form: custom_form is defined ? custom_form : true, + is_disabled, + is_hidden: is_hidden|default(false), + is_small: is_small|default(false), + is_ghost: is_ghost|default(false), + is_selector: is_selector|default(false), + is_dynamic: is_dynamic|default(false), + has_select_all_toggler: has_select_all_toggler|default(false), + placeholder: translated_placeholder, + item_icon_class: item_icon_class|default(''), + attr: attr|default({}), + } %} + {% if has_selected_item_template_path %} + {% set legacy_context = legacy_context|merge({ selected_item_template_path: selected_item_template_path }) %} + {% endif %} + {% if has_list_item_template_path %} + {% set legacy_context = legacy_context|merge({ list_item_template_path: list_item_template_path }) %} + {% endif %} + {% if has_items_class %} + {% set legacy_context = legacy_context|merge({ items_class: items_class }) %} + {% endif %} + {% if has_items_list_header %} + {% set legacy_context = legacy_context|merge({ items_list_header: items_list_header }) %} + {% endif %} + {% if item_icon is defined and item_icon is not null %} + {% set legacy_context = legacy_context|merge({ item_icon: item_icon }) %} + {% endif %} + {% if has_min_search_items %} + {% set legacy_context = legacy_context|merge({ min_search_items: min_search_items }) %} + {% endif %} + {% if has_min_select_all_toggler_items %} + {% set legacy_context = legacy_context|merge({ min_select_all_toggler_items: min_select_all_toggler_items }) %} + {% endif %} + {% if has_min_item_width %} + {% set legacy_context = legacy_context|merge({ min_item_width: min_item_width }) %} + {% endif %} + {% if has_selected_item_label %} + {% set legacy_context = legacy_context|merge({ selected_item_label: selected_item_label }) %} + {% endif %} + + {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with legacy_context only %} +{% endif %} diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig index 70dc38cf11..8ba090d083 100644 --- a/src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig @@ -9,12 +9,16 @@ {{- block('choice_widget_collapsed') -}} {% endset %} - {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with { + {% include '@ibexadesign/ui/component/dropdown/dropdown_ds.html.twig' with { source: source, + source_id: form.vars.id, + source_name: full_name, + source_attr: attr, choices: choices, preferred_choices: preferred_choices, value: form.vars.value, multiple: form.vars.multiple, + required: required, custom_init: attr.dropdown_custom_init|default(false), class: attr.dropdown_class|default(''), translation_domain: choice_translation_domain|default(false), diff --git a/src/bundle/ui-dev/src/modules/common/design-system/design.system.provider.js b/src/bundle/ui-dev/src/modules/common/design-system/design.system.provider.js new file mode 100644 index 0000000000..aa6af3c473 --- /dev/null +++ b/src/bundle/ui-dev/src/modules/common/design-system/design.system.provider.js @@ -0,0 +1,35 @@ +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; + +import { AssetsProvider, TranslatorProvider } from '@ids-components/context'; + +import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { getIconPath } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/icon.helper'; + +const DesignSystemProvider = ({ children }) => { + const Translator = getTranslator(); + const assetsContextValue = useMemo( + () => ({ + getIconPath: (iconName, iconSet) => getIconPath(iconName, iconSet, false), + }), + [], + ); + const translatorContextValue = useMemo( + () => ({ + trans: (key, parameters, domain) => Translator.trans(key, parameters ?? {}, domain), + }), + [Translator], + ); + + return ( + + {children} + + ); +}; + +DesignSystemProvider.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default DesignSystemProvider; diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js index 0d2615d30c..26d18540d4 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js @@ -2,10 +2,9 @@ import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; import Icon from '../../../common/icon/icon'; -import Dropdown from '../../../common/dropdown/dropdown'; +import { DropdownSingleInput } from '@ids-components/components/Dropdown'; import { - DropdownPortalRefContext, CreateContentWidgetContext, ActiveTabContext, ContentOnTheFlyDataContext, @@ -29,7 +28,6 @@ const ContentCreateWidget = () => { const Translator = getTranslator(); const adminUiConfig = getAdminUiConfig(); const refContentTree = useRef(null); - const dropdownListRef = useContext(DropdownPortalRefContext); const [markedLocationId] = useContext(MarkedLocationIdContext); const [loadedLocationsMap] = useContext(LoadedLocationsMapContext); const { allowedLanguages, preselectedLanguage, preselectedContentType } = useContext(ContentOnTheFlyConfigContext); @@ -189,13 +187,13 @@ const ContentCreateWidget = () => {
- ({ id: value, label }))} + maxVisibleItems={5} + name="" onChange={updateSelectedLanguage} - single={true} value={selectedLanguage} - options={languageOptions} - extraClasses="c-udw-dropdown" />
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.js index 7a9e2a8a1c..41c9d7abe7 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.js @@ -13,9 +13,9 @@ import { SelectedSubtreeBreadcrumbsContext, } from '../search/search'; -import UniversalDiscoveryModule, { DropdownPortalRefContext } from '../../universal.discovery.module'; +import UniversalDiscoveryModule from '../../universal.discovery.module'; -import Dropdown from '../../../common/dropdown/dropdown'; +import { DropdownSingleInput } from '@ids-components/components/Dropdown'; import ContentTypeSelector from '../content-type-selector/content.type.selector'; import Icon from '../../../common/icon/icon'; @@ -35,7 +35,6 @@ const Filters = ({ search }) => { const [selectedLanguage, setSelectedLanguage] = useContext(SelectedLanguageContext); const [selectedSubtreeBreadcrumbs, setSelectedSubtreeBreadcrumbs] = useContext(SelectedSubtreeBreadcrumbsContext); const prevSelectedLanguage = useRef(selectedLanguage); - const dropdownListRef = useContext(DropdownPortalRefContext); const [filtersCleared, setFiltersCleared] = useState(false); const [isNestedUdwOpened, setIsNestedUdwOpened] = useState(false); const filterSubtreeUdwConfig = JSON.parse(window.document.querySelector('#react-udw').dataset.filterSubtreeUdwConfig); @@ -152,24 +151,24 @@ const Filters = ({ search }) => { {isNestedUdwOpened && ReactDOM.createPortal(, nestedUdwContainer.current)} - ({ id: value, label }))} + maxVisibleItems={5} + name="" onChange={updateSelectedLanguage} value={selectedLanguage} - options={languageOptions} - extraClasses="ibexa-dropdown--small c-udw-dropdown" /> - ({ id: value, label }))} + maxVisibleItems={5} + name="" onChange={updateSection} value={selectedSection} - options={sectionOptions} - extraClasses="ibexa-dropdown--small c-udw-dropdown" /> diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js index 062d87b193..1b891bcd5c 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js @@ -2,6 +2,7 @@ import React, { useEffect, useCallback, useState, createContext, useRef, useMemo import PropTypes from 'prop-types'; import Icon from '../common/icon/icon'; +import DesignSystemProvider from '../common/design-system/design.system.provider'; import deepClone from '../common/helpers/deep.clone.helper'; import { createCssClassNames } from '../common/helpers/css.class.names'; import { useLoadedLocationsReducer } from './hooks/useLoadedLocationsReducer'; @@ -540,164 +541,166 @@ const UniversalDiscoveryModule = ({ }, [currentView]); return ( -
- - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); }; diff --git a/src/lib/Behat/Component/ContentTypePicker.php b/src/lib/Behat/Component/ContentTypePicker.php index ba18733435..5811aae0da 100644 --- a/src/lib/Behat/Component/ContentTypePicker.php +++ b/src/lib/Behat/Component/ContentTypePicker.php @@ -73,7 +73,7 @@ protected function specifyLocators(): array new VisibleCSSLocator('filterInput', '.ibexa-content-menu-wrapper .ibexa-extra-actions__section-content--content-type .ibexa-instant-filter__input, .c-udw-tab .ibexa-extra-actions__section-content--content-type .ibexa-instant-filter__input'), new VisibleCSSLocator('contentTypeItem', '.ibexa-content-menu-wrapper .ibexa-extra-actions__section-content--content-type .ibexa-instant-filter__group-item:not([hidden]) .form-check-label, .c-udw-tab .ibexa-extra-actions__section-content--content-type .ibexa-instant-filter__group-item:not([hidden]) .form-check-label'), new VisibleCSSLocator('header', '.ibexa-content-menu-wrapper .ibexa-extra-actions--create .ibexa-extra-actions__header h2'), - new VisibleCSSLocator('languageDropdown', '.ibexa-content-menu-wrapper .ibexa-dropdown__selection-info'), + new VisibleCSSLocator('languageDropdown', '.ibexa-content-menu-wrapper .ibexa-dropdown__selection-info, .ibexa-content-menu-wrapper .ids-dropdown__selection-info'), new VisibleCSSLocator('createButton', '.c-content-create__confirm-button, [id="content_create_create"]'), ]; } diff --git a/src/lib/Behat/Component/CreateNewPopup.php b/src/lib/Behat/Component/CreateNewPopup.php index fcf26c7a29..ad6b19127a 100644 --- a/src/lib/Behat/Component/CreateNewPopup.php +++ b/src/lib/Behat/Component/CreateNewPopup.php @@ -79,9 +79,9 @@ protected function specifyLocators(): array new VisibleCSSLocator('cancelButton', '.ibexa-extra-actions__pre-form-btns .ibexa-btn--secondary'), new VisibleCSSLocator('popup', '.ibexa-extra-actions:not(.ibexa-extra-actions--hidden)'), new VisibleCSSLocator('formGroup', '.form-group'), - new VisibleCSSLocator('dropdown', '.ibexa-dropdown'), + new VisibleCSSLocator('dropdown', '.ibexa-dropdown, .ids-dropdown'), new VisibleCSSLocator('label', '.ibexa-label'), - new VisibleCSSLocator('dropdownValue', '.ibexa-dropdown__selection-info'), + new VisibleCSSLocator('dropdownValue', '.ibexa-dropdown__selection-info, .ids-dropdown__widget, .ids-dropdown__selection-info'), new VisibleCSSLocator('radioValue', '.ibexa-dc-extra-actions-applies-to__option'), new VisibleCSSLocator('radioLabel', '.ibexa-label--checkbox-radio'), ]; diff --git a/src/lib/Behat/Component/CreateUrlAliasModal.php b/src/lib/Behat/Component/CreateUrlAliasModal.php index d971af4e56..515cfad208 100644 --- a/src/lib/Behat/Component/CreateUrlAliasModal.php +++ b/src/lib/Behat/Component/CreateUrlAliasModal.php @@ -75,7 +75,7 @@ protected function specifyLocators(): array new VisibleCSSLocator('title', '#ibexa-modal--custom-url-alias .modal-title'), new VisibleCSSLocator('createButton', '#custom_url_add_add'), new VisibleCSSLocator('pathInput', '#custom_url_add_path'), - new VisibleCSSLocator('languageDropdown', '.ibexa-custom-url-from__item .ibexa-dropdown__selection-info'), + new VisibleCSSLocator('languageDropdown', '.ibexa-custom-url-from__item .ibexa-dropdown__selection-info, .ibexa-custom-url-from__item .ids-dropdown__selection-info'), new VisibleCSSLocator('redirectToggle', '.ibexa-custom-url-from__item .ibexa-toggle'), ]; } diff --git a/src/lib/Behat/Component/Fields/Country.php b/src/lib/Behat/Component/Fields/Country.php index cf5e99a26e..ad7d06ad10 100644 --- a/src/lib/Behat/Component/Fields/Country.php +++ b/src/lib/Behat/Component/Fields/Country.php @@ -37,7 +37,7 @@ public function specifyLocators(): array { return [ new VisibleCSSLocator('fieldInput', 'select'), - new VisibleCSSLocator('dropdownSelector', '.ibexa-dropdown__selection-info'), + new VisibleCSSLocator('dropdownSelector', '.ibexa-dropdown__selection-info, .ids-dropdown__selection-info'), ]; } } diff --git a/src/lib/Behat/Component/Fields/Selection.php b/src/lib/Behat/Component/Fields/Selection.php index 31cf32436b..111ccc52c2 100644 --- a/src/lib/Behat/Component/Fields/Selection.php +++ b/src/lib/Behat/Component/Fields/Selection.php @@ -43,9 +43,9 @@ public function getFieldTypeIdentifier(): string public function specifyLocators(): array { return [ - new VisibleCSSLocator('selectBar', '.ibexa-dropdown__selection-info'), - new VisibleCSSLocator('selectOption', '.ibexa-dropdown__item'), - new VisibleCSSLocator('specificOption', '.ibexa-dropdown__item:nth-child(%s)'), + new VisibleCSSLocator('selectBar', '.ibexa-dropdown__selection-info, .ids-dropdown__selection-info'), + new VisibleCSSLocator('selectOption', '.ibexa-dropdown__item, .ids-dropdown__item'), + new VisibleCSSLocator('specificOption', '.ibexa-dropdown__item:nth-child(%s), .ids-dropdown__item:nth-child(%s)'), ]; } } diff --git a/src/lib/Behat/Component/IbexaDropdown.php b/src/lib/Behat/Component/IbexaDropdown.php index c1fad443b2..3f90899b4b 100644 --- a/src/lib/Behat/Component/IbexaDropdown.php +++ b/src/lib/Behat/Component/IbexaDropdown.php @@ -10,7 +10,6 @@ use Ibexa\Behat\Browser\Component\Component; use Ibexa\Behat\Browser\Element\Condition\ElementExistsCondition; -use Ibexa\Behat\Browser\Element\Condition\ElementTransitionHasEndedCondition; use Ibexa\Behat\Browser\Element\Criterion\ElementTextCriterion; use Ibexa\Behat\Browser\Element\Criterion\ElementTextFragmentCriterion; use Ibexa\Behat\Browser\Locator\VisibleCSSLocator; @@ -21,15 +20,15 @@ public function verifyIsLoaded(): void { $this->getHTMLPage() ->setTimeout(5) - ->waitUntilCondition(new ElementTransitionHasEndedCondition($this->getHTMLPage(), $this->getLocator('isIbexaDropdownVisible'))); + ->waitUntilCondition(new ElementExistsCondition($this->getHTMLPage(), $this->getLocator('isIbexaDropdownVisible'))); } protected function specifyLocators(): array { return [ - new VisibleCSSLocator('ibexaDropdownExtended', '.ibexa-dropdown-popover .ibexa-dropdown__items .ibexa-dropdown__item'), - new VisibleCSSLocator('ibexaDropdownLabel', '.ibexa-dropdown__item-label'), - new VisibleCSSLocator('isIbexaDropdownVisible', '.ibexa-dropdown-popover'), + new VisibleCSSLocator('ibexaDropdownExtended', '.ibexa-dropdown-popover .ibexa-dropdown__items .ibexa-dropdown__item, .ids-dropdown__items-container .ids-dropdown__items .ids-dropdown__item'), + new VisibleCSSLocator('ibexaDropdownLabel', '.ibexa-dropdown__item-label, .ids-dropdown__item'), + new VisibleCSSLocator('isIbexaDropdownVisible', '.ibexa-dropdown-popover, .ids-dropdown__items-container'), ]; } diff --git a/src/lib/Behat/Component/TranslationDialog.php b/src/lib/Behat/Component/TranslationDialog.php index dd3111d6a3..d2dae9fcc7 100644 --- a/src/lib/Behat/Component/TranslationDialog.php +++ b/src/lib/Behat/Component/TranslationDialog.php @@ -44,8 +44,8 @@ public function verifyIsLoaded(): void protected function specifyLocators(): array { return array_merge(parent::specifyLocators(), [ - new VisibleCSSLocator('expandNewTranslationDropdown', '#add-translation-modal [for="add-translation_language"] + .ibexa-dropdown .ibexa-dropdown__selection-info'), - new VisibleCSSLocator('expandBaseTranslationDropdown', '#add-translation-modal [for="add-translation_base_language"] + .ibexa-dropdown .ibexa-dropdown__selection-info'), + new VisibleCSSLocator('expandNewTranslationDropdown', '#add-translation-modal [for="add-translation_language"] + .ibexa-dropdown .ibexa-dropdown__selection-info, #add-translation-modal [for="add-translation_language"] + .ids-dropdown .ids-dropdown__selection-info'), + new VisibleCSSLocator('expandBaseTranslationDropdown', '#add-translation-modal [for="add-translation_base_language"] + .ibexa-dropdown .ibexa-dropdown__selection-info, #add-translation-modal [for="add-translation_base_language"] + .ids-dropdown .ids-dropdown__selection-info'), new VisibleCSSLocator('addTranslationPopupModalTitle', '#add-translation-modal .modal-title'), ]); } diff --git a/src/lib/Behat/Component/TrashSearch.php b/src/lib/Behat/Component/TrashSearch.php index 9a5ed8204a..a196e950e3 100644 --- a/src/lib/Behat/Component/TrashSearch.php +++ b/src/lib/Behat/Component/TrashSearch.php @@ -77,7 +77,7 @@ protected function specifyLocators(): array new VisibleCSSLocator('creatorSearchBoxInput', '.ibexa-trash-search-form__item--creator .ibexa-input--text'), new VisibleCSSLocator('mainSearchBoxConfirmButton', '.ibexa-adaptive-filters__static-left .ibexa-input-text-wrapper--type-text .ibexa-input-text-wrapper__action-btn--search'), new VisibleCSSLocator('contentTypeFilterDropdown', 'label[for="trash_search_content_type"] ~ .ibexa-dropdown'), - new VisibleCSSLocator('sectionFilterDropdown', 'label[for="trash_search_section"] ~ .ibexa-dropdown'), + new VisibleCSSLocator('sectionFilterDropdown', 'label[for="trash_search_section"] ~ .ibexa-dropdown, label[for="trash_search_section"] ~ .ids-dropdown'), new VisibleCSSLocator('creatorFilterDropdown', '.ibexa-trash-search-form__user-list li'), ]; } diff --git a/src/lib/Behat/Page/ContentTypeUpdatePage.php b/src/lib/Behat/Page/ContentTypeUpdatePage.php index ec5e54673d..2549681424 100644 --- a/src/lib/Behat/Page/ContentTypeUpdatePage.php +++ b/src/lib/Behat/Page/ContentTypeUpdatePage.php @@ -33,34 +33,22 @@ public function fillFieldDefinitionFieldWithValue(string $fieldName, string $lab public function expandLastFieldDefinition(): void { - $fieldDefinitionLocator = new VisibleCSSLocator( - 'lastFieldDefinition', - 'div.ibexa-collapse__body-content div.ibexa-collapse--field-definition' - ); - - $this->getHTMLPage()->setTimeout(10)->waitUntil(function () use ($fieldDefinitionLocator): bool { - $fieldDefinition = $this->getHTMLPage()->findAll($fieldDefinitionLocator)->last(); - $fieldDefinition->click(); - $this->getHTMLPage()->setTimeout(3)->waitUntilCondition( - new ElementNotExistsCondition( - $fieldDefinition, - new VisibleCSSLocator('isCollapsed', 'button.collapsed') - ) - ); + $lastFieldDefinition = $this->getHTMLPage()->findAll($this->getLocator('fieldDefinition'))->last(); - return true; - }, 'Error expanding the last Field definition'); + if ($lastFieldDefinition->findAll($this->getLocator('openContainerInField'))->count() === 0) { + $lastFieldDefinition->find($this->getLocator('fieldDefinitionToggle'))->click(); - $lastFieldDefinition = $this->getHTMLPage()->findAll($fieldDefinitionLocator)->last(); - $this - ->getHTMLPage() - ->setTimeout(10) - ->waitUntilCondition( - new ElementTransitionHasEndedCondition( + $lastFieldDefinition->setTimeout(5)->waitUntilCondition( + new ElementNotExistsCondition( $lastFieldDefinition, - new VisibleCSSLocator('transition', 'div') + $this->getLocator('collapsedToggle') ) ); + } + + $this->getHTMLPage()->setTimeout(10)->waitUntilCondition( + new ElementTransitionHasEndedCondition($lastFieldDefinition, $this->getLocator('transition')) + ); } public function specifyLocators(): array @@ -72,11 +60,14 @@ public function specifyLocators(): array new VisibleCSSLocator('contentTypeCategoryList', ' div.ibexa-content-type-edit__add-field-definitions-group > ul > li:nth-child(n):not(.ibexa-popup-menu__item-action--disabled)'), new VisibleCSSLocator('availableFieldLabelList', '.ibexa-available-field-types__list > li:not(.ibexa-available-field-type--hidden)'), new VisibleCSSLocator('workspace', '.ibexa-collapse__body-content'), - new VisibleCSSLocator('fieldDefinitionToggle', '.ibexa-collapse:nth-last-child(2) > div.ibexa-collapse__header > button:last-child:not([data-bs-target="#content_collapse"])'), + new VisibleCSSLocator('fieldDefinitionToggle', '.ibexa-collapse__header > button:last-child'), new VisibleCSSLocator('selectLaunchEditorMode', '.form-check .ibexa-input--radio'), new VisibleCSSLocator('fieldDefinitionOpenContainer', '[data-collapsed="false"] .ibexa-content-type-edit__field-definition-content'), new VisibleCSSLocator('selectBlocksDropdown', '.ibexa-page-select-items__toggler'), new VisibleCSSLocator('fieldDefinitionSearch', '.ibexa-available-field-types__sidebar-filter'), + new VisibleCSSLocator('transition', 'div'), + new VisibleCSSLocator('openContainerInField', '.ibexa-content-type-edit__field-definition-content'), + new VisibleCSSLocator('collapsedToggle', '.ibexa-collapse__header > button[aria-expanded="false"]'), ]); } diff --git a/src/lib/Behat/Page/ContentViewPage.php b/src/lib/Behat/Page/ContentViewPage.php index 67e50a00ad..84eff23200 100644 --- a/src/lib/Behat/Page/ContentViewPage.php +++ b/src/lib/Behat/Page/ContentViewPage.php @@ -290,7 +290,7 @@ protected function specifyLocators(): array new VisibleCSSLocator('bookmarkButton', '.ibexa-add-to-bookmarks'), new VisibleCSSLocator('isBookmarked', '.ibexa-add-to-bookmarks--checked'), new VisibleCSSLocator('addTranslationButton', '#ibexa-tab-location-view-translations .ibexa-table-header__actions .ibexa-btn--add-translation, [data-bs-target="#add-translation-modal"]'), - new VisibleCSSLocator('ibexaDropdownPreview', '.ibexa-raw-content-title__language-form .ibexa-dropdown__selection-info'), + new VisibleCSSLocator('ibexaDropdownPreview', '.ibexa-raw-content-title__language-form .ibexa-dropdown__selection-info, .ibexa-raw-content-title__language-form .ids-dropdown__selection-info'), new VisibleCSSLocator('moreTab', '.ibexa-tabs__tab--more'), new VisibleCSSLocator('popupMenuItem', '.ibexa-popup-menu__item .ibexa-popup-menu__item-content'), new VisibleCSSLocator('addUrlAliasButton', '#ibexa-tab-location-view-urls [data-bs-target="#ibexa-modal--custom-url-alias"]'), diff --git a/src/lib/Behat/Page/RoleUpdatePage.php b/src/lib/Behat/Page/RoleUpdatePage.php index 48941f2352..33bfee639c 100644 --- a/src/lib/Behat/Page/RoleUpdatePage.php +++ b/src/lib/Behat/Page/RoleUpdatePage.php @@ -82,12 +82,12 @@ public function specifyLocators(): array parent::specifyLocators(), [ new VisibleCSSLocator('limitationField', '.ibexa-update-policy__action-wrapper'), - new VisibleCSSLocator('limitationDropdown', '.ibexa-dropdown__selection-info'), - new VisibleCSSLocator('limitationDropdownOption', '.ibexa-dropdown-popover .ibexa-dropdown__items .ibexa-dropdown__item'), - new VisibleCSSLocator('limitationDropdownOptionRemove', '.ibexa-dropdown__remove-selection'), + new VisibleCSSLocator('limitationDropdown', '.ibexa-dropdown__selection-info, .ids-dropdown__selection-info'), + new VisibleCSSLocator('limitationDropdownOption', '.ibexa-dropdown-popover .ibexa-dropdown__items .ibexa-dropdown__item, .ids-dropdown__items-container .ids-dropdown__items .ids-dropdown__item'), + new VisibleCSSLocator('limitationDropdownOptionRemove', '.ibexa-dropdown__remove-selection, .ids-chip__delete'), new VisibleCSSLocator('labelSelector', '.ibexa-label'), new VisibleCSSLocator('policyAssignmentSelect', '#role_assignment_create_limitation_type_section'), - new VisibleCSSLocator('ibexaDropdownSelectionInfo', 'div.ibexa-dropdown__wrapper > ul.ibexa-dropdown__selection-info'), + new VisibleCSSLocator('ibexaDropdownSelectionInfo', 'div.ibexa-dropdown__wrapper > ul.ibexa-dropdown__selection-info, div.ids-dropdown__widget > .ids-dropdown__selection-info'), new VisibleCSSLocator('newPolicySelectList', '#policy_create_policy'), ] ); diff --git a/src/lib/Behat/Page/UserSettingsPage.php b/src/lib/Behat/Page/UserSettingsPage.php index 8f62180b78..d18d62f7c2 100644 --- a/src/lib/Behat/Page/UserSettingsPage.php +++ b/src/lib/Behat/Page/UserSettingsPage.php @@ -55,9 +55,9 @@ protected function specifyLocators(): array return [ new VisibleCSSLocator('button', '.ibexa-btn'), new VisibleCSSLocator('title', '.ibexa-edit-header__title,.ibexa-page-title__content'), - new VisibleCSSLocator('autosaveDraftValueDropdown', '#user_setting_update_autosave div.ibexa-dropdown__wrapper > ul'), + new VisibleCSSLocator('autosaveDraftValueDropdown', '#user_setting_update_autosave div.ibexa-dropdown__wrapper > ul, #user_setting_update_autosave div.ids-dropdown__widget > .ids-dropdown__selection-info'), new VisibleCSSLocator('autosaveIntervalEdit', '#user_setting_update_autosave_interval_value'), - new VisibleCSSLocator('helpCenterValueDropdown', '#user_setting_update_help_center div.ibexa-dropdown__wrapper > ul'), + new VisibleCSSLocator('helpCenterValueDropdown', '#user_setting_update_help_center div.ibexa-dropdown__wrapper > ul, #user_setting_update_help_center div.ids-dropdown__widget > .ids-dropdown__selection-info'), ]; }