[IMP] web: add documentation for Core components

This commit adds some documentation for features recently added to SelectMenu
and TagsList components during the saas-16.3 development. A screenshot has
been provided to the advances use case of the SelectMenu, with a customization
of the bottom area of the dropdown, to create display a button allowing the
creation of items.

Makefile

@@ -26,7 +26,7 @@ SOURCE_DIR     = content
 
 HTML_BUILD_DIR = $(BUILD_DIR)/html
 ifdef VERSIONS
-  HTML_BUILD_DIR := $(HTML_BUILD_DIR)/master
+  HTML_BUILD_DIR := $(HTML_BUILD_DIR)/saas-16.3
 endif
 ifneq ($(CURRENT_LANG),en)
   HTML_BUILD_DIR := $(HTML_BUILD_DIR)/$(CURRENT_LANG)

conf.py

@@ -22,7 +22,7 @@ copyright = 'Odoo S.A.'
 # `version` is the version info for the project being documented, acts as replacement for |version|,
 # also used in various other places throughout the built documents.
 # `release` is the full version, including alpha/beta/rc tags. Acts as replacement for |release|.
-version = release = 'master'
+version = release = 'saas-16.3'
 
 # `current_branch` is the technical name of the current branch.
 # E.g., saas-15.4 -> saas-15.4; 12.0 -> 12.0, master -> master (*).
@@ -213,6 +213,7 @@ sphinx.transforms.i18n.docname_to_domain = (
 # is populated. If a version is passed to `versions` but is not listed here, it will not be shown.
 versions_names = {
     'master': "Master",
+    'saas-16.3': "Odoo Online",
     'saas-16.2': "Odoo Online",
     'saas-16.1': "Odoo Online",
     '16.0': "Odoo 16",

content/developer/reference/frontend/owl_components.rst

@@ -1019,6 +1019,31 @@ The shape of a `group` is the following:
       :alt: Example of SelectMenu used with multiple selection
       :align: center
 
+   For more advanced use cases, you can customize the bottom area of the dropdown, using the `bottomArea` slot. Here, we choose to display
+   a button with the corresponding value set in the search input.
+
+   .. code-block:: javascript
+
+      MyComponent.template = owl.tags.xml`
+        <SelectMenu
+            choices="choices"
+        >
+            <span class="select_menu_test">Select something</span>
+            <t t-set-slot="bottomArea" t-slot-scope="select">
+                <div t-if="select.data.searchValue">
+                    <button class="btn text-primary" t-on-click="() => this.onCreate(select.data.searchValue)">
+                        Create this article "<i t-esc="select.data.searchValue" />"
+                    </button>
+                </div>
+            </t>
+        </SelectMenu>
+      `;
+
+   .. image:: owl_components/select_menu_bottomArea.png
+      :width: 400 px
+      :alt: Example of SelectMenu's bottom area customization
+      :align: center
+
 .. _frontend/tags_list:
 
 TagsList
@@ -1062,6 +1087,7 @@ Props
 The shape of a `tag` is the following:
 
     - `colorIndex` is an optional color id.
+    - `icon` is an optional icon displayed just before the displayed text.
     - `id` is a unique identifier for the tag.
     - `img` is an optional image displayed in a circle, just before the displayed text.
     - `onClick` is an optional callback that can be given to the element. This allows the parent element to handle any functionality depending on the tag clicked.