[REF] *: BS4, adapt dropdowns and carets

- The dropdown structure was simplified, allowing to get rid of the
  3-levels structure induced by <ul/> elements and dropdowns can now
  contain anything. The class 'dropdown-item' is now mandatory for
  each dropdown clickable element. The class 'dropdown-item-text' can
  be used to add same padding and style but without making the element
  have a clickable look.

- Dividers now use the class 'dropdown-divider'

- The way dropdowns are opened and hidden also changed (before the
  'open' class was added on the `.dropdown-menu` parent, now the
  'show' class is added on both the `.dropdown-menu` parent and the
  `.dropdown-menu` itself).

- JS-wise, no click event handlers can be put on `.dropdown-toggle`
  elements anymore (instead, use handlers for dropdown events).

- Carets are automatically put on `.dropdown-toggle` elements, so this
  commit replaces the `.caret` elements with this. This feature was
  possible to disable but would prevent us from adding a caret with
  scss. Also, this simplifies the DOM. The 'o-no-caret' class was also
  introduced to allow using the 'dropdown-toggle' class on non-caret
  elements.

- Also adapt the scss to use $caret-width instead of $caret-width-base

2 files changed, 7 insertions, 9 deletions

diff --git a/addons/board/static/src/scss/dashboard.scss b/addons/board/static/src/scss/dashboard.scss
index 67f3d818b76..683bdf52eaf 100644
--- a/addons/board/static/src/scss/dashboard.scss
+++ b/addons/board/static/src/scss/dashboard.scss
@@ -148,5 +148,5 @@
 // Favorites menu in control panel
 .o_add_to_dashboard {
     display: none; // hidden by default
-    @include o-search-options-dropdown-custom-li;
+    @include o-search-options-dropdown-custom-item;
 }
diff --git a/addons/board/static/src/xml/board.xml b/addons/board/static/src/xml/board.xml
index 00e94d73162..cb907290fd1 100644
--- a/addons/board/static/src/xml/board.xml
+++ b/addons/board/static/src/xml/board.xml
@@ -75,14 +75,12 @@
 </t>
 
 <t t-name="SearchView.addtodashboard">
-    <li class="o_add_to_dashboard_link o_closed_menu">
-        <a href="#">Add to my Dashboard</a>
-    </li>
-    <li class="o_add_to_dashboard">
-        <input class="o_add_to_dashboard_input" type="text"/>
-    </li>
-    <li class="o_add_to_dashboard">
+    <a href="#" class="dropdown-item o_add_to_dashboard_link o_closed_menu">Add to my Dashboard</a>
+    <div class="dropdown-item-text o_add_to_dashboard">
+        <input class="o_input o_add_to_dashboard_input" type="text"/>
+    </div>
+    <div class="dropdown-item-text o_add_to_dashboard">
         <button type="button" class="btn btn-primary o_add_to_dashboard_button">Add</button>
-    </li>
+    </div>
 </t>
 </template>