Updating Fieldset UiComponent documentation (#6045)

* Adding the Fieldset UiComponent additional information * Updating the example * Minor adjustments * Update ui-fieldset.md
magento · Nov 21, 2019 · 2d418ce · 2d418ce
1 parent f9436b7
commit 2d418ce
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/common/images/ui_comps/fieldset-component-result.png b/common/images/ui_comps/fieldset-component-result.png
diff --git a/guides/v2.2/ui_comp_guide/components/ui-fieldset.md b/guides/v2.2/ui_comp_guide/components/ui-fieldset.md
@@ -20,8 +20,48 @@ The Fieldset component implements a container for visually-grouped form elements
 | Title         | Type    | Default | Description                                                                       |
 | ------------- | ------- | ------- | --------------------------------------------------------------------------------- |
 | `collapsible` | Boolean | `false` | Enables/disables the collapsible functionality.                                   |
+| `label`       | String  |         | Caption for the fieldset.                                                         |
 | `opened`      | Boolean | `false` | Initial collapsible state. Applied when the collapsible functionality is enabled. |
 
+## Examples
+
+### Integrate the Fieldset component with the Form component
+
+The following example adds a new main fieldset that contains a collapsible fieldset into the [Form]({{ page.baseurl }}/ui_comp_guide/components/ui-form.html) component:
+
+```xml
+<form>
+    <fieldset name="main_fieldset">
+        <settings>
+            <label translate="true">Other Settings</label>
+        </settings>
+        <fieldset name="fieldset_group">
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="label" xsi:type="string" translate="true">Information</item>
+                    <item name="collapsible" xsi:type="boolean">true</item>
+                    <item name="opened" xsi:type="boolean">true</item>
+                </item>
+            </argument>
+            <field name="my_field">
+                <argument name="data" xsi:type="array">
+                    <item name="config" xsi:type="array">
+                        <item name="label" xsi:type="string" translate="true">My Field</item>
+                        <item name="visible" xsi:type="boolean">true</item>
+                        <item name="dataType" xsi:type="string">text</item>
+                        <item name="formElement" xsi:type="string">input</item>
+                    </item>
+                </argument>
+            </field>
+        </fieldset>
+    </fieldset>
+</form>
+```
+
+#### Result
+
+![Checkbox UiComponent]({{ site.baseurl }}/common/images/ui_comps/fieldset-component-result.png)
+
 ## Source files
 
 Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html) and `collapsible`: