[IMP] web_editor, *: introduce new "button group" editor widget

*: website, website_form

Basically work just as a we-select but with a different design.

Part of https://github.com/odoo/odoo/pull/53930
task-2157252

2 files changed, 35 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index f031e0c8a50..cf4b8b3b7eb 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -156,6 +156,9 @@ $o-we-sidebar-content-field-input-font-family: monospace !default;
 $o-we-sidebar-content-field-input-unit-font-size: 9px !default;
 $o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
 
+// This value allows 5 fa icons (fit one row exactly with this)
+$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.5 !default;
+
 $o-we-sidebar-content-field-progress-height: 3px !default;
 $o-we-sidebar-content-field-progress-control-height: 7px !default;
 $o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 19705bbed7a..28cff34a1de 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -372,7 +372,7 @@ body.editor_enable.editor_has_snippets {
                     line-height: $o-we-sidebar-content-main-title-height - $o-we-sidebar-content-main-title-border-width;
                 }
 
-                > we-button-group {
+                > we-top-button-group {
                     flex: 0 0 auto;
                     display: block;
                     margin-left: auto;
@@ -499,6 +499,13 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        // Selection (select and button groups)
+        we-selection-items {
+            .o_we_user_value_widget {
+                margin-top: 0;
+            }
+        }
+
         // Selects
         we-select.o_we_user_value_widget {
             position: relative;
@@ -507,7 +514,7 @@ body.editor_enable.editor_has_snippets {
                 @include large-component();
             }
 
-            we-select-menu {
+            we-selection-items {
                 @include o-position-absolute(100%, 0, auto, 0);
                 z-index: $zindex-dropdown;
                 max-height: 600px;
@@ -520,7 +527,6 @@ body.editor_enable.editor_has_snippets {
 
                 we-button {
                     @include we-icon-button('', $align: left); // Always a padding on the left
-                    margin-top: 0;
                     border: none;
                     background: none;
                     background-clip: padding-box;
@@ -547,6 +553,29 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        // Button groups
+        we-button-group.o_we_user_value_widget {
+            we-selection-items {
+                display: flex;
+                max-width: 100%;
+
+                we-button {
+                    padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
+
+                    &.active {
+                        padding-left: $o-we-sidebar-content-field-button-group-button-spacing;
+
+                        &::after {
+                            display: none;
+                        }
+                    }
+                    + we-button {
+                        border-left: none;
+                    }
+                }
+            }
+        }
+
         // Inputs
         we-input.o_we_user_value_widget {