diff --git a/src/bundle/Resources/public/scss/_tag-view-select.scss b/src/bundle/Resources/public/scss/_tag-view-select.scss index 5fc838a7f5..a3ff5ca12a 100644 --- a/src/bundle/Resources/public/scss/_tag-view-select.scss +++ b/src/bundle/Resources/public/scss/_tag-view-select.scss @@ -107,6 +107,20 @@ margin-top: calculateRem(24px); } + &.is-invalid { + @include input-invalid(); + + #{$self} { + &__info { + color: $ibexa-color-danger-600; + } + + &__btn-select-path { + background-color: $ibexa-color-white; + } + } + } + &:disabled, &[disabled] { @include colorful-tags($ibexa-color-dark-400, $ibexa-color-light-300); diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig index 6ed7168765..9aef9b67ef 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig @@ -17,6 +17,7 @@ {% set is_dynamic = is_dynamic|default(false) %} {% set is_disabled = is_disabled|default(false) or attr.readonly|default(false) %} {% set is_selector = is_selector|default(false) %} +{% set is_invalid = is_invalid|default(false) %} {% set has_select_all_toggler = has_select_all_toggler|default(false) %} {% set item_icon = item_icon|default() %} {% set item_icon_class = item_icon_class|default('') %} @@ -36,6 +37,7 @@ ~ (is_ghost|default(false) ? 'ibexa-dropdown--ghost ') ~ (is_selector ? 'ibexa-dropdown--selector ') ~ (no_items and not is_dynamic or is_disabled ? 'ibexa-dropdown--disabled ') + ~ (is_invalid ? 'is-invalid ') ~ class|default('') ~ ' ' ~ attr.class|default('') ~ ' ')|trim, hidden: attr.hidden|default(is_hidden|default(false) ? 'hidden' : false) diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig index 57a5e8f3d5..98ebc7b4fa 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig @@ -7,17 +7,23 @@ {% set separator = separator|default(',') %} {% set values = form.vars.value|split(separator)|filter(value => value is not empty) %} {% set has_value = values|length > 0 %} +{% set has_errors = form.vars.errors|length > 0 %} {% set can_be_empty = can_be_empty is defined ? can_be_empty : false %} {% set is_single_select = is_single_select is defined ? is_single_select : false %} {% set is_delete_visible = can_be_empty or values|length != 1 %} {% set default_title = 'tag_view_select.info'|trans|desc('Select location') %} {% set is_disabled = attr.disabled is defined ? attr.disabled : false %} +{% set is_invalid = is_invalid|default(has_errors) %} {% set default_type = 'tag_view_select.default_type'|trans|desc('path') %} {% set type = type|default(default_type) %} {% set show_title = show_title ?? true %} +{% set class = 'ibexa-tag-view-select ' + ~ (is_invalid ? 'is-invalid ') + ~ class|default('') %} +
0 %} {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with { source: source, @@ -25,6 +26,7 @@ is_ghost: attr.is_ghost|default(false), is_selector: attr.is_selector|default(false), is_dynamic: attr.is_dynamic|default(false), + is_invalid: attr.is_invalid|default(has_errors), has_select_all_toggler: attr.has_select_all_toggler|default(false), placeholder: attr.placeholder|default(placeholder), selected_item_template_path: selected_item_template_path|default(null),