From a63b66bef8c05e45b99fc7ae34ff75a8f03db970 Mon Sep 17 00:00:00 2001 From: Jehangir Date: Mon, 16 Mar 2020 15:20:40 +0500 Subject: [PATCH 01/10] Adding documentation for the UI-Component Container --- .../images/ui_comps/container-result.png | Bin 0 -> 19317 bytes .../ui_comps/container-with-field-result.png | Bin 0 -> 19589 bytes .../ui_comp_guide/components/ui-container.md | 107 ++++++++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 src/common/images/ui_comps/container-result.png create mode 100644 src/common/images/ui_comps/container-with-field-result.png create mode 100644 src/guides/v2.3/ui_comp_guide/components/ui-container.md diff --git a/src/common/images/ui_comps/container-result.png b/src/common/images/ui_comps/container-result.png new file mode 100644 index 0000000000000000000000000000000000000000..b0fd4e1734c7ab496a594d363a6e62fd02ccfd9d GIT binary patch literal 19317 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 F@E_6*HmLvr literal 0 HcmV?d00001 diff --git a/src/common/images/ui_comps/container-with-field-result.png b/src/common/images/ui_comps/container-with-field-result.png new file mode 100644 index 0000000000000000000000000000000000000000..71f267c33168b377a737d35e6db489a5a019cb0e GIT binary patch literal 19589 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 literal 0 HcmV?d00001 diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md new file mode 100644 index 00000000000..28c5184bf80 --- /dev/null +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -0,0 +1,107 @@ +--- +group: ui-components-guide +title: Container component +--- + +The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. + +It can also be used without any field but just to display a notice or description of a fieldset. + +## Configuration options + +Component's options are set in the UI-component's configuration `.xml` file as follows: + +```xml + + + + + %value% + %value% + %value% + %value% + %value% + + + +``` + +| Option | Description | Type | Default | +| --- | --- | --- | --- | +| `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` | +| `sortOrder` | Description for the Container. | Number | `0` | +| `label` | Label displayed for the Container. | String | `''` | +| `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | +| `text` | Description for the Container. | Boolean | `''` | + +## Examples + +### Container with a component + +The following sample is an example of the Container component contain a `Select` component. + +```xml + + + + ui/form/components/complex + 10 + Container Label + sample-additional-class + + Container Text. +

+ ]]> + + + + + text + + data.sort_direction + + + + + + +``` +#### Result + +![Container with a field]({{ site.baseurl }}/common/images/ui_comps/container-with-field-result.png) + +### Container without any fields + +The following sample is an example of the Container component only. + +```xml + + + + ui/form/components/complex + 10 + Container Label + sample-additional-class + + Change these settings if you do not want to apply the global display configurations. +

+ ]]> + + + +``` + +#### Result + +The `text` of this container is styled using the `additionalClasses` value, i.e. `sample-additional-class`. + +![Container with out any fields]({{ site.baseurl }}/common/images/ui_comps/container-result.png) \ No newline at end of file From 565d5ac58b88416cc6bc30de733664cf0b64a149 Mon Sep 17 00:00:00 2001 From: Jehangir Date: Mon, 16 Mar 2020 15:28:31 +0500 Subject: [PATCH 02/10] Changing text type from Boolean to String in the options' configuration table --- src/guides/v2.3/ui_comp_guide/components/ui-container.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index 28c5184bf80..b2f824c0460 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -32,7 +32,7 @@ Component's options are set in the UI-component's configuration `.xml` file as f | `sortOrder` | Description for the Container. | Number | `0` | | `label` | Label displayed for the Container. | String | `''` | | `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | -| `text` | Description for the Container. | Boolean | `''` | +| `text` | Description for the Container. | String | `''` | ## Examples From 41d4932e4499244876594dd671e4701de3990502 Mon Sep 17 00:00:00 2001 From: Jehangir Date: Mon, 16 Mar 2020 16:10:18 +0500 Subject: [PATCH 03/10] Refining an issue recommended by Markdown Linting Test --- src/guides/v2.3/ui_comp_guide/components/ui-container.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index b2f824c0460..3f77b7234e4 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -3,9 +3,7 @@ group: ui-components-guide title: Container component --- -The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. - -It can also be used without any field but just to display a notice or description of a fieldset. +The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset. ## Configuration options From 87352cfb676024ad1594f5d1cadada26f818536d Mon Sep 17 00:00:00 2001 From: Jehangir Date: Mon, 16 Mar 2020 16:34:16 +0500 Subject: [PATCH 04/10] Removing all of the trailing spaces --- .../ui_comp_guide/components/ui-container.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index 3f77b7234e4..3b3e01210e8 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -2,13 +2,9 @@ group: ui-components-guide title: Container component --- - The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset. - ## Configuration options - Component's options are set in the UI-component's configuration `.xml` file as follows: - ```xml @@ -23,7 +19,6 @@ Component's options are set in the UI-component's configuration `.xml` file as f ``` - | Option | Description | Type | Default | | --- | --- | --- | --- | | `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` | @@ -31,13 +26,9 @@ Component's options are set in the UI-component's configuration `.xml` file as f | `label` | Label displayed for the Container. | String | `''` | | `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | | `text` | Description for the Container. | String | `''` | - ## Examples - ### Container with a component - The following sample is an example of the Container component contain a `Select` component. - ```xml @@ -73,13 +64,9 @@ The following sample is an example of the Container component contain a `Select` ``` #### Result - ![Container with a field]({{ site.baseurl }}/common/images/ui_comps/container-with-field-result.png) - ### Container without any fields - The following sample is an example of the Container component only. - ```xml @@ -97,9 +84,6 @@ The following sample is an example of the Container component only. ``` - #### Result - The `text` of this container is styled using the `additionalClasses` value, i.e. `sample-additional-class`. - ![Container with out any fields]({{ site.baseurl }}/common/images/ui_comps/container-result.png) \ No newline at end of file From 1ae556de8319e65f16d92991a204d31ccbcd27c9 Mon Sep 17 00:00:00 2001 From: Jehangir Date: Mon, 16 Mar 2020 16:46:32 +0500 Subject: [PATCH 05/10] Resolving Fenced code blocks issue --- .../ui_comp_guide/components/ui-container.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index 3b3e01210e8..7b18ada3ff3 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -2,9 +2,13 @@ group: ui-components-guide title: Container component --- -The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset. + +The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset. + ## Configuration options + Component's options are set in the UI-component's configuration `.xml` file as follows: + ```xml @@ -19,6 +23,7 @@ Component's options are set in the UI-component's configuration `.xml` file as f ``` + | Option | Description | Type | Default | | --- | --- | --- | --- | | `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` | @@ -26,9 +31,13 @@ Component's options are set in the UI-component's configuration `.xml` file as f | `label` | Label displayed for the Container. | String | `''` | | `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | | `text` | Description for the Container. | String | `''` | + ## Examples + ### Container with a component + The following sample is an example of the Container component contain a `Select` component. + ```xml @@ -64,9 +73,13 @@ The following sample is an example of the Container component contain a `Select` ``` #### Result + ![Container with a field]({{ site.baseurl }}/common/images/ui_comps/container-with-field-result.png) + ### Container without any fields + The following sample is an example of the Container component only. + ```xml @@ -84,6 +97,9 @@ The following sample is an example of the Container component only. ``` + #### Result + The `text` of this container is styled using the `additionalClasses` value, i.e. `sample-additional-class`. + ![Container with out any fields]({{ site.baseurl }}/common/images/ui_comps/container-result.png) \ No newline at end of file From 03b140757f49cb0c25d2ea75c069095b614ecfbb Mon Sep 17 00:00:00 2001 From: Jehangir Wahid Date: Mon, 16 Mar 2020 23:48:35 +0500 Subject: [PATCH 06/10] Modifying the document as suggested --- .../ui_comp_guide/components/ui-container.md | 21 ++++--------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index 7b18ada3ff3..5584dcf4ae4 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -1,6 +1,8 @@ --- group: ui-components-guide title: Container component +contributor_name: Jehangir Wahid +contributor_link: https://github.com/Jehangir-Wahid --- The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset. @@ -9,25 +11,10 @@ The Container [UI component](https://glossary.magento.com/ui-component) can be u Component's options are set in the UI-component's configuration `.xml` file as follows: -```xml - - - - - %value% - %value% - %value% - %value% - %value% - - - -``` - | Option | Description | Type | Default | | --- | --- | --- | --- | | `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` | -| `sortOrder` | Description for the Container. | Number | `0` | +| `sortOrder` | Sorting order of the Container. | Number | `0` | | `label` | Label displayed for the Container. | String | `''` | | `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | | `text` | Description for the Container. | String | `''` | @@ -102,4 +89,4 @@ The following sample is an example of the Container component only. The `text` of this container is styled using the `additionalClasses` value, i.e. `sample-additional-class`. -![Container with out any fields]({{ site.baseurl }}/common/images/ui_comps/container-result.png) \ No newline at end of file +![Container with out any fields]({{ site.baseurl }}/common/images/ui_comps/container-result.png) From a47d7b42e5368fe9988108d8c6a89b08dbd64a75 Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Mon, 16 Mar 2020 15:30:58 -0500 Subject: [PATCH 07/10] Grammar and formatting --- src/guides/v2.3/ui_comp_guide/components/ui-container.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index 5584dcf4ae4..fe59ffaf52b 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -5,16 +5,16 @@ contributor_name: Jehangir Wahid contributor_link: https://github.com/Jehangir-Wahid --- -The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset. +The Container [UI component](https://glossary.magento.com/ui-component) is used for wrapping fields or other ui-components with descriptive text. It may be used without any field to display a notice or description of a fieldset. ## Configuration options -Component's options are set in the UI-component's configuration `.xml` file as follows: +Component options are set in the UI-component's configuration `.xml` file as follows: | Option | Description | Type | Default | | --- | --- | --- | --- | | `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` | -| `sortOrder` | Sorting order of the Container. | Number | `0` | +| `sortOrder` | Sort order of the Container. | Number | `0` | | `label` | Label displayed for the Container. | String | `''` | | `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | | `text` | Description for the Container. | String | `''` | From d1d952ea8e8aaebb571aaba16e96901d1bcd65e5 Mon Sep 17 00:00:00 2001 From: Jehangir Date: Thu, 19 Mar 2020 10:48:46 +0500 Subject: [PATCH 08/10] Added **Source files** section --- src/guides/v2.3/ui_comp_guide/components/ui-container.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index fe59ffaf52b..1460f685885 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -19,6 +19,10 @@ Component options are set in the UI-component's configuration `.xml` file as fol | `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | | `text` | Description for the Container. | String | `''` | +## Source files + +- [`Magento/Ui/view/base/web/templates/form/components/complex.html`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/form/components/complex.html) + ## Examples ### Container with a component From 1e5f46f314414e7d4ea1466e42feba22d7abfd46 Mon Sep 17 00:00:00 2001 From: Jehangir Date: Thu, 19 Mar 2020 10:56:48 +0500 Subject: [PATCH 09/10] Added link to component page --- src/_data/toc/ui-components-guide.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/_data/toc/ui-components-guide.yml b/src/_data/toc/ui-components-guide.yml index a7820994f0a..95ca77e049b 100644 --- a/src/_data/toc/ui-components-guide.yml +++ b/src/_data/toc/ui-components-guide.yml @@ -58,6 +58,9 @@ pages: - label: ColumnsControls component url: /ui_comp_guide/components/ui-columnscontrols.html + - label: Container component + url: /ui_comp_guide/components/ui-container.html + - label: Date component url: /ui_comp_guide/components/ui-date.html From 8e77e26b14c9aae9da44059bdd85af07682fd7b6 Mon Sep 17 00:00:00 2001 From: Jehangir Date: Thu, 19 Mar 2020 11:43:56 +0500 Subject: [PATCH 10/10] Added Component configuration option --- src/guides/v2.3/ui_comp_guide/components/ui-container.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md index 1460f685885..c3e7d052f95 100644 --- a/src/guides/v2.3/ui_comp_guide/components/ui-container.md +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -13,6 +13,7 @@ Component options are set in the UI-component's configuration `.xml` file as fol | Option | Description | Type | Default | | --- | --- | --- | --- | +| `component` | Path to the component's `.js` file. | String | `''` | | `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` | | `sortOrder` | Sort order of the Container. | Number | `0` | | `label` | Label displayed for the Container. | String | `''` |