[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

18 files changed, 228 insertions, 113 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 12a21bde93a..2ac2a13a88c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -457,7 +457,7 @@ var SnippetEditor = Widget.extend({
         var $optionsSection = $(core.qweb.render('web_editor.customize_block_options_section', {
             name: this.getName(),
         })).data('editor', this);
-        const $optionsSectionBtnGroup = $optionsSection.find('we-button-group');
+        const $optionsSectionBtnGroup = $optionsSection.find('we-top-button-group');
         $optionsSectionBtnGroup.contents().each((i, node) => {
             if (node.nodeType === Node.TEXT_NODE) {
                 node.parentNode.removeChild(node);
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index fcd5b4a4ea1..cc0a154a08d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -677,37 +677,18 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({
     },
 });
 
-const SelectUserValueWidget = UserValueWidget.extend({
-    tagName: 'we-select',
-    events: {
-        'click': '_onClick',
-    },
-
+const BaseSelectionUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    start: function () {
-        if (this.options && this.options.valueEl) {
-            this.containerEl.appendChild(this.options.valueEl);
-        }
-
-        this.menuTogglerEl = document.createElement('we-toggler');
-        this.icon = this.el.dataset.icon || false;
-        if (this.icon) {
-            this.el.classList.add('o_we_icon_select');
-            const iconEl = document.createElement('i');
-            iconEl.classList.add('fa', 'fa-fw', this.icon);
-            this.menuTogglerEl.appendChild(iconEl);
-        }
-        this.containerEl.appendChild(this.menuTogglerEl);
+    async start() {
+        await this._super(...arguments);
 
-        this.menuEl = document.createElement('we-select-menu');
+        this.menuEl = document.createElement('we-selection-items');
         if (this.options && this.options.childNodes) {
             this.options.childNodes.forEach(node => this.menuEl.appendChild(node));
         }
         this.containerEl.appendChild(this.menuEl);
-
-        return this._super(...arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -717,14 +698,7 @@ const SelectUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    close: function () {
-        this._super(...arguments);
-        this.menuTogglerEl.classList.remove('active');
-    },
-    /**
-     * @override
-     */
-    getValue: function (methodName) {
+    getValue(methodName) {
         let activeWidget = this._userValueWidgets.find(widget => widget.isPreviewed());
         if (!activeWidget) {
             activeWidget = this._userValueWidgets.find(widget => widget.isActive());
@@ -737,26 +711,13 @@ const SelectUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    isContainer: function () {
+    isContainer() {
         return true;
     },
     /**
      * @override
      */
-    isPreviewed: function () {
-        return this._super(...arguments) || this.menuTogglerEl.classList.contains('active');
-    },
-    /**
-     * @override
-     */
-    open() {
-        this._super(...arguments);
-        this.menuTogglerEl.classList.add('active');
-    },
-    /**
-     * @override
-     */
-    setValue: function (value, methodName) {
+    setValue(value, methodName) {
         this._userValueWidgets.forEach(widget => {
             widget.setValue('__NULL__', methodName);
         });
@@ -770,6 +731,59 @@ const SelectUserValueWidget = UserValueWidget.extend({
         }
         this._super(...arguments);
     },
+});
+
+const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
+    tagName: 'we-select',
+    events: {
+        'click': '_onClick',
+    },
+
+    /**
+     * @override
+     */
+    async start() {
+        await this._super(...arguments);
+
+        if (this.options && this.options.valueEl) {
+            this.containerEl.insertBefore(this.options.valueEl, this.menuEl);
+        }
+
+        this.menuTogglerEl = document.createElement('we-toggler');
+        this.icon = this.el.dataset.icon || false;
+        if (this.icon) {
+            this.el.classList.add('o_we_icon_select');
+            const iconEl = document.createElement('i');
+            iconEl.classList.add('fa', 'fa-fw', this.icon);
+            this.menuTogglerEl.appendChild(iconEl);
+        }
+        this.containerEl.insertBefore(this.menuTogglerEl, this.menuEl);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    close: function () {
+        this._super(...arguments);
+        this.menuTogglerEl.classList.remove('active');
+    },
+    /**
+     * @override
+     */
+    isPreviewed: function () {
+        return this._super(...arguments) || this.menuTogglerEl.classList.contains('active');
+    },
+    /**
+     * @override
+     */
+    open() {
+        this._super(...arguments);
+        this.menuTogglerEl.classList.add('active');
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -834,6 +848,10 @@ const SelectUserValueWidget = UserValueWidget.extend({
     },
 });
 
+const ButtonGroupUserValueWidget = BaseSelectionUserValueWidget.extend({
+    tagName: 'we-button-group',
+});
+
 const InputUserValueWidget = UserValueWidget.extend({
     tagName: 'we-input',
     events: {
@@ -1545,11 +1563,11 @@ const RangeUserValueWidget = UserValueWidget.extend({
     },
 });
 
-
 const userValueWidgetsRegistry = {
     'we-button': ButtonUserValueWidget,
     'we-checkbox': CheckboxUserValueWidget,
     'we-select': SelectUserValueWidget,
+    'we-button-group': ButtonGroupUserValueWidget,
     'we-input': InputUserValueWidget,
     'we-multi': MultiUserValueWidget,
     'we-colorpicker': ColorpickerUserValueWidget,
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 {
 
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 226d4403eea..d86725ac16e 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -23,14 +23,14 @@
         <we-customizeblock-options>
             <we-title>
                 <span t-esc="name"/>
-                <we-button-group>
+                <we-top-button-group>
                     <we-button class="fa fa-fw fa-clone oe_snippet_clone"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
                     <we-button class="fa fa-fw fa-trash oe_snippet_remove"
                                 title="Remove Block"
                                 aria-label="Remove Block"/>
-                </we-button-group>
+                </we-top-button-group>
             </we-title>
         </we-customizeblock-options>
     </t>
diff --git a/addons/website/static/src/img/snippets_options/content_width_full.svg b/addons/website/static/src/img/snippets_options/content_width_full.svg
new file mode 100644
index 00000000000..77697264955
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_full.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>content_width_full</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Field/Toggle/3-Buttons-Copy" transform="translate(-227.000000, -5.000000)" fill="#FFFFFF">
+            <path d="M251,5 C251.552285,5 252,5.44771525 252,6 L252,16 C252,16.5522847 251.552285,17 251,17 L228,17 C227.447715,17 227,16.5522847 227,16 L227,6 C227,5.44771525 227.447715,5 228,5 L251,5 Z M251,15 L228,15 L228,16 L251,16 L251,15 Z M251,6 L228,6 L228,7 L251,7 L251,6 Z" id="content_width_full"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/addons/website/static/src/img/snippets_options/content_width_normal.svg b/addons/website/static/src/img/snippets_options/content_width_normal.svg
new file mode 100644
index 00000000000..2b53da35ff0
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_normal.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>content_width_normal</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Field/Toggle/3-Buttons-Copy" transform="translate(-184.000000, -5.000000)" fill="#FFFFFF">
+            <path d="M208,5 C208.552285,5 209,5.44771525 209,6 L209,16 C209,16.5522847 208.552285,17 208,17 L185,17 C184.447715,17 184,16.5522847 184,16 L184,6 C184,5.44771525 184.447715,5 185,5 L208,5 Z M208,6 L185,6 L185,16 L208,16 L208,6 Z M205,7 L205,15 L188,15 L188,7 L205,7 Z" id="content_width_normal"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/addons/website/static/src/img/snippets_options/content_width_small.svg b/addons/website/static/src/img/snippets_options/content_width_small.svg
new file mode 100644
index 00000000000..9f9944bf899
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_small.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>content_width_small</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Field/Toggle/3-Buttons-Copy" transform="translate(-141.000000, -5.000000)" fill="#FFFFFF">
+            <path d="M165,5 C165.552285,5 166,5.44771525 166,6 L166,16 C166,16.5522847 165.552285,17 165,17 L142,17 C141.447715,17 141,16.5522847 141,16 L141,6 C141,5.44771525 141.447715,5 142,5 L165,5 Z M165,6 L142,6 L142,16 L165,16 L165,6 Z M159,7 L159,15 L148,15 L148,7 L159,7 Z" id="content_width_small"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/addons/website/static/src/img/snippets_options/height_auto.svg b/addons/website/static/src/img/snippets_options/height_auto.svg
new file mode 100644
index 00000000000..e52219eaf94
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/height_auto.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>height_auto</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Field/Toggle/3-Buttons" transform="translate(-141.000000, -5.000000)" fill="#FFFFFF">
+            <path d="M165,5 C165.552285,5 166,5.44771525 166,6 L166,16 C166,16.5522847 165.552285,17 165,17 L142,17 C141.447715,17 141,16.5522847 141,16 L141,6 C141,5.44771525 141.447715,5 142,5 L165,5 Z M165,16 L165,6 L164,6 L164,9 L143,9 L143,6 L142,6 L142,16 L165,16 Z" id="height_auto"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/addons/website/static/src/img/snippets_options/height_full.svg b/addons/website/static/src/img/snippets_options/height_full.svg
new file mode 100644
index 00000000000..5a972b11fef
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/height_full.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>height_full</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Field/Toggle/3-Buttons" transform="translate(-227.000000, -5.000000)" fill="#FFFFFF">
+            <path d="M251,5 C251.552285,5 252,5.44771525 252,6 L252,16 C252,16.5522847 251.552285,17 251,17 L228,17 C227.447715,17 227,16.5522847 227,16 L227,6 C227,5.44771525 227.447715,5 228,5 L251,5 Z M229,6 L228,6 L228,16 L229,16 L229,6 Z M251,6 L250,6 L250,16 L251,16 L251,6 Z" id="height_full"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/addons/website/static/src/img/snippets_options/height_half.svg b/addons/website/static/src/img/snippets_options/height_half.svg
new file mode 100644
index 00000000000..30c355f5f4c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/height_half.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>height_half</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Field/Toggle/3-Buttons" transform="translate(-184.000000, -5.000000)" fill="#FFFFFF">
+            <path d="M208,5 C208.552285,5 209,5.44771525 209,6 L209,16 C209,16.5522847 208.552285,17 208,17 L185,17 C184.447715,17 184,16.5522847 184,16 L184,6 C184,5.44771525 184.447715,5 185,5 L208,5 Z M208,16 L208,6 L207,6 L207,11 L186,11 L186,6 L185,6 L185,16 L208,16 Z" id="height_half"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
index 7a6c50f16e1..878ca7435ad 100644
--- a/addons/website/views/snippets/s_hr.xml
+++ b/addons/website/views/snippets/s_hr.xml
@@ -31,11 +31,11 @@
                 <we-button data-select-class="w-75">75%</we-button>
                 <we-button data-select-class="w-100">100%</we-button>
             </we-select>
-            <we-select string="Alignment">
-                <we-button data-select-class="mr-auto">Left</we-button>
-                <we-button data-select-class="mx-auto">Center</we-button>
-                <we-button data-select-class="ml-auto">Right</we-button>
-            </we-select>
+            <we-button-group string="Alignment">
+                <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+                <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+                <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+            </we-button-group>
         </div>
     </xpath>
 </template>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 23d39921c29..1427895a117 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -60,17 +60,17 @@
             <t t-call="website.snippet_options_shadow"/>
         </div>
         <div data-selector=".s_media_list_item" data-target="> .row">
-            <we-select string="Image Position" title="Image Position">
-                <we-button data-select-class="">Left</we-button>
-                <we-button data-select-class="flex-row-reverse">Right</we-button>
-            </we-select>
+            <we-button-group string="Image Position">
+                <we-button title="Left" data-select-class=""><i class="fa fa-fw fa-align-left"/></we-button>
+                <we-button title="Right" data-select-class="flex-row-reverse"><i class="fa fa-fw fa-align-right"/></we-button>
+            </we-button-group>
             <!-- Don't use the standard Vert. Alignement option to not suggest
                  Equal Height, which is useless for this snippet -->
-            <we-select string="Vert. Alignment" title="Vertical Alignment">
-                <we-button data-select-class="align-items-start">Top</we-button>
-                <we-button data-select-class="align-items-center">Middle</we-button>
-                <we-button data-select-class="align-items-end">Bottom</we-button>
-            </we-select>
+            <we-button-group string="Vert. Alignment" title="Vertical Alignment">
+                <we-button title="Top" data-select-class="align-items-start"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
+                <we-button title="Middle" data-select-class="align-items-center"><i class="fa fa-fw fa-circle"/></we-button>
+                <we-button title="Bottom" data-select-class="align-items-end"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
+            </we-button-group>
         </div>
         <div data-js="MediaItemLayout" data-selector=".s_media_list_item">
             <we-select string="Layout">
diff --git a/addons/website/views/snippets/s_table_of_content.xml b/addons/website/views/snippets/s_table_of_content.xml
index aaedae3a5c8..288493da2aa 100644
--- a/addons/website/views/snippets/s_table_of_content.xml
+++ b/addons/website/views/snippets/s_table_of_content.xml
@@ -54,11 +54,11 @@
             <we-checkbox string="Animate Scrolling" data-animate-scrolling="true" data-no-preview="true"/>
         </div>
         <div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
-            <we-select string="Position">
-                <we-button data-navbar-position="left">Left</we-button>
-                <we-button data-navbar-position="right">Right</we-button>
-                <we-button data-navbar-position="top">Top</we-button>
-            </we-select>
+            <we-button-group string="Position">
+                <we-button title="Left" data-navbar-position="left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
+                <we-button title="Top" data-navbar-position="top"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
+                <we-button title="Right" data-navbar-position="right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
+            </we-button-group>
             <we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
         </div>
         <div data-js="TableOfContentMainColumns" data-selector=".s_table_of_content_navbar_wrap, .s_table_of_content_main"/>
diff --git a/addons/website/views/snippets/s_tabs.xml b/addons/website/views/snippets/s_tabs.xml
index 39621e86ed7..3f551ad4b40 100644
--- a/addons/website/views/snippets/s_tabs.xml
+++ b/addons/website/views/snippets/s_tabs.xml
@@ -102,13 +102,13 @@
                 <we-button data-select-class="nav-justified">Justified</we-button>
             </we-select>
             <we-divider/>
-            <we-select string="Transition" data-apply-to=".s_tabs_content:first">
-                <we-button data-select-class="">No Slide Effect</we-button>
-                <we-button data-select-class="s_tabs_slide_up">Slide Up</we-button>
-                <we-button data-select-class="s_tabs_slide_down">Slide Down</we-button>
-                <we-button data-select-class="s_tabs_slide_left">Slide Left</we-button>
-                <we-button data-select-class="s_tabs_slide_right">Slide Right</we-button>
-            </we-select>
+            <we-button-group string="Slide" data-apply-to=".s_tabs_content:first">
+                <we-button title="Slide Left" data-select-class="s_tabs_slide_left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
+                <we-button title="Slide Up" data-select-class="s_tabs_slide_up"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
+                <we-button title="Slide Down" data-select-class="s_tabs_slide_down"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
+                <we-button title="Slide Right" data-select-class="s_tabs_slide_right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
+                <we-button title="No Slide Effect" data-select-class=""><i class="fa fa-fw fa-ban"/></we-button>
+            </we-button-group>
         </div>
     </xpath>
 </template>
diff --git a/addons/website/views/snippets/s_text_highlight.xml b/addons/website/views/snippets/s_text_highlight.xml
index 07fe1d99ee9..e6dc9c81d43 100644
--- a/addons/website/views/snippets/s_text_highlight.xml
+++ b/addons/website/views/snippets/s_text_highlight.xml
@@ -22,11 +22,11 @@
     </xpath>
     <xpath expr="//div[@data-js='background']" position="before">
         <div data-selector=".s_text_highlight">
-            <we-select string="Position">
-                <we-button data-select-class="">Left</we-button>
-                <we-button data-select-class="mx-auto">Center</we-button>
-                <we-button data-select-class="ml-auto">Right</we-button>
-            </we-select>
+            <we-button-group string="Position">
+                <we-button title="Left" data-select-class=""><i class="fa fa-fw fa-align-left"/></we-button>
+                <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+                <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+            </we-button-group>
         </div>
     </xpath>
 </template>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 691a5247db8..eff13410034 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -184,11 +184,11 @@
 
     <!-- H-ALIGN -->
     <div id="so_text_align" data-selector=".s_share">
-        <we-select string="Alignment">
-            <we-button data-select-class="text-left">Left</we-button>
-            <we-button data-select-class="text-center">Center</we-button>
-            <we-button data-select-class="text-right">Right</we-button>
-        </we-select>
+        <we-button-group string="Alignment">
+            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
     </div>
 
     <div id="so_width" data-selector=".s_alert, .s_card, .s_blockquote">
@@ -201,11 +201,11 @@
     </div>
 
     <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote">
-        <we-select string="Alignment" data-dependencies="!so_width_100">
-            <we-button data-select-class="mr-auto">Left</we-button>
-            <we-button data-select-class="mx-auto">Center</we-button>
-            <we-button data-select-class="ml-auto">Right</we-button>
-        </we-select>
+        <we-button-group string="Alignment" data-dependencies="!so_width_100">
+            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
     </div>
 
     <!-- Carousel | .s_carousel | .s_quotes_carousel -->
@@ -628,20 +628,32 @@
     <!-- Stretch section -->
     <div data-js="ContainerWidth" data-selector="section"
         data-target="> .container, > .container-fluid, > .o_container_small">
-        <we-select string="Content Width">
-            <we-button data-select-class="container-fluid">Full</we-button>
-            <we-button data-select-class="container">Regular</we-button>
-            <we-button data-select-class="o_container_small">Small</we-button>
-        </we-select>
+        <we-button-group string="Content Width">
+            <we-button data-select-class="container-fluid"
+                       data-img="/website/static/src/img/snippets_options/content_width_full.svg"
+                       title="Full"/>
+            <we-button data-select-class="container"
+                       data-img="/website/static/src/img/snippets_options/content_width_normal.svg"
+                       title="Regular"/>
+            <we-button data-select-class="o_container_small"
+                       data-img="/website/static/src/img/snippets_options/content_width_small.svg"
+                       title="Small"/>
+        </we-button-group>
     </div>
 
     <!-- Min height of section -->
     <div data-selector="section">
-        <we-select string="Height">
-            <we-button data-select-class="">Fit content</we-button>
-            <we-button data-select-class="o_half_screen_height">Half screen</we-button>
-            <we-button data-select-class="o_full_screen_height">Full screen</we-button>
-        </we-select>
+        <we-button-group string="Height">
+            <we-button data-select-class=""
+                       data-img="/website/static/src/img/snippets_options/height_auto.svg"
+                       title="Fit content"/>
+            <we-button data-select-class="o_half_screen_height"
+                       data-img="/website/static/src/img/snippets_options/height_half.svg"
+                       title="Half screen"/>
+            <we-button data-select-class="o_full_screen_height"
+                       data-img="/website/static/src/img/snippets_options/height_full.svg"
+                       title="Full screen"/>
+        </we-button-group>
     </div>
 
     <!-- Scroll to next section button (only for full height) -->
@@ -666,13 +678,12 @@
 
     <!--  Vertical Alignment -->
     <div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
-        <we-select string="Vert. Alignment" title="Vertical Alignment">
-            <we-button data-select-class="align-items-start">Top</we-button>
-            <we-button data-select-class="align-items-center">Middle</we-button>
-            <we-button data-select-class="align-items-end">Bottom</we-button>
-            <we-divider/>
-            <we-button data-select-class="align-items-stretch">Equal height</we-button>
-        </we-select>
+        <we-button-group string="Vert. Alignment" title="Vertical Alignment">
+            <we-button title="Top" data-select-class="align-items-start"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
+            <we-button title="Middle" data-select-class="align-items-center"><i class="fa fa-fw fa-circle"/></we-button>
+            <we-button title="Bottom" data-select-class="align-items-end"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
+            <we-button title="Equal height" data-select-class="align-items-stretch"><i class="fa fa-fw fa-arrows-v"/></we-button>
+        </we-button-group>
     </div>
 
     <!-- Cookies Bar -->
diff --git a/addons/website_form/static/src/snippets/s_website_form/options.js b/addons/website_form/static/src/snippets/s_website_form/options.js
index 173a1aa8dab..80aa99e025b 100644
--- a/addons/website_form/static/src/snippets/s_website_form/options.js
+++ b/addons/website_form/static/src/snippets/s_website_form/options.js
@@ -1012,7 +1012,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
             const togglerEl = document.createElement('we-toggler');
             togglerEl.textContent = addItemTitle;
             addItemButton.appendChild(togglerEl);
-            const selectMenuEl = document.createElement('we-select-menu');
+            const selectMenuEl = document.createElement('we-selection-items');
             addItemButton.appendChild(selectMenuEl);
             this._loadListDropdown(selectMenuEl);
         }
@@ -1035,7 +1035,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
      * @param {HTMLElement} selectMenu
      */
     _loadListDropdown: function (selectMenu) {
-        selectMenu = selectMenu || this.el.querySelector('we-list we-select-menu');
+        selectMenu = selectMenu || this.el.querySelector('we-list we-selection-items');
         if (selectMenu) {
             selectMenu.innerHTML = '';
             const field = Object.assign({}, this.fields[this._getFieldName()]);