[IMP] web_editor, *: introduce select & checkboxes for the left panel UI

* website, website_blog, website_form, website_sale

+ introduce default UI for snippet options
+ refactor style of icon buttons

Part of https://github.com/odoo/odoo/pull/38959
task-2066614

14 files changed, 644 insertions, 465 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 c49c6235e1a..c27e7b91ddb 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -322,6 +322,56 @@ var SnippetEditor = Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Transforms option UI description into actual DOM.
+     *
+     * @private
+     * @param {jQuery} $el
+     */
+    _createOptionUI: function ($el) {
+        const $optionSection = $(core.qweb.render('web_editor.customize_block_option'));
+        $optionSection.append($el);
+        const uiEl = $optionSection[0];
+
+        // Build group first as their internal components will be built after
+        uiEl.querySelectorAll('we-row').forEach(el => {
+            const infos = this._extraInfoFromDescriptionElement(el);
+            const groupEl = options.Class.prototype.buildRowElement(infos.title, infos.options);
+            el.parentNode.insertBefore(groupEl, el);
+            el.parentNode.removeChild(el);
+        });
+
+        // Build standard components
+        uiEl.querySelectorAll('we-select').forEach(el => {
+            const infos = this._extraInfoFromDescriptionElement(el);
+            const selectEl = options.Class.prototype.buildSelectElement(infos.title, infos.options);
+            el.parentNode.insertBefore(selectEl, el);
+            el.parentNode.removeChild(el);
+        });
+        uiEl.querySelectorAll('we-checkbox').forEach(el => {
+            const infos = this._extraInfoFromDescriptionElement(el);
+            const checkboxEl = options.Class.prototype.buildCheckboxElement(infos.title, infos.options);
+            el.parentNode.insertBefore(checkboxEl, el);
+            el.parentNode.removeChild(el);
+        });
+
+        return $optionSection;
+    },
+    /**
+     * @private
+     * @param {HTMLElement} el
+     * @returns {Object}
+     */
+    _extraInfoFromDescriptionElement: function (el) {
+        return {
+            title: el.getAttribute('string'),
+            options: {
+                classes: el.classList,
+                dataAttributes: el.dataset,
+                childNodes: [...el.childNodes],
+            },
+        };
+    },
+    /**
      * DOMElements have a default name which appears in the overlay when they
      * are being edited. This method retrieves this name; it can be defined
      * directly in the DOM thanks to the `data-name` attribute.
@@ -391,7 +441,8 @@ var SnippetEditor = Widget.extend({
             }
 
             var optionName = val.option;
-            var $el = val.$el.children().clone(true).addClass('snippet-option-' + optionName);
+
+            var $ui = val.$el.children().clone(true);
             var option = new (options.registry[optionName] || options.Class)(
                 this,
                 val.base_target ? this.$target.find(val.base_target).eq(0) : this.$target,
@@ -408,9 +459,8 @@ var SnippetEditor = Widget.extend({
             }
             this.styles[key] = option;
             option.__order = i++;
-            var $optionSection = $(core.qweb.render('web_editor.customize_block_option'));
-            $optionSection.append($el);
-            return option.attachTo($optionSection);
+            const $option = this._createOptionUI($ui).addClass('snippet-option-' + optionName);
+            return option.attachTo($option);
         });
 
         this.isTargetMovable = (this.selectorSiblings.length > 0 || this.selectorChildren.length > 0);
@@ -664,7 +714,7 @@ var SnippetsMenu = Widget.extend({
     id: 'oe_snippets',
     cacheSnippetTemplate: {},
     events: {
-        'click we-collapse-area > we-toggler': '_onCollapseTogglerClick',
+        'click we-select, we-collapse-area > we-toggler': '_onOptionTogglerClick',
         'click .o_install_btn': '_onInstallBtnClick',
     },
     custom_events: {
@@ -1277,7 +1327,7 @@ var SnippetsMenu = Widget.extend({
                 '$el': $style,
                 'drop-near': $style.data('drop-near') && self._computeSelectorFunctions($style.data('drop-near'), '', false, noCheck, true),
                 'drop-in': $style.data('drop-in') && self._computeSelectorFunctions($style.data('drop-in'), '', false, noCheck),
-                'data': $style.data(),
+                'data': _.extend({string: $style.attr('string')}, $style.data()),
             };
             self.templateOptions.push(option);
             selectors.push(option.selector);
@@ -1664,11 +1714,17 @@ var SnippetsMenu = Widget.extend({
      * @private
      * @param {*} ev
      */
-    _onCollapseTogglerClick: function (ev) {
-        var $hierarchyTogglers = $(ev.currentTarget).parents('we-collapse-area').children('we-toggler');
-        this.$('we-collapse-area > we-toggler').not($hierarchyTogglers).removeClass('active');
-        $hierarchyTogglers.not(ev.currentTarget).addClass('active');
-        ev.currentTarget.classList.toggle('active');
+    _onOptionTogglerClick: function (ev) {
+        var togglerEl = ev.currentTarget;
+        if (togglerEl.tagName !== 'WE-TOGGLER') {
+            togglerEl = togglerEl.querySelector('we-toggler');
+        }
+
+        var togglerParentSelector = 'we-select, we-collapse-area';
+        var $hierarchyTogglers = $(togglerEl).parents(togglerParentSelector).children('we-toggler');
+        this.$(togglerParentSelector).children('we-toggler').not($hierarchyTogglers).removeClass('active');
+        $hierarchyTogglers.not(togglerEl).addClass('active');
+        togglerEl.classList.toggle('active');
     },
     /**
      * Called when the overlay dimensions/positions should be recomputed.
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 16b7355ffc7..2ccc66dc6b6 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -35,11 +35,11 @@ var SnippetOption = Widget.extend({
      */
     init: function (parent, $target, $overlay, data, options) {
         this._super.apply(this, arguments);
-        this.options = options;
         this.$target = $target;
-        this.ownerDocument = this.$target[0].ownerDocument;
         this.$overlay = $overlay;
         this.data = data;
+        this.options = options;
+        this.ownerDocument = this.$target[0].ownerDocument;
         this.__methodNames = [];
     },
     /**
@@ -49,7 +49,7 @@ var SnippetOption = Widget.extend({
      * @override
      */
     start: function () {
-        this._setActive();
+        this._updateUI();
         return this._super.apply(this, arguments);
     },
     /**
@@ -133,7 +133,7 @@ var SnippetOption = Widget.extend({
      * @param {jQuery} $opt - the related DOMElement option
      */
     selectClass: function (previewMode, value, $opt) {
-        var $group = $opt && $opt.parents('we-collapse-area').last();
+        var $group = $opt && $opt.parents('we-collapse-area, we-select').last();
         if (!$group || !$group.length) {
             $group = this.$el;
         }
@@ -206,7 +206,7 @@ var SnippetOption = Widget.extend({
      */
     setTarget: function ($target) {
         this.$target = $target;
-        this._setActive();
+        this._updateUI();
         this.$target.trigger('snippet-option-change', [this]);
     },
 
@@ -242,7 +242,7 @@ var SnippetOption = Widget.extend({
      */
     _select: function (previewMode, $opt) {
         // Options can say they respond to strong choice
-        if (previewMode && ($opt.data('noPreview') || $opt.parent().data('noPreview'))) {
+        if (previewMode && ($opt.data('noPreview') || $opt.closest('[data-no-preview="true"]').length)) {
             return;
         }
         // If it is not preview mode, the user selected the option for good
@@ -278,7 +278,7 @@ var SnippetOption = Widget.extend({
         this.__methodNames = _.uniq(this.__methodNames);
 
         if (!previewMode) {
-            this._setActive();
+            this._updateUI();
         }
 
         this.$target.trigger('content_changed');
@@ -301,8 +301,8 @@ var SnippetOption = Widget.extend({
             .addClass('active');
 
         // Get submenus which are not inside submenus
-        var $submenus = this.$el.find('we-collapse-area')
-            .not('we-collapse-area we-collapse-area');
+        var $submenus = this.$el.find('we-collapse-area, we-select')
+            .not('we-collapse-area *, we-select *');
 
         // Add unique active class for each submenu active item
         _.each($submenus, function (submenu) {
@@ -312,7 +312,7 @@ var SnippetOption = Widget.extend({
 
         // Add unique active class for out-of-submenu active item
         var $externalElements = this.$el.find('[data-select-class]')
-            .not('we-collapse-area *, we-collapse-area');
+            .not('we-collapse-area *, we-select *');
         _processSelectClassElements($externalElements);
 
         function _processSelectClassElements($elements) {
@@ -331,6 +331,20 @@ var SnippetOption = Widget.extend({
                 .addClass('active');
         }
     },
+    /**
+     * @private
+     */
+    _updateUI: function () {
+        this._setActive();
+
+        this.el.querySelectorAll('we-select').forEach(selectEl => {
+            const activeEl = selectEl.querySelector('we-button.active');
+            const valueEl = selectEl.querySelector('we-toggler');
+            if (valueEl) {
+                valueEl.textContent = activeEl ? activeEl.textContent : "/";
+            }
+        });
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -385,6 +399,112 @@ var SnippetOption = Widget.extend({
         }
         this._reset();
     },
+
+    //--------------------------------------------------------------------------
+    // Static
+    //--------------------------------------------------------------------------
+
+    /**
+     * Build the correct DOM for an element according to the given options.
+     *
+     * @static
+     * @param {string} tagName
+     * @param {string} [title]
+     * @param {Object} [options]
+     * @param {string[]} [options.classes]
+     * @param {Object} [options.dataAttributes]
+     * @returns {HTMLElement}
+     */
+    buildElement: function (tagName, title, options) {
+        const el = document.createElement(tagName);
+
+        if (title) {
+            const titleEl = SnippetOption.prototype.buildTitleElement(title);
+            el.appendChild(titleEl);
+        }
+
+        if (options && options.classes) {
+            el.classList.add(...options.classes);
+        }
+        if (options && options.dataAttributes) {
+            for (const key in options.dataAttributes) {
+                el.dataset[key] = options.dataAttributes[key];
+            }
+        }
+
+        return el;
+    },
+    /**
+     * Build the correct DOM for a we-checkbox element.
+     *
+     * @static
+     * @param {string} [title]
+     * @param {Object} [options] - @see this.buildElement
+     * @returns {HTMLElement}
+     */
+    buildCheckboxElement: function (title, options) {
+        const buttonEl = SnippetOption.prototype.buildElement('we-button', title, options);
+        buttonEl.classList.add('o_we_checkbox_wrapper');
+
+        const checkboxEl = document.createElement('we-checkbox');
+        buttonEl.appendChild(checkboxEl);
+
+        return buttonEl;
+    },
+    /**
+     * Build the correct DOM for a we-row element.
+     *
+     * @static
+     * @param {string} [title]
+     * @param {Object} [options] - @see this.buildElement
+     * @param {HTMLElement[]} [options.childNodes]
+     * @returns {HTMLElement}
+     */
+    buildRowElement: function (title, options) {
+        const groupEl = SnippetOption.prototype.buildElement('we-row', title, options);
+
+        const rowEl = document.createElement('div');
+        groupEl.appendChild(rowEl);
+
+        if (options && options.childNodes) {
+            options.childNodes.forEach(node => rowEl.appendChild(node));
+        }
+
+        return groupEl;
+    },
+    /**
+     * Build the correct DOM for a we-select element.
+     *
+     * @static
+     * @param {string} [title]
+     * @param {Object} [options] - @see this.buildElement
+     * @param {HTMLElement[]} [options.childNodes]
+     * @returns {HTMLElement}
+     */
+    buildSelectElement: function (title, options) {
+        const selectEl = SnippetOption.prototype.buildElement('we-select', title, options);
+
+        const menuTogglerEl = document.createElement('we-toggler');
+        selectEl.appendChild(menuTogglerEl);
+
+        var menuEl = document.createElement('we-select-menu');
+        if (options && options.childNodes) {
+            options.childNodes.forEach(node => menuEl.appendChild(node));
+        }
+        selectEl.appendChild(menuEl);
+
+        return selectEl;
+    },
+    /**
+     * @static
+     * @param {string} title
+     * @returns {HTMLElement}
+     */
+    buildTitleElement: function (title) {
+        const titleEl = document.createElement('we-title');
+        titleEl.textContent = title;
+        return titleEl;
+    },
 });
 
 //::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -972,7 +1092,7 @@ registry.background = SnippetOption.extend({
         this.__customImageSrc = value;
         this.background(false, this.__customImageSrc);
         this.$target.toggleClass('oe_custom_bg', !!value);
-        this._setActive();
+        this._updateUI();
         this.$target.trigger('snippet-option-change', [this]);
     },
 
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 f8fd1d7ce04..11b7d7b84ff 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -5,6 +5,7 @@
 $o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
 
 $o-we-font-size: 13px;
+$o-we-line-height: 1.5;
 $o-we-bg-color: #F7F7F7 !default;
 $o-we-bg-color-dark: #a7a7a7 !default;
 $o-we-color: #212629 !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 0f28857762e..b9d1af61f43 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -51,6 +51,8 @@ body.editor_enable.editor_has_snippets {
     color: var(--o-we-snippets-color);
     box-shadow: 0px 10px 10px -10px black inset;
     font-family: Roboto, $font-family-sans-serif;
+    font-size: $o-we-font-size;
+    line-height: $o-we-line-height;
 
     transition: left 400ms $o-we-md-ease 0s;
 
@@ -173,17 +175,38 @@ body.editor_enable.editor_has_snippets {
     }
 
     > .o_we_customize_panel {
+        padding: 0 0.5rem;
 
         we-button, we-toggler {
             cursor: pointer;
-            @include o-text-overflow(inline-block);
-            padding: 0.25rem 0.5rem;
+            @include o-text-overflow(block);
+            padding: 0.1em 0.4em;
             margin: 0;
+            border: 1px solid var(--o-we-bg-color-dark);
+            border-radius: 0;
             background-color: var(--o-we-bg-color-dark);
             color: var(--o-we-color);
             line-height: 1.5;
-            font-weight: 500;
             white-space: nowrap;
+            text-align: left;
+
+            &.fa {
+                display: inline-block;
+                margin: 0 0 0 0.3em;
+                padding: 0;
+                border: none;
+                background-color: transparent;
+                color: var(--o-we-snippets-color);
+                text-align: center;
+
+                &.active {
+                    padding: 0;
+
+                    &::after {
+                        display: none;
+                    }
+                }
+            }
         }
 
         %we-icon-button {
@@ -230,22 +253,6 @@ body.editor_enable.editor_has_snippets {
                     > we-customizeblock-option {
                         display: inline-block; // Ideally -> display: contents;
                     }
-                    we-button {
-                        display: inline-block;
-                        margin: 0 0 0 0.3em;
-                        padding: 0;
-                        border: none;
-                        font-size: 0.9em;
-                        text-align: center;
-
-                        &.active {
-                            padding: 0;
-
-                            &::after {
-                                display: none;
-                            }
-                        }
-                    }
                 }
             }
         }
@@ -254,21 +261,47 @@ body.editor_enable.editor_has_snippets {
             position: relative;
             display: block;
 
-            > * {
+            > *, > div > * {
                 display: block;
                 margin-top: 0.25rem;
             }
 
-            we-button, we-toggler {
-                display: block;
-                text-align: left;
-                border-radius: 0;
-            }
             we-button {
                 &.active {
                     @include we-icon-button('\f00c', $o-we-color-success);
                 }
             }
+            .o_we_checkbox_wrapper.active {
+                padding-right: 0;
+
+                &::after {
+                    right: 0;
+                }
+            }
+            we-toggler {
+                @include we-icon-button('\f107');
+            }
+
+            we-row {
+                display: block;
+
+                > div {
+                    display: flex;
+                    align-items: center;
+
+                    > * {
+                        flex: 1 1 auto;
+
+                        + * {
+                            margin-left: 0.5em;
+                        }
+                    }
+                    > .fa {
+                        flex: 0 0 auto;
+                    }
+                }
+            }
+
             we-collapse {
                 position: relative;
                 display: block;
@@ -276,16 +309,64 @@ body.editor_enable.editor_has_snippets {
                 overflow: hidden;
                 transition: max-height 200ms ease 0s;
             }
-            we-toggler {
-                @include we-icon-button('\f104');
 
-                &.active {
-                    @include we-icon-button('\f107');
+            we-select {
+                position: relative;
+                display: flex;
+                flex-flow: row wrap;
+                align-items: center;
+
+                we-toggler {
+                    flex: 0 0 100%;
 
-                    + we-collapse {
-                        max-height: 500px;
+                    &.active {
+                        background-color: transparent;
+                        border-color: var(--o-we-color);
                     }
                 }
+                we-select-menu {
+                    @include o-position-absolute(100%, 0, auto, 0);
+                    display: none;
+                    z-index: $zindex-dropdown;
+                    border: 1px solid var(--o-we-color);
+                    border-top-style: none;
+                    background-color: var(--o-we-bg-color-dark);
+                }
+            }
+
+            we-toggler.active {
+
+                + we-collapse {
+                    max-height: 500px;
+                }
+                + we-select-menu {
+                    display: block;
+                }
+            }
+
+            .o_we_checkbox_wrapper {
+                display: flex;
+                align-items: center;
+                padding: 0;
+                border: none;
+                background-color: transparent;
+                color: inherit;
+
+                > we-title {
+                    flex: 1 1 auto;
+                    min-width: 0;
+                    @include o-text-overflow(block);
+                }
+                > we-checkbox {
+                    flex: 0 0 auto;
+                    display: block;
+                    width: 1em;
+                    height: 1em;
+                    margin-left: auto;
+                    border: 1px solid var(--o-we-bg-color-dark);
+                    border-radius: 0;
+                    background-color: var(--o-we-bg-color-dark);
+                }
             }
 
             .dropdown-menu {
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index fcc2b895a3a..c757c4dfd93 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -88,15 +88,12 @@ MockServer.include({
                         '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <we-collapse-area>' +
-                        '            <we-toggler>Alignment</we-toggler>' +
-                        '            <we-collapse>' +
-                        '                <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-button data-select-class="align-items-stretch">Equal height</we-button>' +
-                        '            </we-collapse>' +
-                        '        </we-collapse-area>' +
+                        '        <we-select string="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-button data-select-class="align-items-stretch">Equal height</we-button>' +
+                        '        </we-select>' +
                         '    </div>' +
                         '</div>';
                 return Promise.resolve(template);
@@ -263,15 +260,12 @@ function wysiwygData(data) {
                         '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <we-collapse-area>' +
-                        '            <we-toggler>Alignment</we-toggler>' +
-                        '            <we-collapse>' +
-                        '                <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-button data-select-class="align-items-stretch">Equal height</we-button>' +
-                        '            </we-collapse>' +
-                        '        </we-collapse-area>' +
+                        '        <we-select string="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-button data-select-class="align-items-stretch">Equal height</we-button>' +
+                        '        </we-select>' +
                         '    </div>' +
                         '</div>';
                 }
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index dfa03bcd2c8..fd6b9cb7ff2 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -84,7 +84,7 @@ options.registry.background.include({
             delete target.dataset.bgVideoSrc;
         }
         this._refreshPublicWidgets();
-        this._setActive();
+        this._updateUI();
     },
     /**
      * Returns whether the current target has a background video or not.
@@ -426,7 +426,7 @@ options.registry.navTabs = options.Class.extend({
             $activeLink.parent().remove();
             $activePane.remove();
             self._findLinksAndPanes();
-            self._setActive(); // TODO forced to do this because we do not return deferred for options
+            self._updateUI(); // TODO forced to do this because we do not return deferred for options
         });
         $next.tab('show');
     },
@@ -469,7 +469,7 @@ options.registry.navTabs = options.Class.extend({
      * @private
      * @override
      */
-    _setActive: function () {
+    _updateUI: function () {
         this._super.apply(this, arguments);
         this.$el.filter('[data-remove-tab]').toggleClass('d-none', this.$tabPanes.length <= 2);
     },
@@ -1088,7 +1088,7 @@ options.registry.gallery = options.Class.extend({
             }
             self._reset();
             self.trigger_up('cover_update');
-            this._setActive();
+            this._updateUI();
         });
         dialog.open();
     },
@@ -1393,7 +1393,7 @@ options.registry.gallery = options.Class.extend({
         $intervalOptions.removeClass('active')
             .filter('[data-interval="' + activeInterval + '"]')
             .addClass('active');
-        $intervalOptions.closest('we-collapse-area')[0]
+        $intervalOptions.closest('we-select')[0]
             .classList.toggle('d-none', activeMode !== 'slideshow');
 
         var columns = this._getColumns();
@@ -1401,7 +1401,7 @@ options.registry.gallery = options.Class.extend({
         $columnOptions.removeClass('active')
             .filter('[data-columns="' + columns + '"]')
             .addClass('active');
-        $columnOptions.closest('we-collapse-area')[0]
+        $columnOptions.closest('we-select')[0]
             .classList.toggle('d-none', !(activeMode === 'grid' || activeMode === 'masonry'));
 
         this.el.querySelector('.o_w_image_spacing_option')
@@ -1714,7 +1714,7 @@ options.registry.CoverProperties = options.Class.extend({
                 var $opt = this.$el.find('.o_record_cover_opt_size_default[data-select-class]');
                 this.selectClass(previewMode, $opt.data('selectClass'), $opt);
             }
-            this._setActive();
+            this._updateUI();
         });
     },
     /**
@@ -1809,5 +1809,34 @@ options.registry.SectionStretch = options.Class.extend({
 
         return this._super.apply(this, arguments);
     },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @see this.selectClass for parameters
+     */
+    toggleContainerFluid: function (previewMode, value, $opt) {
+        var isFluid = this.$el.find('[data-toggle-container-fluid]').hasClass('active');
+        this.$target.toggleClass('container', !isFluid)
+                    .toggleClass('container-fluid', isFluid);
+        if (previewMode !== 'reset') {
+            this.$target.toggleClass('container').toggleClass('container-fluid');
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _setActive: function () {
+        this._super.apply(this, arguments);
+        var isFluid = this.$target.hasClass('container-fluid');
+        this.$el.find('[data-toggle-container-fluid]').toggleClass('active', isFluid);
+    },
 });
 });
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 2f32dd70219..dc6a08d0d8d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1025,124 +1025,91 @@
 
     <!-- STYLES | .s_title -->
     <div data-selector=".s_title" data-target="[class*='s_title_']">
-        <we-collapse-area>
-            <we-toggler>Typography</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="s_title_boxed">Boxed</we-button>
-                <we-button data-select-class="s_title_lines">Line-On-Sides</we-button>
-                <we-button data-select-class="s_title_thin">Thin</we-button>
-                <we-button data-select-class="s_title_transparent">Transparent</we-button>
-                <we-button data-select-class="s_title_underlined">Underlined</we-button>
-                <we-button data-select-class="s_title_small_caps">Small Caps</we-button>
-                <we-divider/>
-                <we-button data-select-class="s_title_default">Default</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Typography">
+            <we-button data-select-class="s_title_boxed">Boxed</we-button>
+            <we-button data-select-class="s_title_lines">Line-On-Sides</we-button>
+            <we-button data-select-class="s_title_thin">Thin</we-button>
+            <we-button data-select-class="s_title_transparent">Transparent</we-button>
+            <we-button data-select-class="s_title_underlined">Underlined</we-button>
+            <we-button data-select-class="s_title_small_caps">Small Caps</we-button>
+            <we-divider/>
+            <we-button data-select-class="s_title_default">Default</we-button>
+        </we-select>
     </div>
 
     <!-- H-ALIGN | .s_btn -->
     <div data-selector=".s_btn, .s_share">
-        <we-collapse-area>
-            <we-toggler>Alignment</we-toggler>
-            <we-collapse>
-                <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-collapse>
-        </we-collapse-area>
+        <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>
     </div>
 
     <div data-selector=".s_alert">
-        <we-collapse-area>
-            <we-toggler>Size</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="s_alert_sm">Small</we-button>
-                <we-button data-select-class="s_alert_md">Medium</we-button>
-                <we-button data-select-class="s_alert_lg">Large</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Size">
+            <we-button data-select-class="s_alert_sm">Small</we-button>
+            <we-button data-select-class="s_alert_md">Medium</we-button>
+            <we-button data-select-class="s_alert_lg">Large</we-button>
+        </we-select>
     </div>
 
     <div data-selector=".s_alert, .s_card">
-        <we-collapse-area>
-            <we-toggler>Width</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="w-25">25%</we-button>
-                <we-button data-select-class="w-50">50%</we-button>
-                <we-button data-select-class="w-75">75%</we-button>
-                <we-button data-select-class="w-100">100%</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <we-button data-select-class="w-75">75%</we-button>
+            <we-button data-select-class="w-100">100%</we-button>
+        </we-select>
     </div>
 
     <!-- STYLES | .s_rating -->
     <div data-selector=".s_rating > div">
-        <we-collapse-area>
-            <we-toggler>Icon</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
-                <we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
-                <we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
-                <we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Value</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="">0</we-button>
-                <we-button data-select-class="s_rating_1">1/5</we-button>
-                <we-button data-select-class="s_rating_2">2/5</we-button>
-                <we-button data-select-class="s_rating_3">3/5</we-button>
-                <we-button data-select-class="s_rating_4">4/5</we-button>
-                <we-button data-select-class="s_rating_5">5/5</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Size</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="s_rating_1x">Small</we-button>
-                <we-button data-select-class="s_rating_2x">Medium</we-button>
-                <we-button data-select-class="s_rating_3x">Big</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Icon">
+            <we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
+            <we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
+            <we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
+            <we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
+        </we-select>
+        <we-select string="Value">
+            <we-button data-select-class="">0</we-button>
+            <we-button data-select-class="s_rating_1">1/5</we-button>
+            <we-button data-select-class="s_rating_2">2/5</we-button>
+            <we-button data-select-class="s_rating_3">3/5</we-button>
+            <we-button data-select-class="s_rating_4">4/5</we-button>
+            <we-button data-select-class="s_rating_5">5/5</we-button>
+        </we-select>
+        <we-select string="Size">
+            <we-button data-select-class="s_rating_1x">Small</we-button>
+            <we-button data-select-class="s_rating_2x">Medium</we-button>
+            <we-button data-select-class="s_rating_3x">Big</we-button>
+        </we-select>
     </div>
 
     <!-- STYLES | .s_hr -->
     <div data-selector=".s_hr" data-target="hr">
-        <we-collapse-area>
-            <we-toggler>Thickness</we-toggler>
-            <we-collapse>
-                <t t-foreach="range(1,6)" t-as="s_hr_thickness">
-                    <we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
-                </t>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Style</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="s_hr_solid">Solid</we-button>
-                <we-button data-select-class="s_hr_dashed">Dashed</we-button>
-                <we-button data-select-class="s_hr_dotted">Dotted</we-button>
-                <we-button data-select-class="s_hr_double">Double</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Width</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="w-25">25%</we-button>
-                <we-button data-select-class="w-50">50%</we-button>
-                <we-button data-select-class="w-75">75%</we-button>
-                <we-button data-select-class="w-100">100%</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Alignment</we-toggler>
-            <we-collapse>
-                <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-collapse>
-        </we-collapse-area>
+        <we-select string="Thickness">
+            <t t-foreach="range(1,6)" t-as="s_hr_thickness">
+                <we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
+            </t>
+        </we-select>
+        <we-select string="Style">
+            <we-button data-select-class="s_hr_solid">Solid</we-button>
+            <we-button data-select-class="s_hr_dashed">Dashed</we-button>
+            <we-button data-select-class="s_hr_dotted">Dotted</we-button>
+            <we-button data-select-class="s_hr_double">Double</we-button>
+        </we-select>
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <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>
     </div>
 
     <!-- Carousel | .s_carousel | .s_quotes_carousel -->
@@ -1151,36 +1118,27 @@
         data-target="> .carousel">
         <we-button data-add-slide="true" data-no-preview="true">Add Slide</we-button>
         <we-button data-remove-slide="true" data-no-preview="true">Remove Slide</we-button>
-        <we-collapse-area>
-            <we-toggler>Transition</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="slide">Slide</we-button>
-                <we-button data-select-class="carousel-fade slide">Fade</we-button>
-                <we-divider/>
-                <we-button data-select-class="">None</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Style</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="s_carousel_bordered">Bordered</we-button>
-                <we-button data-select-class="s_carousel_boxed">Boxed</we-button>
-                <we-button data-select-class="s_carousel_rounded">Rounded</we-button>
-                <we-divider/>
-                <we-button data-select-class="s_carousel_default">Default</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Speed</we-toggler>
-            <we-collapse>
-                <we-button data-interval="1000">1s</we-button>
-                <we-button data-interval="2000">2s</we-button>
-                <we-button data-interval="3000">3s</we-button>
-                <we-button data-interval="5000">5s</we-button>
-                <we-button data-interval="10000">10s</we-button>
-                <we-button data-interval="0">Disable autoplay</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Transition">
+            <we-button data-select-class="slide">Slide</we-button>
+            <we-button data-select-class="carousel-fade slide">Fade</we-button>
+            <we-divider/>
+            <we-button data-select-class="">None</we-button>
+        </we-select>
+        <we-select string="Style">
+            <we-button data-select-class="s_carousel_bordered">Bordered</we-button>
+            <we-button data-select-class="s_carousel_boxed">Boxed</we-button>
+            <we-button data-select-class="s_carousel_rounded">Rounded</we-button>
+            <we-divider/>
+            <we-button data-select-class="s_carousel_default">Default</we-button>
+        </we-select>
+        <we-select string="Speed">
+            <we-button data-interval="1000">1s</we-button>
+            <we-button data-interval="2000">2s</we-button>
+            <we-button data-interval="3000">3s</we-button>
+            <we-button data-interval="5000">5s</we-button>
+            <we-button data-interval="10000">10s</we-button>
+            <we-button data-interval="0">Disable autoplay</we-button>
+        </we-select>
     </div>
 
     <div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs">
@@ -1192,68 +1150,51 @@
         <we-button data-add-images="true" data-no-preview="true">Add images</we-button>
         <we-button data-remove-all-images="true" data-no-preview="true">Remove all images</we-button>
         <we-divider/>
-        <we-collapse-area>
-            <we-toggler>Mode</we-toggler>
-            <we-collapse>
-                <we-button data-mode="nomode">Float</we-button>
-                <we-button data-mode="masonry">Masonry</we-button>
-                <we-button data-mode="grid">Grid</we-button>
-                <we-button data-mode="slideshow">Slideshow</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Slideshow speed</we-toggler>
-            <we-collapse>
-                <we-button data-interval="1000">1s</we-button>
-                <we-button data-interval="2000">2s</we-button>
-                <we-button data-interval="3000">3s</we-button>
-                <we-button data-interval="5000">5s</we-button>
-                <we-button data-interval="10000">10s</we-button>
-                <we-button data-interval="0">Disable autoplay</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Columns</we-toggler>
-            <we-collapse>
-                <we-button data-columns="1">1</we-button>
-                <we-button data-columns="2">2</we-button>
-                <we-button data-columns="3">3</we-button>
-                <we-button data-columns="4">4</we-button>
-                <we-button data-columns="6">6</we-button>
-                <we-button data-columns="12">12</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area class="o_w_image_spacing_option">
-            <we-toggler>Images spacing</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="o_spc-none">None</we-button>
-                <we-button data-select-class="o_spc-small">Small</we-button>
-                <we-button data-select-class="o_spc-medium">Medium</we-button>
-                <we-button data-select-class="o_spc-big">Big</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Styling</we-toggler>
-            <we-collapse>
-                <we-button data-styling="">Square</we-button>
-                <we-button data-styling="rounded">Rounded corners</we-button>
-                <we-button data-styling="img-thumbnail">Thumbnails</we-button>
-                <we-button data-styling="rounded-circle">Circle</we-button>
-                <we-button data-styling="shadow">Shadows</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Mode">
+            <we-button data-mode="nomode">Float</we-button>
+            <we-button data-mode="masonry">Masonry</we-button>
+            <we-button data-mode="grid">Grid</we-button>
+            <we-button data-mode="slideshow">Slideshow</we-button>
+        </we-select>
+        <we-select string="Slideshow speed">
+            <we-button data-interval="1000">1s</we-button>
+            <we-button data-interval="2000">2s</we-button>
+            <we-button data-interval="3000">3s</we-button>
+            <we-button data-interval="5000">5s</we-button>
+            <we-button data-interval="10000">10s</we-button>
+            <we-button data-interval="0">Disable autoplay</we-button>
+        </we-select>
+        <we-select string="Columns">
+            <we-button data-columns="1">1</we-button>
+            <we-button data-columns="2">2</we-button>
+            <we-button data-columns="3">3</we-button>
+            <we-button data-columns="4">4</we-button>
+            <we-button data-columns="6">6</we-button>
+            <we-button data-columns="12">12</we-button>
+        </we-select>
+        <we-select string="Images spacing" class="o_w_image_spacing_option">
+            <we-button data-select-class="o_spc-none">None</we-button>
+            <we-button data-select-class="o_spc-small">Small</we-button>
+            <we-button data-select-class="o_spc-medium">Medium</we-button>
+            <we-button data-select-class="o_spc-big">Big</we-button>
+        </we-select>
+        <we-select string="Styling">
+            <we-button data-styling="">Square</we-button>
+            <we-button data-styling="rounded">Rounded corners</we-button>
+            <we-button data-styling="img-thumbnail">Thumbnails</we-button>
+            <we-button data-styling="rounded-circle">Circle</we-button>
+            <we-button data-styling="shadow">Shadows</we-button>
+        </we-select>
     </div>
 
     <div data-js="gallery_img" data-selector=".o_gallery img">
-        <we-collapse-area>
-            <we-toggler>Re-order</we-toggler>
-            <we-collapse data-no-preview="true">
-                <we-button data-position="first">Move to first</we-button>
-                <we-button data-position="prev">Move to previous</we-button>
-                <we-button data-position="next">Move to next</we-button>
-                <we-button data-position="last">Move to last</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <div data-no-preview="true">
+            <we-title>Re-order</we-title>
+            <we-button data-position="first">Move to first</we-button>
+            <we-button data-position="prev">Move to previous</we-button>
+            <we-button data-position="next">Move to next</we-button>
+            <we-button data-position="last">Move to last</we-button>
+        </div>
     </div>
 
     <!-- Facebook Page -->
@@ -1269,31 +1210,25 @@
     <div data-js="layout_column"
         data-selector="section"
         data-target="> * > .row:not(.s_nb_column_fixed)">
-        <we-collapse-area>
-            <we-toggler>Number of columns</we-toggler>
-            <we-collapse data-no-preview="true">
-                <we-button data-select-count="1">1</we-button>
-                <we-button data-select-count="2">2</we-button>
-                <we-button data-select-count="3">3</we-button>
-                <we-button data-select-count="4">4</we-button>
-                <we-button data-select-count="5">5</we-button>
-                <we-button data-select-count="6">6</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Number of columns" data-no-preview="true">
+            <we-button data-select-count="1">1</we-button>
+            <we-button data-select-count="2">2</we-button>
+            <we-button data-select-count="3">3</we-button>
+            <we-button data-select-count="4">4</we-button>
+            <we-button data-select-count="5">5</we-button>
+            <we-button data-select-count="6">6</we-button>
+        </we-select>
     </div>
 
     <!--  V-ALIGN -->
     <div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
-        <we-collapse-area>
-            <we-toggler>Alignment</we-toggler>
-            <we-collapse>
-                <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-collapse>
-        </we-collapse-area>
+        <we-select string="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>
     </div>
 
     <!-- Background Image -->
@@ -1312,19 +1247,16 @@
 
     <!-- Parallax -->
     <div data-js="parallax" data-selector=".parallax">
-        <we-collapse-area>
-            <we-toggler>Scroll Speed</we-toggler>
-            <we-collapse>
-                <we-button data-scroll="0">No-scroll</we-button>
-                <we-divider/>
-                <we-button data-scroll="1">Fixed</we-button>
-                <we-divider/>
-                <we-button data-scroll="0.6">Very Slow</we-button>
-                <we-button data-scroll="1.2">Slow</we-button>
-                <we-button data-scroll="1.6">Fast</we-button>
-                <we-button data-scroll="2">Very Fast</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Scroll Speed">
+            <we-button data-scroll="0">No-scroll</we-button>
+            <we-divider/>
+            <we-button data-scroll="1">Fixed</we-button>
+            <we-divider/>
+            <we-button data-scroll="0.6">Very Slow</we-button>
+            <we-button data-scroll="1.2">Slow</we-button>
+            <we-button data-scroll="1.6">Fast</we-button>
+            <we-button data-scroll="2">Very Fast</we-button>
+        </we-select>
     </div>
 
     <!-- Color | Section -->
@@ -1361,14 +1293,9 @@
 
     <div data-selector="section .row > div"
         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
-        <we-collapse-area>
-            <we-toggler>Styles</we-toggler>
-            <we-collapse>
-                <we-button data-toggle-class="border">Border</we-button>
-                <we-button data-toggle-class="rounded">Rounded</we-button>
-                <we-button data-toggle-class="shadow">Shadow</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-checkbox string="Border" data-toggle-class="border"/>
+        <we-checkbox string="Rounded" data-toggle-class="rounded"/>
+        <we-checkbox string="Shadow" data-toggle-class="shadow"/>
     </div>
 
     <div data-js="sizing_y"
@@ -1392,7 +1319,7 @@
 
     <div data-js="ul"
          data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
-        <we-button data-toggle-class="o_ul_folded">Folded list</we-button>
+        <we-checkbox string="Folded list" data-toggle-class="o_ul_folded"/>
     </div>
 
     <div data-js="menu_data"
@@ -1407,7 +1334,7 @@
     <div data-js="topMenuTransparency"
         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
         data-no-check="true">
-        <we-button data-transparent="true" data-no-preview="true">Transparent</we-button>
+        <we-checkbox string="Transparent" data-transparent="true" data-no-preview="true"/>
     </div>
 
     <div data-js="topMenuColor"
@@ -1433,13 +1360,10 @@
 
     <!-- Mega Menu settings -->
     <div data-selector=".o_mega_menu">
-        <we-collapse-area>
-            <we-toggler>Size</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="">Full-Width</we-button>
-                <we-button data-select-class="o_mega_menu_container_size">Narrow</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Size">
+            <we-button data-select-class="">Full-Width</we-button>
+            <we-button data-select-class="o_mega_menu_container_size">Narrow</we-button>
+        </we-select>
     </div>
 
     <div data-selector=".o_mega_menu .nav-link"
@@ -1449,75 +1373,48 @@
     <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
         <we-button data-change="true" data-no-preview="true">Change Cover</we-button>
         <we-button data-clear="true" data-no-preview="true">Remove Cover</we-button>
-        <we-collapse-area>
-            <we-toggler>Size</we-toggler>
-            <we-collapse>
-                <we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_full">
-                    Full Screen
-                </we-button>
-                <we-button data-cover-opt="size" class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover cover_mid">
-                    Half Screen
-                </we-button>
-                <we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_auto">
-                    Fit text
-                </we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Filter Intensity</we-toggler>
-            <we-collapse>
-                <we-button data-cover-opt="filters" data-filter-value="0.0">None</we-button>
-                <we-button data-cover-opt="filters" data-filter-value="0.2">Low</we-button>
-                <we-button data-cover-opt="filters" data-filter-value="0.4">Medium</we-button>
-                <we-button data-cover-opt="filters" data-filter-value="0.6">High</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Filter Color</we-toggler>
-            <we-collapse>
-                <we-button data-cover-opt="filters" data-filter-color="oe_black">Black</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="oe_none">White</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="bg-primary">Primary</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="bg-secondary">Secondary</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="oe_blue">Blue</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="oe_yellow">Yellow</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="oe_red">Red</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="oe_purple">Purple</we-button>
-                <we-button data-cover-opt="filters" data-filter-color="oe_green">Green</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Text Size</we-toggler>
-            <we-collapse>
-                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_hero">Hero</we-button>
-                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_huge">Huge</we-button>
-                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_big">Big</we-button>
-                <we-button data-cover-opt="text_size" data-select-class="">Regular</we-button>
-                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_small">Small</we-button>
-                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_tiny">Tiny</we-button>
-            </we-collapse>
-        </we-collapse-area>
-        <we-collapse-area>
-            <we-toggler>Text Alignment</we-toggler>
-            <we-collapse>
-                <we-button data-cover-opt="text_align" data-select-class="">Left</we-button>
-                <we-button data-cover-opt="text_align" data-select-class="text-center">Centered</we-button>
-                <we-button data-cover-opt="text_align" data-select-class="text-right">Right</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-select string="Size">
+            <we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_full">Full Screen</we-button>
+            <we-button data-cover-opt="size" class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover cover_mid">Half Screen</we-button>
+            <we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_auto">Fit text</we-button>
+        </we-select>
+        <we-select string="Filter Intensity">
+            <we-button data-cover-opt="filters" data-filter-value="0.0">None</we-button>
+            <we-button data-cover-opt="filters" data-filter-value="0.2">Low</we-button>
+            <we-button data-cover-opt="filters" data-filter-value="0.4">Medium</we-button>
+            <we-button data-cover-opt="filters" data-filter-value="0.6">High</we-button>
+        </we-select>
+        <we-select string="Filter Color">
+            <we-button data-cover-opt="filters" data-filter-color="oe_black">Black</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="oe_none">White</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="bg-primary">Primary</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="bg-secondary">Secondary</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="oe_blue">Blue</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="oe_yellow">Yellow</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="oe_red">Red</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="oe_purple">Purple</we-button>
+            <we-button data-cover-opt="filters" data-filter-color="oe_green">Green</we-button>
+        </we-select>
+        <we-select string="Text Size">
+            <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_hero">Hero</we-button>
+            <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_huge">Huge</we-button>
+            <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_big">Big</we-button>
+            <we-button data-cover-opt="text_size" data-select-class="">Regular</we-button>
+            <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_small">Small</we-button>
+            <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_tiny">Tiny</we-button>
+        </we-select>
+        <we-select string="Text Alignment">
+            <we-button data-cover-opt="text_align" data-select-class="">Left</we-button>
+            <we-button data-cover-opt="text_align" data-select-class="text-center">Centered</we-button>
+            <we-button data-cover-opt="text_align" data-select-class="text-right">Right</we-button>
+        </we-select>
     </div>
 
     <!-- Stretch section -->
     <div data-js="SectionStretch"
         data-selector="section"
         data-target="> .container, > .container-fluid">
-        <we-collapse-area>
-            <we-toggler>Stretch</we-toggler>
-            <we-collapse>
-                <we-button data-select-class="container-fluid">Yes</we-button>
-                <we-button data-select-class="container">No</we-button>
-            </we-collapse>
-        </we-collapse-area>
+        <we-checkbox string="Stretch" data-toggle-container-fluid=""/>
     </div>
 </template>
 </odoo>
diff --git a/addons/website_blog/static/src/js/s_latest_posts_editor.js b/addons/website_blog/static/src/js/s_latest_posts_editor.js
index 66de75bb65b..0c6ae3fc948 100644
--- a/addons/website_blog/static/src/js/s_latest_posts_editor.js
+++ b/addons/website_blog/static/src/js/s_latest_posts_editor.js
@@ -59,7 +59,7 @@ sOptions.registry.js_get_posts_selectBlog = sOptions.Class.extend({
                 el.textContent = blog.name;
                 menuEl.appendChild(el);
             }
-            this._setActive();
+            this._updateUI();
         });
 
         return Promise.all([this._super.apply(this, arguments), def]);
diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js
index b741b2197f0..4e2c136b0f1 100644
--- a/addons/website_blog/static/src/js/website_blog.editor.js
+++ b/addons/website_blog/static/src/js/website_blog.editor.js
@@ -111,7 +111,7 @@ options.registry.CoverProperties.include({
     /**
      * @override
      */
-    _setActive: function () {
+    _updateUI: function () {
         this._super(...arguments);
         var isRegularCover = this.$target.is('.o_wblog_post_page_cover_regular');
         var $coverFull = this.$el.find('[data-select-class*="cover_full"]');
diff --git a/addons/website_blog/views/snippets.xml b/addons/website_blog/views/snippets.xml
index 63c224f3c35..3e9c8e0bfbe 100644
--- a/addons/website_blog/views/snippets.xml
+++ b/addons/website_blog/views/snippets.xml
@@ -11,31 +11,25 @@
 <template id="s_latest_posts_options" inherit_id="website.snippet_options">
     <xpath expr="//div[@data-js='background']" position="before">
         <div data-js="js_get_posts_selectBlog" data-selector=".s_latest_posts, .s_latest_posts_big_picture" data-target=".js_get_posts" data-no-check="true">
-            <we-collapse-area>
-                <we-toggler>Choose a blog</we-toggler>
-                <we-collapse data-no-preview="true">
-                    <we-button data-filter-by-blog-id="0">All blogs</we-button>
-                    <!-- the blog list will be generated in js -->
-                </we-collapse>
-            </we-collapse-area>
+            <we-select string="Choose a blog" data-no-preview="true">
+                <we-button data-filter-by-blog-id="0">All blogs</we-button>
+                <!-- the blog list will be generated in js -->
+            </we-select>
         </div>
 
         <div data-js="js_get_posts_limit" data-selector=".s_latest_posts, .s_latest_posts_big_picture" data-target=".js_get_posts" data-no-check="true">
-            <we-collapse-area>
-                <we-toggler>Posts limit</we-toggler>
-                <we-collapse data-no-preview="true">
-                    <we-button data-posts-limit="1">1 post max</we-button>
-                    <we-button data-posts-limit="2">2 posts max</we-button>
-                    <we-button data-posts-limit="3">3 posts max</we-button>
-                    <we-button data-posts-limit="4">4 posts max</we-button>
-                    <we-button data-posts-limit="5">5 posts max</we-button>
-                    <we-button data-posts-limit="6">6 posts max</we-button>
-                    <we-button data-posts-limit="7">7 posts max</we-button>
-                    <we-button data-posts-limit="8">8 posts max</we-button>
-                    <we-button data-posts-limit="9">9 posts max</we-button>
-                    <we-button data-posts-limit="10">10 posts max</we-button>
-                </we-collapse>
-            </we-collapse-area>
+            <we-select string="Posts limit" data-no-preview="true">
+                <we-button data-posts-limit="1">1 post max</we-button>
+                <we-button data-posts-limit="2">2 posts max</we-button>
+                <we-button data-posts-limit="3">3 posts max</we-button>
+                <we-button data-posts-limit="4">4 posts max</we-button>
+                <we-button data-posts-limit="5">5 posts max</we-button>
+                <we-button data-posts-limit="6">6 posts max</we-button>
+                <we-button data-posts-limit="7">7 posts max</we-button>
+                <we-button data-posts-limit="8">8 posts max</we-button>
+                <we-button data-posts-limit="9">9 posts max</we-button>
+                <we-button data-posts-limit="10">10 posts max</we-button>
+            </we-select>
         </div>
     </xpath>
     <xpath expr="//div[@data-js='layout_column']" position="attributes">
diff --git a/addons/website_form/static/tests/tours/website_form_editor.js b/addons/website_form/static/tests/tours/website_form_editor.js
index b37c7626777..4d28b45ab1b 100644
--- a/addons/website_form/static/tests/tours/website_form_editor.js
+++ b/addons/website_form/static/tests/tours/website_form_editor.js
@@ -193,6 +193,10 @@ odoo.define('website_form_editor.tour', function(require) {
             trigger:  ".s_website_form[data-model_name]",
         },
         {
+            content:  "Open custom fields menu",
+            trigger:  "we-select:contains('Multiple Checkboxes')",
+        },
+        {
             content:  "Click on Multiple Checkboxes in menu Add a custom field",
             trigger:  "we-button:contains('Multiple Checkboxes')",
         },
@@ -245,6 +249,10 @@ odoo.define('website_form_editor.tour', function(require) {
             trigger:  "label:contains('Iphone') span",
         },
         {
+            content:  "Open display menu",
+            trigger:  "we-select:contains('Vertical')",
+        },
+        {
             content:  "Click on 'Vertical' in menu 'Display'",
             trigger:  "we-button:contains('Vertical')",
         },
@@ -266,6 +274,10 @@ odoo.define('website_form_editor.tour', function(require) {
             trigger:  ".s_website_form[data-model_name]",
         },
         {
+            content:  "Open custom fields menu",
+            trigger:  "we-select:contains('Radio Buttons')"
+        },
+        {
             content:  "Click on Radio Buttons in menu Add a custom field",
             trigger:  "we-button:contains('Radio Buttons')"
         },
@@ -336,6 +348,10 @@ odoo.define('website_form_editor.tour', function(require) {
             trigger:  ".s_website_form[data-model_name]",
         },
         {
+            content:  "Open custom fields menu",
+            trigger:  "we-select:contains('Selection')"
+        },
+        {
             content:  "Click on Selection in menu Add a custom field",
             trigger:  "we-button:contains('Selection')",
         },
diff --git a/addons/website_form/views/snippets.xml b/addons/website_form/views/snippets.xml
index f2148f0a427..e558f6c5eab 100644
--- a/addons/website_form/views/snippets.xml
+++ b/addons/website_form/views/snippets.xml
@@ -28,43 +28,38 @@
                 <attribute name="data-selector" add=".s_website_form" separator=","/>
             </xpath>
             <xpath expr="//div" position="after">
-              <!-- Form -->
-              <div data-js="website_form_editor" data-selector=".s_website_form">
-                  <we-button data-website_form_model_modal="" data-no-preview="true">Change Form Parameters</we-button>
-                  <we-button data-website_form_field_modal="" data-no-preview="true">Add an existing field</we-button>
-                  <we-collapse-area>
-                      <we-toggler>Add a custom field</we-toggler>
-                      <we-collapse data-no-preview="true">
-                          <we-button data-website_form_custom_field="char">Text</we-button>
-                          <we-button data-website_form_custom_field="text">Long Text</we-button>
-                          <we-button data-website_form_custom_field="email">Email</we-button>
-                          <we-button data-website_form_custom_field="integer">Number</we-button>
-                          <we-button data-website_form_custom_field="float">Decimal Number</we-button>
-                          <we-button data-website_form_custom_field="boolean">Checkbox</we-button>
-                          <we-button data-website_form_custom_field="selection">Radio Buttons</we-button>
-                          <we-button data-website_form_custom_field="many2one">Selection</we-button>
-                          <we-button data-website_form_custom_field="one2many">Multiple Checkboxes</we-button>
-                          <we-button data-website_form_custom_field="date">Date</we-button>
-                          <we-button data-website_form_custom_field="datetime">Date &amp; Time</we-button>
-                          <we-button data-website_form_custom_field="binary">File Upload</we-button>
-                      </we-collapse>
-                  </we-collapse-area>
-              </div>
+                <!-- Form -->
+                <div data-js="website_form_editor" data-selector=".s_website_form">
+                    <we-button data-website_form_model_modal="" data-no-preview="true">Change Form Parameters</we-button>
+                    <we-button data-website_form_field_modal="" data-no-preview="true">Add an existing field</we-button>
+                    <we-select string="Add a custom field" data-no-preview="true">
+                        <we-button data-website_form_custom_field="char">Text</we-button>
+                        <we-button data-website_form_custom_field="text">Long Text</we-button>
+                        <we-button data-website_form_custom_field="email">Email</we-button>
+                        <we-button data-website_form_custom_field="integer">Number</we-button>
+                        <we-button data-website_form_custom_field="float">Decimal Number</we-button>
+                        <we-button data-website_form_custom_field="boolean">Checkbox</we-button>
+                        <we-button data-website_form_custom_field="selection">Radio Buttons</we-button>
+                        <we-button data-website_form_custom_field="many2one">Selection</we-button>
+                        <we-button data-website_form_custom_field="one2many">Multiple Checkboxes</we-button>
+                        <we-button data-website_form_custom_field="date">Date</we-button>
+                        <we-button data-website_form_custom_field="datetime">Date &amp; Time</we-button>
+                        <we-button data-website_form_custom_field="binary">File Upload</we-button>
+                    </we-select>
+                </div>
 
               <!-- Field -->
               <div data-js='website_form_editor' data-selector=".form-field" data-drop-near=".form-field">
-                    <we-button data-toggle-class="o_website_form_field_hidden" data-no-preview="true">Hidden</we-button>
+                    <we-checkbox string="Hidden" data-no-preview="true"
+                                 data-toggle-class="o_website_form_field_hidden"/>
               </div>
 
               <!-- Add an option to display radio buttons / checkboxes horizontally or vertically -->
               <div data-js='website_form_editor_choice_field_display' data-selector=".o_website_form_flex">
-                  <we-collapse-area>
-                      <we-toggler>Display</we-toggler>
-                      <we-collapse data-no-preview="true">
-                          <we-button data-website_form_choice_field_display="horizontal">Horizontal</we-button>
-                          <we-button data-website_form_choice_field_display="vertical">Vertical</we-button>
-                      </we-collapse>
-                  </we-collapse-area>
+                    <we-select string="Display" data-no-preview="true">
+                        <we-button data-website_form_choice_field_display="horizontal">Horizontal</we-button>
+                        <we-button data-website_form_choice_field_display="vertical">Vertical</we-button>
+                    </we-select>
                </div>
 
               <!-- Add move, duplicate and remove controllers to checkboxes and radio buttons -->
@@ -75,7 +70,9 @@
 
               <!-- Required option for fields that are not required fields of the model -->
               <div data-js='website_form_editor_field' data-selector=".form-field:not(.o_website_form_required)">
-                    <we-button data-website_form_field_require="" data-toggle-class="o_website_form_required_custom" data-no-preview="true">Required</we-button>
+                  <we-checkbox string="Required" data-no-preview="true"
+                               data-website_form_field_require=""
+                               data-toggle-class="o_website_form_required_custom"/>
               </div>
 
               <!-- Remove the duplicate options of model fields -->
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index e4f271604b5..4725aefcb89 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -194,8 +194,6 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
      * @override
      */
     start: function () {
-        var self = this;
-
         this.ppr = this.$target.closest('[data-ppr]').data('ppr');
         this.productTemplateID = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));
 
@@ -204,15 +202,17 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         defs.push(this._rpc({
             model: 'product.style',
             method: 'search_read',
-        }).then(function (data) {
-            var $ul = self.$el.find('[name="style"]');
+        }).then(data => {
+            var $menu = this.$el.find('[name="style"]');
             for (var k in data) {
-                $ul.append(
-                    $('<we-button data-style="' + data[k]['id'] + '" data-toggle-class="' + data[k]['html_class'] + '"/>')
-                        .append(data[k]['name'])
-                );
+                $menu.append(this.buildCheckboxElement(data[k]['name'], {
+                    dataAttributes: {
+                        'style': data[k]['id'],
+                        'toggleClass': data[k]['html_class'],
+                    },
+                }));
             }
-            self._setActive();
+            this._updateUI();
         }));
 
         return $.when.apply($, defs);
@@ -262,7 +262,9 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
     /**
      * @override
      */
-    _setActive: function () {
+    _updateUI: function () {
+        this._super.apply(this, arguments);
+
         var sizeX = parseInt(this.$target.attr('colspan') || 1);
         var sizeY = parseInt(this.$target.attr('rowspan') || 1);
 
@@ -272,8 +274,6 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
 
         // Adapt size array preview to fit ppr
         $size.find('tr td:nth-child(n + ' + parseInt(this.ppr + 1) + ')').hide();
-
-        return this._super.apply(this, arguments);
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml
index faf4ed6bdad..70a6cc54dcc 100644
--- a/addons/website_sale/views/snippets.xml
+++ b/addons/website_sale/views/snippets.xml
@@ -60,19 +60,12 @@
         <div data-js="WebsiteSaleGridLayout"
             data-selector="#products_grid .o_wsale_products_grid_table_wrapper > table"
             data-no-check="true">
-            <we-button data-no-preview="true" data-choose-ppg="1">
-                <i class="fa fa-cart-plus"/> Choose number of products
-            </we-button>
-            <we-collapse-area class="o_wsale_ppr_submenu">
-                <we-toggler>
-                    <i class="fa fa-columns"/> Number of Columns
-                </we-toggler>
-                <we-collapse data-no-preview="true">
-                    <we-button data-set-ppr="2">2</we-button>
-                    <we-button data-set-ppr="3">3</we-button>
-                    <we-button data-set-ppr="4">4</we-button>
-                </we-collapse>
-            </we-collapse-area>
+            <we-button data-no-preview="true" data-choose-ppg="1">Choose number of products</we-button>
+            <we-select string="Number of Columns" class="o_wsale_ppr_submenu" data-no-preview="true">
+                <we-button data-set-ppr="2">2</we-button>
+                <we-button data-set-ppr="3">3</we-button>
+                <we-button data-set-ppr="4">4</we-button>
+            </we-select>
         </div>
 
         <div data-js="WebsiteSaleProductsItem"
@@ -97,10 +90,11 @@
                     </table>
                 </we-collapse>
             </we-collapse-area>
-            <we-collapse-area>
-                <we-toggler>Styles</we-toggler>
-                <we-collapse data-no-preview="true" name="style"/>
-            </we-collapse-area>
+
+            <div name="style" data-no-preview="true">
+                <!-- Placeholder to be filled in JS -->
+            </div>
+
             <we-collapse-area>
                 <we-toggler>Promote</we-toggler>
                 <we-collapse data-no-preview="true">