[FIX] web: btn-secondary was applied on all buttons without an

explicit-rank class

Before this commit, on all buttons without an explicit rank class (that
means, a button that don't have any of the following classes:
btn-primary, btn-secondary, btn-link, btn-success, btn-info,
btn-warning, btn-danger) the class on the props.defaultRank or the class
btn-secondary was applied.

Now, the class on the props.defaultRank or the class btn-secondary are
applied as following these rules:
-  if there is no explicit rank class and there exists a
    props.defaultRank, the class on the props.defaultRank will be
    applied;
- if there is no explicit rank class and the props forceRank is set
    (for instance, on the headers on the form view), the class
    btn-secondary will be applied;
- if the button don't have any class, the class btn-secondary will be
applied.

closes odoo/odoo#96655

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Jorge Pinna Puissant
2022-07-29 09:12:27 +02:00
parent 4a996060e6
commit aaa7336a1f
3 changed files with 41 additions and 30 deletions
@@ -144,11 +144,10 @@ export class FormCompiler extends ViewCompiler {
? `!evalDomainFromRecord(props.record,${JSON.stringify(invisible)})`
: true,
});
const button = this.compileNode(child, params, false);
if (button.tagName === "ViewButton") {
button.setAttribute("defaultRank", "'oe_stat_button'");
if (child.tagName === "button") {
child.classList.add("oe_stat_button");
}
append(mainSlot, button);
append(mainSlot, this.compileNode(child, params, false));
append(buttonBox, mainSlot);
}
@@ -364,6 +363,9 @@ export class FormCompiler extends ViewCompiler {
compiled.setAttribute("showTooltip", true);
others.push(compiled);
} else {
if (compiled.tagName === "ViewButton") {
compiled.setAttribute("defaultRank", "'btn-secondary'");
}
buttons.push(compiled);
}
}
@@ -90,18 +90,21 @@ export class ViewButton extends Component {
getClassName() {
const classNames = [];
let hasExplicitRank = false;
for (let cls of this.props.className.split(" ")) {
if (cls in odooToBootstrapClasses) {
cls = odooToBootstrapClasses[cls];
}
classNames.push(cls);
if (!hasExplicitRank && explicitRankClasses.includes(cls)) {
hasExplicitRank = true;
if (this.props.className) {
for (let cls of this.props.className.split(" ")) {
if (cls in odooToBootstrapClasses) {
cls = odooToBootstrapClasses[cls];
}
classNames.push(cls);
if (!hasExplicitRank && explicitRankClasses.includes(cls)) {
hasExplicitRank = true;
}
}
}
if (this.props.tag === "button") {
classNames.push("btn");
if (!hasExplicitRank) {
const hasOtherClasses = classNames.length;
classNames.unshift("btn");
if ((!hasExplicitRank && this.props.defaultRank) || !hasOtherClasses) {
classNames.push(this.props.defaultRank || "btn-secondary");
}
if (this.props.size) {
@@ -2482,25 +2482,31 @@ QUnit.module("Views", (hooks) => {
resId: 2,
});
assert.hasClass(target.querySelector('button[name="0"]'), "btn btn-secondary");
assert.hasClass(target.querySelector('button[name="1"]'), "btn btn-primary");
assert.hasClass(target.querySelector('button[name="2"]'), "btn btn-primary");
assert.hasClass(target.querySelector('button[name="3"]'), "btn btn-secondary");
assert.hasClass(target.querySelector('button[name="4"]'), "btn btn-link");
assert.hasClass(target.querySelector('button[name="5"]'), "btn btn-link");
assert.hasClass(target.querySelector('button[name="6"]'), "btn btn-success");
assert.hasClass(
target.querySelector('button[name="7"]'),
assert.strictEqual(target.querySelector('button[name="0"]').className, "btn btn-secondary");
assert.strictEqual(target.querySelector('button[name="1"]').className, "btn btn-primary");
assert.strictEqual(target.querySelector('button[name="2"]').className, "btn btn-primary");
assert.strictEqual(target.querySelector('button[name="3"]').className, "btn btn-secondary");
assert.strictEqual(target.querySelector('button[name="4"]').className, "btn btn-link");
assert.strictEqual(target.querySelector('button[name="5"]').className, "btn btn-link");
assert.strictEqual(target.querySelector('button[name="6"]').className, "btn btn-success");
assert.strictEqual(
target.querySelector('button[name="7"]').className,
"btn o_this_is_a_button btn-secondary"
);
assert.hasClass(target.querySelector('button[name="8"]'), "btn btn-secondary");
assert.hasClass(target.querySelector('button[name="9"]'), "btn btn-primary");
assert.hasClass(target.querySelector('button[name="10"]'), "btn btn-primary");
assert.hasClass(target.querySelector('button[name="11"]'), "btn btn-secondary");
assert.hasClass(target.querySelector('button[name="12"]'), "btn btn-link");
assert.hasClass(target.querySelector('button[name="13"]'), "btn btn-link");
assert.hasClass(target.querySelector('button[name="14"]'), "btn btn-success");
assert.hasClass(target.querySelector('button[name="15"]'), "btn o_this_is_a_button");
assert.strictEqual(target.querySelector('button[name="8"]').className, "btn btn-secondary");
assert.strictEqual(target.querySelector('button[name="9"]').className, "btn btn-primary");
assert.strictEqual(target.querySelector('button[name="10"]').className, "btn btn-primary");
assert.strictEqual(
target.querySelector('button[name="11"]').className,
"btn btn-secondary"
);
assert.strictEqual(target.querySelector('button[name="12"]').className, "btn btn-link");
assert.strictEqual(target.querySelector('button[name="13"]').className, "btn btn-link");
assert.strictEqual(target.querySelector('button[name="14"]').className, "btn btn-success");
assert.strictEqual(
target.querySelector('button[name="15"]').className,
"btn o_this_is_a_button"
);
});
QUnit.test("button in form view and long willStart", async function (assert) {