MC-5810: Improve naming of the critical variables/parameters in the code and configuration

- Updated references to group to menu section in documentation
- Updated documentation images

Author: Hwashiang Yu

docs/configurations/content-type-configuration.md

@@ -5,12 +5,12 @@
 
 <!-- {% raw %} -->
 
-Use the content type and group configuration to add new content types, extend existing content types, add groups in the left menu, or rearrange content types in the groups.
+Use the content type and menu section configuration to add new content types, extend existing content types, add menu_sections in the left menu, or rearrange content types in the menu sections.
 
 | Element             | Description                                                                                                                                 |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `group`             | Describes the group name, translated field, and sort order in the menu.      |
-| `type`              | Describes the content type name, translated field, and sort order in the menu group. Each type should have its own configuration file.      |
+| `menu_section`             | Describes the menu section name, translated field, and sort order in the menu.      |
+| `type`              | Describes the content type name, translated field, and sort order in the menu section. Each type should have its own configuration file.      |
 | `parents`           | List of parent content types that can accept this type as a child.                                                                          |
 | `children`          | List of children content types that can accept this type as a parent.                                                                       |
 | `appearances`       | Appearance configuration.                                                                                                                   |
@@ -26,18 +26,18 @@ Use the content type and group configuration to add new content types, extend ex
 | `preview_component` | Helper component that contains preview specific logic. Helper component is optional.                                                        |
 | `master_component`  | Contains master format rendering logic that is generic for all appearances. Content component is optional.                                  |
 | `form`              | UI component form used for editing the content type.                                                                                         |
-| `group`             | Existing menu group that contains this content type.                                                                                        |
+| `menu_section`             | Existing menu menu section that contains this content type.                                                                                        |
 {:style="table-layout:auto"}
 
 ### Examples
 
-#### `group`
+#### `menu_section`
 
-The following is an example of a group configuration in `view/adminhtml/pagebuilder/group.xml`:
+The following is an example of a menu section configuration in `view/adminhtml/pagebuilder/menu_section.xml`:
 
 ``` xml
-<!-- Definition of main menu, used for grouping content types  -->
-    <group name="media" translate="label" sortOrder="10" label="Media"/>
+<!-- Definition of main menu, used for menu sectioning content types  -->
+    <menu_section name="media" translate="label" sortOrder="10" label="Media"/>
 ```
 
 #### Content type
@@ -51,7 +51,7 @@ The following is an example of a content type configuration in `view/adminhtml/p
       component="Magento_PageBuilder/js/content-type"
       preview_component="Magento_PageBuilder/js/content-type/banner/preview"
       form="pagebuilder_banner_form"
-      group="media"
+      menu_section="media"
       icon="icon-pagebuilder-image"
       sortOrder="1"
       translate="label">
@@ -155,7 +155,7 @@ The following is an example of a content type configuration in `view/adminhtml/p
 | `preview_component` | Helper component that contains preview specific logic. Helper component is optional.                                                        |
 | `master_component`  | Contains master format rendering logic that is generic for all appearances. Content component is optional.                                  |
 | `form`              | UI component form used for editing the content type                                                                                         |
-| `group`             | Existing menu group that contains this content type.                                                                                        |
+| `menu_section`      | Existing menu section that contains this content type.                                                                                      |
 {:style="table-layout:auto"}
 
 ### `form`

docs/create-basic-content-type/step-1-add-configuration.md

@@ -29,7 +29,7 @@ The following configuration is from the Quote content type. An overview of these
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
     <type name="example_quote"
         label="Quote"
-        group="elements"
+        menu_section="elements"
         component="Magento_PageBuilder/js/content-type"
         preview_component="Example_PageBuilderQuote/js/content-type/example-quote/preview"
         master_component="Magento_PageBuilder/js/content-type/master"
@@ -62,13 +62,13 @@ The `type` element defines the key properties of your content type. The attribut
 | ------------------- | ------------------------------------------------------------ |
 | `name`              | Name of the content type that Magento uses for XML merging. The convention for using multi-word names is to separate the words with hyphens. |
 | `label`             | Label displayed in the Page Builder panel, option menu, and on the Admin stage. |
-| `group`             | Group or category in the panel menu where your content type is displayed. The default groups are Layout, Elements, Media, and Add Content. See [Panel configurations](../configurations/panel-configurations.md) for more details. |
+| `menu_section`      | Menu section or category in the panel menu where your content type is displayed. The default menu sections are Layout, Elements, Media, and Add Content. See [Panel configurations](../configurations/panel-configurations.md) for more details. |
 | `component`         | There are two component types to choose from: `content-type` and `content-type-collection`. Use `Magento_PageBuilder/js/content-type` for static content types that do not have children. Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children, otherwise known as container content types. |
 | `preview_component` | Optional. JavaScript file (`preview.js`) that provides rendering logic within the Admin UI. The preview component does not need to specify the `.js` extension. If you don't provide the `preview_component`, Page Builder uses the base `Preview` component shown in the code: `Magento_PageBuilder/js/content-type/preview`. |
 | `master_component`  | Optional. JavaScript file (`master.js`) that provides rendering logic generic for all appearances of your content type when rendered on the storefront. The master component does not need to specify the `.js` extension. If you don't provide the `master_component`, Page Builder uses the base `Master` component shown in the code: `Magento_PageBuilder/js/content-type/master`. |
 | `form`              | UI component form that provides the form controls for editing your content type. |
 | `icon`              | Optional. Class name for your PNG or SVG image (or font icon) displayed in the Page Builder panel alongside the label. If you don't provide an icon value, the Page Builder panel displays the content type name without an icon. |
-| `sortOrder`         | Optional. The listed order within the menu group. For example, `sortOrder=21` puts the content type third in the `Elements` menu group, after the content types with `sortOrder` values of 10 and 20. |
+| `sortOrder`         | Optional. The listed order within the menu section. For example, `sortOrder=21` puts the content type third in the `Elements` menu section, after the content types with `sortOrder` values of 10 and 20. |
 | `translate`         | Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
 
 ## The  `children` element

docs/create-basic-content-type/step-6-add-icon.md

@@ -63,7 +63,7 @@ The last step is to add our icon's class name to our config file. Previous to th
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
     <type name="example_quote"
         label="Quote"
-        group="elements"
+        menu_section="elements"
         component="Magento_PageBuilder/js/content-type"
         preview_component="Example_PageBuilderQuote/js/content-type/example-quote/preview"
         master_component="Magento_PageBuilder/js/content-type/master"

docs/how-to/how-to-add-custom-toolbar.md

@@ -56,7 +56,7 @@ Option property descriptions:
 
 | Element             | Description                                                                        |
 | ------------------- | ---------------------------------------------------------------------------------- |
-| `key`               | Describes the group name in the menu (comparable to a CSS property, `text_align`). |
+| `key`               | Describes the menu section name in the menu (comparable to a CSS property, `text_align`). |
 | `type`              | Describes the element type (comparable to the HTML `input` type).                  |
 | `values`            | Array of values for each option.                                                   |
 | `value`             | Value referenced in the dataStore (comparable to a CSS property value).            |

docs/how-to/how-to-develop-container-content-type.md

@@ -34,7 +34,7 @@ Write the following content into this configuration file:
           preview_component="VendorName_CustomContainer/js/content-type/custom-container-group/preview"
           master_component="Magento_PageBuilder/js/content-type/master-collection"
           form="pagebuilder_custom_container_group_form"
-          group="general"
+          menu_section="general"
           icon="icon-pagebuilder-row"
           sortOrder="1"
           translate="label">
@@ -141,7 +141,7 @@ Write the following content into this configuration file:
           preview_component="VendorName_CustomContainer/js/content-type/custom-container/preview"
           master_component="Magento_PageBuilder/js/content-type/master-collection"
           form="pagebuilder_custom_container_form"
-          group="general"
+          menu_section="general"
           icon="icon-pagebuilder-row"
           sortOrder="1"
           translate="label">

docs/how-to/how-to-use-image-uploader.md

@@ -17,7 +17,7 @@ Use `additional_data` in your `<YourModule>/view/base/pagebuilder/content_type/<
 
 ``` xml
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
-    <type name="MyName" translate="label" label="MyName" icon="icon-modulename-simple" component="Vendor_ModuleName/js/content-type" form="modulename_simple_form" group="layout">
+    <type name="MyName" translate="label" label="MyName" icon="icon-modulename-simple" component="Vendor_ModuleName/js/content-type" form="modulename_simple_form" menu_section="layout">
         ...
         <additional_data>
             <item name="uploaderConfig" xsi:type="array">