From 6a73b3e7ffdde36027b83be388722f990a88b349 Mon Sep 17 00:00:00 2001
From: Lucas Perais <lpe@odoo.com>
Date: Wed, 13 Jul 2022 09:11:50 +0000
Subject: [PATCH] [FIX] web: form: fix ButttonBox More dropdown style

Before this commit, the More dropdown button of the ButtonBox
(which displays stat buttons) was broken i.e. the more button
was on another line because its size was wrongly set.

After this commit, the style is corrected, every button of the Box
is on the same line.

Part-of: odoo/odoo#78221
---
 .../src/views/form/button_box/button_box.js   |  2 +-
 .../src/views/form/button_box/button_box.scss | 14 ++++
 .../src/views/form/button_box/button_box.xml  |  4 +-
 .../tests/views/form/form_view_tests.js       | 67 ++++++++++++++++++-
 4 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/form/button_box/button_box.js b/addons/web/static/src/views/form/button_box/button_box.js
index 6916261556a..ea6d2e56caa 100644
--- a/addons/web/static/src/views/form/button_box/button_box.js
+++ b/addons/web/static/src/views/form/button_box/button_box.js
@@ -8,7 +8,7 @@ const { Component } = owl;
 export class ButtonBox extends Component {
     setup() {
         const ui = useService("ui");
-        this.getMaxButtons = () => [2, 2, 2, 4, 7][ui.size] || 8;
+        this.getMaxButtons = () => [2, 2, 2, 4][ui.size] || 7;
     }
 
     getButtons() {
diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss
index b180d850148..2ca2a106dcd 100644
--- a/addons/web/static/src/views/form/button_box/button_box.scss
+++ b/addons/web/static/src/views/form/button_box/button_box.scss
@@ -24,6 +24,20 @@
         }
     }
 
+    > .btn.oe_stat_button.o-dropdown {
+        .o_button_more {
+            height:100%;
+            width: 100%;
+            &:after {
+                @include o-caret-right
+            };
+        }
+
+        &.show .o_button_more:after {
+            @include o-caret-down;
+        }
+    }
+
     .btn.oe_stat_button {
         color: $o-main-text-color;
         height: $o-statbutton-height;
diff --git a/addons/web/static/src/views/form/button_box/button_box.xml b/addons/web/static/src/views/form/button_box/button_box.xml
index 5750bf2c9cf..ed38273850c 100644
--- a/addons/web/static/src/views/form/button_box/button_box.xml
+++ b/addons/web/static/src/views/form/button_box/button_box.xml
@@ -9,8 +9,8 @@
         <t t-slot="{{ button_value }}" t-foreach="visibleButtons" t-as="button" t-key="button_value" />
 
         <t t-if="additionalButtons.length" >
-            <Dropdown togglerClass="'btn o_button_more'" class="'btn oe_stat_button o_dropdown_more'">
-                <t t-set-slot="toggler">More</t>
+            <Dropdown togglerClass="'btn o_button_more'" class="'btn oe_stat_button'">
+                <t t-set-slot="toggler"><span>More</span></t>
                 <DropdownItem t-foreach="additionalButtons" t-as="button" t-key="button_value">
                     <t t-slot="{{ button_value }}" />
                 </DropdownItem>
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 0e066ba5577..93dab4476ae 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -305,6 +305,71 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, ".o_form_sheet_bg > .o_form_statusbar > .o_statusbar_buttons");
     });
 
+    QUnit.test("button box rendering on small screen", async (assert) => {
+        registry.category("services").add("ui", {
+            start(env) {
+                Object.defineProperty(env, "isSmall", {
+                    value: false,
+                });
+                return {
+                    size: 0,
+                    isSmall: true,
+                };
+            },
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><sheet><div name="button_box"><button id="btn1">MyButton</button><button id="btn2">MyButton2</button><button id="btn3">MyButton3</button></div></sheet></form>`,
+            resId: 2,
+        });
+
+        assert.containsN(target, ".o-form-buttonbox > button", 2);
+        assert.containsOnce(target, ".o-dropdown.oe_stat_button .o_button_more");
+        await click(target, ".o-dropdown.oe_stat_button .o_button_more");
+
+        assert.containsOnce(target, ".o-dropdown--menu #btn3");
+    });
+
+    QUnit.test("button box rendering on big screen", async (assert) => {
+        registry.category("services").add("ui", {
+            start(env) {
+                Object.defineProperty(env, "isSmall", {
+                    value: false,
+                });
+                return {
+                    size: 9,
+                    isSmall: false,
+                };
+            },
+        });
+
+        let btnString = "";
+        for (let i = 0; i < 9; i++) {
+            btnString += `<button class="oe_stat_button" id="btn${i}">My Button ${i}</button>`;
+        }
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><sheet><div name="button_box">${btnString}</div></sheet></form>`,
+            resId: 2,
+        });
+
+        assert.containsN(target, ".o-form-buttonbox > button", 7);
+        assert.containsOnce(target, ".o-form-buttonbox > .oe_stat_button.o-dropdown");
+
+        const buttonBox = target.querySelector(".o-form-buttonbox");
+        const buttonBoxRect = buttonBox.getBoundingClientRect();
+
+        for (const btn of buttonBox.children) {
+            assert.strictEqual(btn.getBoundingClientRect().top, buttonBoxRect.top);
+        }
+    });
+
     QUnit.test("duplicate fields rendered properly", async function (assert) {
         await makeView({
             type: "form",
@@ -6673,7 +6738,7 @@ QUnit.module("Views", (hooks) => {
             </button>`);
 
         // legacySelector = ".oe_stat_button:not(.dropdown-item, .dropdown-toggle)";
-        const statButtonSelector = ".o-form-buttonbox .oe_stat_button:not(.o_dropdown_more)";
+        const statButtonSelector = ".o-form-buttonbox .oe_stat_button:not(.o-dropdown)";
 
         const formView = await makeView({
             type: "form",