From e17f06baea452a8e9024d7e0dbe53bf91a6a2c19 Mon Sep 17 00:00:00 2001
From: Damien Bouvy <dbo@odoo.com>
Date: Tue, 3 Oct 2023 16:22:22 +0200
Subject: [PATCH] [IMP] web: new `size` option for badge_selection field

When you have more 3-4 options, it quickly takes a *lot* of space.

This commit allows you to set the size to 'sm' (if you have many
options) or 'lg' (if you want super extra big buttons).

Task-3450200

Part-of: odoo/odoo#138804
---
 .../badge_selection/badge_selection_field.js       | 14 ++++++++++++++
 .../badge_selection/badge_selection_field.xml      |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/fields/badge_selection/badge_selection_field.js b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.js
index ca43295cc27..4b74816fa6a 100644
--- a/addons/web/static/src/views/fields/badge_selection/badge_selection_field.js
+++ b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.js
@@ -11,6 +11,7 @@ export class BadgeSelectionField extends Component {
     static props = {
         ...standardFieldProps,
         domain: { type: Array, optional: true },
+        size: { type: String, optional: true, validate: (s) => ["sm", "md", "lg"].includes(s), default: "md"},
     };
 
     setup() {
@@ -82,9 +83,22 @@ export const badgeSelectionField = {
     component: BadgeSelectionField,
     displayName: _t("Badges"),
     supportedTypes: ["many2one", "selection"],
+    supportedOptions: [
+        {
+            label: "Size",
+            name: "size",
+            type: "selection",
+            choices: [
+                { label: "Small", value: "sm" },
+                { label: "Medium", value: "md" },
+                { label: "Large", value: "lg" },],
+            default: "md",
+        }
+    ],
     isEmpty: (record, fieldName) => record.data[fieldName] === false,
     extractProps: (fieldInfo, dynamicInfo) => ({
         domain: dynamicInfo.domain(),
+        size: fieldInfo.options.size,
     }),
 };
 
diff --git a/addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml
index 104f3c450cd..4b642303c54 100644
--- a/addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml
+++ b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml
@@ -9,7 +9,7 @@
             <t t-foreach="options" t-as="option" t-key="option[0]">
                 <span
                     class="o_selection_badge btn btn-secondary mb-1"
-                    t-att-class="{ active: value === option[0] }"
+                    t-att-class="{ 'active': value === option[0], 'btn-sm': props.size === 'sm', 'btn-lg': props.size === 'lg' }"
                     t-att-value="stringify(option[0])"
                     t-esc="option[1]"
                     t-on-click="() => this.onChange(option[0])"