[IMP] web: display progressbar in a different color when > 100%

This improvement will give a visual indication that the progress
has gone over 100% by changing its color.
As, depending on what it measures, it could be positive or negative,
we add an option to the widget to determine the class (color)
that should be used.

task-2909337

Part-of: odoo/odoo#96104

addons/web/static/src/views/fields/progress_bar/progress_bar_field.js

@@ -20,6 +20,7 @@ export class ProgressBarField extends Component {
         isCurrentValueEditable: { type: Boolean, optional: true },
         isMaxValueEditable: { type: Boolean, optional: true },
         title: { type: String, optional: true },
+        overflowClass: { type: String, optional: true },
     };
 
     setup() {
@@ -155,6 +156,7 @@ export const progressBarField = {
         isCurrentValueEditable: options.editable && !options.edit_max_value,
         isMaxValueEditable: options.editable && options.edit_max_value,
         title: attrs.title,
+        overflowClass: options.overflow_class || 'bg-secondary',
     }),
 };
 

addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml

@@ -5,7 +5,7 @@
         <div class="o_progressbar w-100 d-flex align-items-center" t-ref="numpadDecimal">
             <div t-if="props.title" class="o_progressbar_title text-nowrap pe-1"><t t-esc="props.title"/></div>
             <div class="o_progress align-middle overflow-hidden" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
-                <div t-attf-class="{{ state.currentValue > state.maxValue ? 'bg-secondary' : 'bg-primary' }} h-100" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
+                <div t-attf-class="{{ state.currentValue > state.maxValue ? props.overflowClass : 'bg-primary' }} h-100" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
             </div>
             <div class="o_progressbar_value d-flex">
                 <t t-if="isPercentage">

addons/web/static/tests/views/fields/progress_bar_field_tests.js

@@ -538,4 +538,26 @@ QUnit.module("Fields", (hooks) => {
             assert.verifySteps(["Show error message"], "The error message was shown correctly");
         }
     );
+
+    QUnit.test(
+        "ProgressBarField: color is correctly set when value > max value",
+        async function (assert) {
+            serverData.models.partner.records[0].float_field = 101;
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_field" widget="progressbar" options="{'overflow_class': 'bg-warning'}"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsOnce(
+                target, ".o_progressbar .bg-warning",
+                "As the value has excedded the max value, the color should be set to bg-warning"
+            );
+        }
+    );
 });