[IMP] web: allow custom 'modal-body' class on Dialog component

This commit simply enables a custom prop for the Dialog component so that it
can have a hand-picked background instead of the default 'white'.

Will notably be useful for the social images carousel where we need a dark
background.

Task-2855647

closes odoo/odoo#101505

X-original-commit: 8da44acadbd4ad4c03dba496daf317f1f2ab8371
Related: odoo/enterprise#31973
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>

addons/web/static/src/core/dialog/dialog.js

@@ -30,6 +30,7 @@ export class Dialog extends Component {
 Dialog.template = "web.Dialog";
 Dialog.props = {
     contentClass: { type: String, optional: true },
+    bodyClass: { type: String, optional: true },
     fullscreen: { type: Boolean, optional: true },
     footer: { type: Boolean, optional: true },
     header: { type: Boolean, optional: true },
@@ -48,6 +49,7 @@ Dialog.props = {
 };
 Dialog.defaultProps = {
     contentClass: "",
+    bodyClass: "",
     fullscreen: false,
     footer: true,
     header: true,

addons/web/static/src/core/dialog/dialog.xml

@@ -30,7 +30,7 @@
                                 </button>
                             </t>
                         </footer>
-                        <main class="modal-body" t-att-class="{'p-0': !props.withBodyPadding}">
+                        <main class="modal-body" t-attf-class="{{ props.bodyClass }} {{ !props.withBodyPadding ? 'p-0': '' }}">
                             <t t-slot="default" close="data.close" />
                         </main>
                     </div>