From 4833bc84fb6257fc6440ef14d344037636422bad Mon Sep 17 00:00:00 2001
From: "chrysanthe(chgo)" <chgo@odoo.com>
Date: Fri, 21 Apr 2023 08:10:58 +0000
Subject: [PATCH] [IMP] web: improve property fields modal design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The purpose of this commit is to improve the design of the Property field
modal as it was done to release something fast.

We also introduce a modification of the JS test related to the property
header. Before this commit, the structure of the modal was composed
of a header and a body.

Since we refactored the component in one single block with the class
`.o_modal_container`, we apply the `.o_field_property_definition_header`
class directly on the input rather than targeting an input inside the
header.

task-3084756

closes odoo/odoo#126274

X-original-commit: 12a25449d9f26aec5f14482952ca0db40bf612b9
Related: odoo/enterprise#43091
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
---
 addons/web/i18n/web.pot                       |  14 +
 .../fields/properties/properties_field.scss   |   1 -
 .../fields/properties/properties_field.xml    |   2 +-
 .../properties/property_definition.scss       |  31 +--
 .../fields/properties/property_definition.xml | 257 ++++++++----------
 .../property_definition_selection.scss        |   9 +-
 .../property_definition_selection.xml         |  14 +-
 .../views/fields/properties/property_tags.xml |   4 +-
 .../fields/properties/property_value.scss     |   4 -
 .../fields/properties/property_value.xml      |   2 +-
 .../views/fields/properties_field_tests.js    |  10 +-
 11 files changed, 151 insertions(+), 197 deletions(-)

diff --git a/addons/web/i18n/web.pot b/addons/web/i18n/web.pot
index c590e1880f8..9e4468e77bc 100644
--- a/addons/web/i18n/web.pot
+++ b/addons/web/i18n/web.pot
@@ -3196,6 +3196,20 @@ msgstr ""
 msgid "More"
 msgstr ""
 
+#. module: web
+#. odoo-javascript
+#: code:addons/web/static/src/views/fields/properties/property_definition.xml:0
+#, python-format
+msgid "Move this Property down"
+msgstr ""
+
+#. module: web
+#. odoo-javascript
+#: code:addons/web/static/src/views/fields/properties/property_definition.xml:0
+#, python-format
+msgid "Move this Property up"
+msgstr ""
+
 #. module: web
 #. odoo-javascript
 #: code:addons/web/static/src/views/fields/statusbar/statusbar_field.js:0
diff --git a/addons/web/static/src/views/fields/properties/properties_field.scss b/addons/web/static/src/views/fields/properties/properties_field.scss
index bbd9efa22f6..239f1193550 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.scss
+++ b/addons/web/static/src/views/fields/properties/properties_field.scss
@@ -87,7 +87,6 @@
     // put the popover behind datetime component
     z-index: $zindex-popover !important;
     font-size: inherit;
-    box-shadow: 0 3rem 5rem rgba($black, .18) !important;
     box-sizing: border-box;
 }
 
diff --git a/addons/web/static/src/views/fields/properties/properties_field.xml b/addons/web/static/src/views/fields/properties/properties_field.xml
index c5462d32fc4..75875631e38 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.xml
+++ b/addons/web/static/src/views/fields/properties/properties_field.xml
@@ -9,7 +9,7 @@
                         t-foreach="propertiesListGroup"
                         t-as="propertyConfiguration"
                         t-key="propertyConfiguration.name"
-                        class="o_property_field d-sm-contents mb-3"
+                        class="o_property_field d-contents mb-2"
                         t-att-property-name="propertyConfiguration.name">
                         <t t-set="domId" t-value="generateUniqueDomID()"/>
                         <label
diff --git a/addons/web/static/src/views/fields/properties/property_definition.scss b/addons/web/static/src/views/fields/properties/property_definition.scss
index beb6706ba44..bef357b1860 100644
--- a/addons/web/static/src/views/fields/properties/property_definition.scss
+++ b/addons/web/static/src/views/fields/properties/property_definition.scss
@@ -1,26 +1,10 @@
-.o_field_property_definition_delete {
-    min-width: fit-content;
-}
-
 .o_field_property_definition {
     max-height: 70vh;
     overflow-y: auto;
 
-    table {
-        width: 500px;
-    }
-
-    .o_td_label {
-        width: 120px;
-    }
-
-    .o_field_property_definition_header {
-        max-width: 500px;
-
-        input {
-            font-size: 1.2rem;
-            border-width: 1px;
-        }
+    .o_modal_container {
+        min-width: calc(#{$o-form-view-sheet-max-width} / 3);
+        max-width: calc(#{$o-form-view-sheet-max-width} / 2);
     }
 
     .o_field_property_definition_type {
@@ -29,10 +13,6 @@
             height: 20px;
         }
 
-        .o_field_property_dropdown > img {
-            margin-right: -18px;
-        }
-
         .o_input_dropdown {
             input {
                 background-repeat: no-repeat;
@@ -45,13 +25,10 @@
         }
     }
 
-    td {
-        padding-bottom: 15px;
-    }
     .o_field_property_definition_kanban,
     .o_field_property_definition_value {
         .form-check-input {
-            margin-left: 3px;
+            margin-left: map-get($spacers, 1);
         }
     }
 
diff --git a/addons/web/static/src/views/fields/properties/property_definition.xml b/addons/web/static/src/views/fields/properties/property_definition.xml
index 9df0d5079db..6e76222e914 100644
--- a/addons/web/static/src/views/fields/properties/property_definition.xml
+++ b/addons/web/static/src/views/fields/properties/property_definition.xml
@@ -1,50 +1,52 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="web.PropertyDefinition" owl="1">
-        <div class="o_field_property_definition o_field_widget d-block" t-ref="propertyDefinition">
-            <div class="o_field_property_definition_header d-flex flex-row align-items-center justify-content-between m-3">
-                <h6 t-if="props.readonly" t-out="state.propertyDefinition.string" class="text-truncate"/>
-                <input
-                    t-else=""
-                    class="o_input px-2 me-3"
-                    type="text"
-                    required=""
-                    placeholder="Property Name"
-                    t-model="state.propertyDefinition.string"
-                    t-on-change="onPropertyLabelChange"
-                    t-on-keypress="onPropertyLabelKeypress"
-                />
-                <div class="d-flex flex-row me-3">
+        <div class="o_field_property_definition o_field_widget o_form_view d-block" t-ref="propertyDefinition">
+            <div class="d-flex justify-content-between px-3 border-bottom">
+                <div class="border-end py-1">
                     <button
-                        t-attf-class="btn btn-link p-0 m-0 me-2 {{this.isFirst ? 'disabled' : ''}}"
-                        t-on-click="() => this.onPropertyMove('up')">
-                        <i class="oi oi-chevron-up"/>
+                        t-attf-class="btn btn-link ps-0 {{this.isFirst ? 'disabled' : ''}}"
+                        t-on-click="() => this.onPropertyMove('up')" title="Move this Property up">
+                        <i class="oi oi-chevron-up ms-2"/>
                     </button>
                     <button
-                        t-attf-class="btn btn-link p-0 m-0 {{this.isLast ? 'disabled' : ''}}"
-                        t-on-click="() => this.onPropertyMove('down')">
-                        <i class="oi oi-chevron-down"/>
-                    </button>
-                    <button
-                        t-if="!props.readonly and props.canChangeDefinition"
-                        class="btn text-danger p-0 float-end o_field_property_definition_delete ms-3"
-                        title="Remove Property"
-                        t-on-click="props.onDelete">
-                        <i class="fa fa-trash"/> Delete
+                        t-attf-class="btn btn-link pe-3 {{this.isLast ? 'disabled' : ''}}"
+                        t-on-click="() => this.onPropertyMove('down')" title="Move this Property down">
+                        <i class="oi oi-chevron-down ms-2"/>
                     </button>
                 </div>
+                <button
+                    t-if="!props.readonly and props.canChangeDefinition"
+                    class="btn pe-0 text-danger float-end o_field_property_definition_delete"
+                    title="Remove Property"
+                    t-on-click="props.onDelete">
+                    <i class="fa fa-trash"/> Delete
+                </button>
             </div>
-            <table class="m-3">
-                <tr>
-                    <td class="align-top pe-2">
-                        <label t-att-for="getUniqueDomID('type')">
-                            <b>Field Type</b>
-                        </label>
-                    </td>
-                    <td class="o_field_property_definition_type">
+            <div class="o_modal_container p-3 o_inner_group grid">
+                <div class="d-contents mb-3 mb-sm-0">
+                    <label class="o_form_label align-self-center text-900">Label</label>
+                    <h6 t-if="props.readonly" t-out="state.propertyDefinition.string"
+                        class="text-truncate"/>
+                    <input
+                        class="o_input o_field_property_definition_header"
+                        type="text"
+                        required=""
+                        placeholder="Property Name"
+                        t-model="state.propertyDefinition.string"
+                        t-on-change="onPropertyLabelChange"
+                        t-on-keypress="onPropertyLabelKeypress"
+                    />
+                </div>
+                <div class="d-contents mb-3 mb-sm-0">
+                    <label t-att-for="getUniqueDomID('type')"
+                        class="o_form_label align-self-center text-900">
+                        Field Type
+                    </label>
+                    <div class="o_field_property_definition_type">
                         <div
                             t-if="props.readonly"
-                            class="d-flex align-items-center">
+                            class="d-flex align-items-center mb-2">
                             <img class="me-3"
                                 t-attf-src="/web/static/src/views/fields/properties/icons/{{state.propertyDefinition.type}}.png"/>
                             <span t-out="state.typeLabel"/>
@@ -54,8 +56,9 @@
                             title="state.typeLabel" togglerClass="'btn btn-link d-flex p-0 w-100'">
                             <t t-set-slot="toggler">
                                 <div class="o_input_dropdown w-100 o_field_property_dropdown">
-                                    <img t-attf-src="/web/static/src/views/fields/properties/icons/{{state.propertyDefinition.type}}.png"/>
-                                    <input type="text" class="dropdown text-start w-100 o_input py-1"
+                                    <img t-attf-src="/web/static/src/views/fields/properties/icons/{{state.propertyDefinition.type}}.png"
+                                        class="position-relative z-index-1 me-n4"/>
+                                    <input type="text" class="dropdown text-start w-100 o_input py-1 align-middle"
                                         t-att-id="getUniqueDomID('type')"
                                         t-att-value="state.typeLabel" readonly=""/>
                                     <span class="o_dropdown_button" />
@@ -71,66 +74,48 @@
                                 </DropdownItem>
                             </t>
                         </Dropdown>
-                    </td>
-                </tr>
+                    </div>
+                </div>
                 <!-- Add / remove selection labels -->
-                <tr t-if="state.propertyDefinition.type === 'selection'">
-                    <td class="o_td_label align-top pe-2">
-                        <b>Values</b>
-                    </td>
-                    <td>
-                        <PropertyDefinitionSelection
-                            readonly="props.readonly || !props.canChangeDefinition"
-                            canChangeDefinition="props.canChangeDefinition"
-                            default="state.propertyDefinition.default || ''"
-                            options="state.propertyDefinition.selection || []"
-                            onOptionsChange.bind="onSelectionOptionChange"
-                            onDefaultOptionChange.bind="onDefaultChange"
-                        />
-                    </td>
-                </tr>
-                <tr t-if="state.propertyDefinition.type === 'tags'">
-                    <td class="o_td_label align-top">
-                        <label t-att-for="getUniqueDomID('tags')">
-                            <b>Tags</b>
-                        </label>
-                    </td>
-                    <td>
-                        <PropertyTags
-                            id="getUniqueDomID('tags')"
-                            selectedTags="propertyTagValues"
-                            tags="state.propertyDefinition.tags || []"
-                            readonly="props.readonly"
-                            canChangeTags="props.canChangeDefinition"
-                            checkDefinitionWriteAccess.bind="props.checkDefinitionWriteAccess ? props.checkDefinitionWriteAccess : () => {}"
-                            deleteAction="'tags'"
-                            onTagsChange.bind="onTagsChange"/>
-                    </td>
-                </tr>
-                <tr t-if="state.propertyDefinition.type === 'many2one' || state.propertyDefinition.type === 'many2many'" class="o_field_property_definition_model">
-                    <td class="o_td_label align-top pe-2">
-                        <label t-att-for="getUniqueDomID('model')">
-                            <b>Model</b>
-                        </label>
-                    </td>
-                    <td>
-                        <span t-if="props.readonly">
-                            <t t-if="state.resModelDescription" t-out="state.resModelDescription"/>
-                        </span>
-                        <ModelSelector
-                            t-else=""
-                            id="getUniqueDomID('model')"
-                            value="state.resModelDescription"
-                            onModelSelected.bind="onModelChange"
-                        />
-                    </td>
-                </tr>
-                <tr t-if="(state.propertyDefinition.type === 'many2one' || state.propertyDefinition.type === 'many2many')
-                    and state.propertyDefinition.comodel and state.propertyDefinition.comodel.length">
-                    <td class="o_td_label align-top pe-2">
-                        <b>Domain</b>
-                    </td>
-                    <td>
+                <div t-if="state.propertyDefinition.type === 'selection'" class="d-contents mb-3 mb-sm-0">
+                    <label class="o_form_label text-900">Values</label>
+                    <PropertyDefinitionSelection
+                        readonly="props.readonly || !props.canChangeDefinition"
+                        canChangeDefinition="props.canChangeDefinition"
+                        default="state.propertyDefinition.default || ''"
+                        options="state.propertyDefinition.selection || []"
+                        onOptionsChange.bind="onSelectionOptionChange"
+                        onDefaultOptionChange.bind="onDefaultChange"
+                    />
+                </div>
+                <div t-if="state.propertyDefinition.type === 'tags'" class="d-contents mb-3 mb-sm-0">
+                    <label t-att-for="getUniqueDomID('tags')" class="o_form_label text-900">Tag</label>
+                    <PropertyTags
+                        id="getUniqueDomID('tags')"
+                        selectedTags="propertyTagValues"
+                        tags="state.propertyDefinition.tags || []"
+                        readonly="props.readonly"
+                        canChangeTags="props.canChangeDefinition"
+                        checkDefinitionWriteAccess.bind="props.checkDefinitionWriteAccess ? props.checkDefinitionWriteAccess : () => {}"
+                        deleteAction="'tags'"
+                        onTagsChange.bind="onTagsChange"/>
+                </div>
+                <div t-if="state.propertyDefinition.type === 'many2one' || state.propertyDefinition.type === 'many2many'" class="o_field_property_definition_model d-contents mb-3 mb-sm-0">
+                    <label t-att-for="getUniqueDomID('model')" class="o_form_label align-self-center text-900">Model</label>
+                    <span t-if="props.readonly">
+                        <t t-if="state.resModelDescription" t-out="state.resModelDescription"/>
+                    </span>
+                    <ModelSelector
+                        t-else=""
+                        id="getUniqueDomID('model')"
+                        value="state.resModelDescription"
+                        onModelSelected.bind="onModelChange"
+                    />
+                </div>
+                <div t-if="(state.propertyDefinition.type === 'many2one' || state.propertyDefinition.type === 'many2many')
+                    and state.propertyDefinition.comodel and state.propertyDefinition.comodel.length" class="d-contents mb-3 mb-sm-0">
+                    <label class="o_form_label text-900">Domain</label>
+                    <div>
                         <DomainSelector
                             resModel="state.propertyDefinition.comodel"
                             domain="state.propertyDefinition.domain || '[]'"
@@ -146,53 +131,41 @@
                                 <t t-out="state.matchingRecordsCount"/> record(s)
                             </button>
                         </div>
-                    </td>
-                </tr>
-                <tr t-if="!['tags', 'selection'].includes(state.propertyDefinition.type)
+                    </div>
+                </div>
+                <div t-if="!['tags', 'selection'].includes(state.propertyDefinition.type)
                     and (!['many2one', 'many2many'].includes(state.propertyDefinition.type)
                     || (state.propertyDefinition.comodel and state.propertyDefinition.comodel.length))"
-                    class="o_field_property_definition_value">
-                    <td class="o_td_label align-top pe-2">
-                        <label t-att-for="getUniqueDomID('default')">
-                            <b t-if="state.propertyDefinition.type === 'boolean'">
-                                Default State
-                            </b>
-                            <b t-else="">
-                                Default Value
-                            </b>
-                        </label>
-                    </td>
-                    <td>
-                        <PropertyValue
-                            id="getUniqueDomID('default')"
-                            readonly="props.readonly"
-                            canChangeDefinition="props.canChangeDefinition"
-                            type="state.propertyDefinition.type"
-                            string="state.propertyDefinition.string"
-                            value="state.propertyDefinition.default"
-                            comodel="state.propertyDefinition.comodel || ''"
-                            domain="state.propertyDefinition.domain || '[]'"
-                            context="props.context"
-                            onChange.bind="onDefaultChange"
-                        />
-                    </td>
-                </tr>
-                <tr t-if="!props.hideKanbanOption" class="o_field_property_definition_kanban">
-                    <td class="o_td_label align-top pe-2">
-                        <label t-att-for="getUniqueDomID('kanban')">
-                            <b>View In Kanban</b>
-                        </label>
-                    </td>
-                    <td>
-                        <CheckBox
-                            id="getUniqueDomID('kanban')"
-                            value="props.propertyDefinition.view_in_kanban"
-                            disabled="props.readonly"
-                            onChange.bind="onViewInKanbanChange"
-                        />
-                    </td>
-                </tr>
-            </table>
+                    class="o_field_property_definition_value d-contents mb-3 mb-sm-0">
+                    <label t-att-for="getUniqueDomID('default')" class="o_form_label align-self-center text-900">
+                        <b>
+                            <t t-if="state.propertyDefinition.type === 'boolean'">Default State</t>
+                            <t t-else="">Default Value</t>
+                         </b>
+                    </label>
+                    <PropertyValue
+                        id="getUniqueDomID('default')"
+                        readonly="props.readonly"
+                        canChangeDefinition="props.canChangeDefinition"
+                        type="state.propertyDefinition.type"
+                        string="state.propertyDefinition.string"
+                        value="state.propertyDefinition.default"
+                        comodel="state.propertyDefinition.comodel || ''"
+                        domain="state.propertyDefinition.domain || '[]'"
+                        context="props.context"
+                        onChange.bind="onDefaultChange"
+                    />
+                </div>
+                <div t-if="!props.hideKanbanOption" class="o_field_property_definition_kanban d-contents mb-3 mb-sm-0">
+                    <label t-att-for="getUniqueDomID('kanban')" class="o_form_label align-self-center text-900">View In Kanban</label>
+                    <CheckBox
+                        id="getUniqueDomID('kanban')"
+                        value="props.propertyDefinition.view_in_kanban"
+                        disabled="props.readonly"
+                        onChange.bind="onViewInKanbanChange"
+                    />
+                </div>
+            </div>
         </div>
     </t>
 </templates>
diff --git a/addons/web/static/src/views/fields/properties/property_definition_selection.scss b/addons/web/static/src/views/fields/properties/property_definition_selection.scss
index 7bfdbea18f4..f6a7b848f87 100644
--- a/addons/web/static/src/views/fields/properties/property_definition_selection.scss
+++ b/addons/web/static/src/views/fields/properties/property_definition_selection.scss
@@ -1,10 +1,5 @@
 .o_field_property_selection {
-    input {
-        border: 0;
-        background: transparent;
-    }
-    .fa-star,
-    .fa-star-o {
-        color: gold;
+    .fa-star {
+        color: $o-main-favorite-color;
     }
 }
diff --git a/addons/web/static/src/views/fields/properties/property_definition_selection.xml b/addons/web/static/src/views/fields/properties/property_definition_selection.xml
index 1c52bddecab..21eb781625f 100644
--- a/addons/web/static/src/views/fields/properties/property_definition_selection.xml
+++ b/addons/web/static/src/views/fields/properties/property_definition_selection.xml
@@ -1,16 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="web.PropertyDefinitionSelection" owl="1">
-        <div class="d-flex flex-column o_field_property_selection"
+        <div class="o_field_property_selection d-flex"
             t-ref="propertyDefinitionSelection">
             <div class="w-100">
                 <div
                     t-foreach="optionsVisible" t-as="option" t-key="option[0]"
-                    class="w-100 card d-flex flex-row align-items-center justify-content-between my-2 px-3 rounded o_field_property_selection_option">
+                    class="o_field_property_selection_option d-flex flex-row align-items-center justify-content-between mb-2 rounded">
                     <span t-if="props.readonly" t-out="option[1]"/>
                     <input
                         t-else=""
-                        class="o_input"
+                        class="o_input me-3"
                         type="text"
                         placeholder="Option Name"
                         t-att-value="option[1]"
@@ -19,17 +19,17 @@
                         t-on-keydown="(event) => this.onOptionKeyDown(event, option_index)"
                     />
                     <button
-                        class="btn btn-link text-secondary p-0 m-0"
+                        class="btn btn-link m-0 p-0 text-muted fs-5"
                         title="Select Default"
                         t-on-click="() => this.onOptionSetDefault(option_index)">
-                        <i t-att-class="option[0] === props.default ? 'fa fa-star' : 'fa fa-star-o'"/>
+                        <i t-att-class="option[0] === props.default ? 'fa fa-star align-bottom' : 'fa fa-star-o align-bottom'"/>
                     </button>
                     <button
                         t-if="!props.readonly"
-                        class="btn btn-link p-0 m-0 ms-2"
+                        class="btn btn-link link-danger ms-2 p-0 fs-5"
                         title="Remove Property"
                         t-on-click="() => this.onOptionDelete(option_index)">
-                        <i class="text-danger fa fa-times"/>
+                        <i class="fa fa-trash-o align-bottom"/>
                     </button>
                 </div>
                 <button
diff --git a/addons/web/static/src/views/fields/properties/property_tags.xml b/addons/web/static/src/views/fields/properties/property_tags.xml
index 8488cd7707d..12ddc1432df 100644
--- a/addons/web/static/src/views/fields/properties/property_tags.xml
+++ b/addons/web/static/src/views/fields/properties/property_tags.xml
@@ -2,14 +2,14 @@
 <templates xml:space="preserve">
     <t t-name="web.PropertyTags" owl="1">
         <!-- Copy many2many tags style without duplicating all the CSS -->
-        <div t-attf-class="o_field_property_tag o_field_widget o_field_many2many_tags d-flex align-items-center {{props.readonly ? 'readonly' : ''}}">
+        <div t-attf-class="o_field_property_tag o_field_widget o_field_many2many_tags d-flex {{props.readonly ? 'readonly' : ''}}">
             <TagsList
                 tags="tagListItems"
                 displayBadge="displayBadge"
                 className="props.canChangeTags ? '' : 'o_field_property_tag_readonly'"/>
             <div
                 t-if="!props.readonly"
-                class="o_field_property_dropdown_menu o_input_dropdown mt-2">
+                class="o_field_property_dropdown_menu o_input_dropdown">
                 <AutoComplete
                     id="props.id"
                     value="''"
diff --git a/addons/web/static/src/views/fields/properties/property_value.scss b/addons/web/static/src/views/fields/properties/property_value.scss
index 7fa33a09efe..cd0defbe7ee 100644
--- a/addons/web/static/src/views/fields/properties/property_value.scss
+++ b/addons/web/static/src/views/fields/properties/property_value.scss
@@ -27,10 +27,6 @@ input.o_field_property_input[type=number] {
 }
 
 .o_field_property_many2many_value {
-    .o_tag {
-        color: nth($o-colors, 1) !important;
-        box-shadow: inset 0 0 0 1px !important;
-    }
     .o_delete {
         line-height: 1;
         margin-right: 5px;
diff --git a/addons/web/static/src/views/fields/properties/property_value.xml b/addons/web/static/src/views/fields/properties/property_value.xml
index 9fb554dc438..bef374f55f7 100644
--- a/addons/web/static/src/views/fields/properties/property_value.xml
+++ b/addons/web/static/src/views/fields/properties/property_value.xml
@@ -113,7 +113,7 @@
                 </t>
             </div>
             <t t-elif="props.type === 'many2many'">
-                <div t-if="props.comodel" class="o_field_property_many2many_value d-flex flex-row ms-0 pe-1 w-100 flex-wrap"
+                <div t-if="props.comodel" class="o_field_property_many2many_value d-flex flex-wrap flex-row gap-1 ms-0 pe-1 w-100 "
                     t-attf-class="o_field_widget o_field_many2many_tags {{showAvatar ? 'avatar' : ''}} {{props.readonly ? 'readonly' : ''}}">
                     <!-- Copy many2many tags style without duplicating all CSS -->
                     <TagsList tags="propertyValue"/>
diff --git a/addons/web/static/tests/views/fields/properties_field_tests.js b/addons/web/static/tests/views/fields/properties_field_tests.js
index 3fe0dcffd9a..e3a1f354200 100644
--- a/addons/web/static/tests/views/fields/properties_field_tests.js
+++ b/addons/web/static/tests/views/fields/properties_field_tests.js
@@ -325,14 +325,14 @@ QUnit.module("Fields", (hooks) => {
         const popover = target.querySelector(".o_property_field_popover");
         assert.ok(popover, "Should have opened the definition popover");
 
-        const label = popover.querySelector(".o_field_property_definition_header input");
+        const label = popover.querySelector(".o_field_property_definition_header");
         assert.strictEqual(label.value, "My Char");
 
         const type = popover.querySelector(".o_field_property_definition_type input");
         assert.strictEqual(type.value, "Text");
 
         // Change the property type to "Date & Time"
-        await editInput(target, ".o_field_property_definition_header input", "My Datetime");
+        await editInput(target, ".o_field_property_definition_header", "My Datetime");
         await changeType(target, "datetime");
         assert.strictEqual(type.value, "Date & Time", "Should have changed the property type");
 
@@ -353,7 +353,7 @@ QUnit.module("Fields", (hooks) => {
         await closePopover(target);
 
         // Check that the type change have been propagated
-        const datetimeLabel = field.querySelector(".o_field_property_label b");
+        const datetimeLabel = field.querySelector(".o_field_property_label");
         assert.strictEqual(
             datetimeLabel.innerText,
             "My Datetime",
@@ -419,7 +419,7 @@ QUnit.module("Fields", (hooks) => {
         const popover = target.querySelector(".o_property_field_popover");
         assert.ok(popover, "Should have opened the definition popover");
 
-        const label = popover.querySelector(".o_field_property_definition_header input");
+        const label = popover.querySelector(".o_field_property_definition_header");
         assert.strictEqual(label.value, "Property 3", "Should have added a default label");
 
         const type = popover.querySelector(".o_field_property_definition_type input");
@@ -562,7 +562,7 @@ QUnit.module("Fields", (hooks) => {
         assert.strictEqual(options.length, 4, "Should not remove any options");
 
         // Remove the second option
-        await click(target, ".o_field_property_selection_option:nth-child(2) .fa-times");
+        await click(target, ".o_field_property_selection_option:nth-child(2) .fa-trash-o");
         options = popover.querySelectorAll(".o_field_property_selection_option");
         assert.strictEqual(options.length, 3, "Should have removed the second option");
         const optionValues = [...options].map((option) => option.querySelector("input").value);