[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

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,
     }),
 };
 

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])"