From 8dd3a6a2e597ee0ae87de9c8eac28c87990e15ba Mon Sep 17 00:00:00 2001
From: eduard13 <e.chitoraga@atwix.com>
Date: Thu, 25 Apr 2019 12:01:00 +0300
Subject: [PATCH 1/2] Improving the dropdown dialog widget documentation with
 new options and an example of initialization.

---
 .../images/dropdown-dialog-widget-result.png  | Bin 0 -> 2047 bytes
 .../widgets/widget_dialog.md                  |  48 ++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 guides/v2.1/javascript-dev-guide/widgets/images/dropdown-dialog-widget-result.png

diff --git a/guides/v2.1/javascript-dev-guide/widgets/images/dropdown-dialog-widget-result.png b/guides/v2.1/javascript-dev-guide/widgets/images/dropdown-dialog-widget-result.png
new file mode 100644
index 0000000000000000000000000000000000000000..c840682d7fa3f90b2c53e3f0d19e8c9d93cd6de7
GIT binary patch
literal 2047
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

literal 0
HcmV?d00001

diff --git a/guides/v2.1/javascript-dev-guide/widgets/widget_dialog.md b/guides/v2.1/javascript-dev-guide/widgets/widget_dialog.md
index e249882a78e..26a114317ab 100644
--- a/guides/v2.1/javascript-dev-guide/widgets/widget_dialog.md
+++ b/guides/v2.1/javascript-dev-guide/widgets/widget_dialog.md
@@ -23,12 +23,14 @@ For information about how to initialize a widget in a JS component or `.phtml` t
 Magento customized Dialog widget has default [jQuery UI Dialog widget](http://api.jqueryui.com/dialog/){:target="_blank"} options, plus several custom options:
 -   [autoPosition](#d_autoPosition)
 -   [autoSize](#d_autoSize)
+-   [autoOpen](#d_autoOpen)
 -   [closeOnClickOutside](#d_closeOnClickOutside)
 -   [closeOnMouseLeave](#d_closeOnMouseLeave)
 -   [createTitleBar](#d_createTitleBar)
 -   [defaultDialogClass](#d_defaultDialogClass)
 -   [dialogContentClass](#d_dialogContentClass)
 -   [parentClass](#d_parentClass)
+-   [timeout](#d_timeout)
 -   [triggerClass](#d_triggerClass)
 -   [triggerEvent](#d_triggerEvent)
 -   [triggerTarget](#d_triggerTarget)
@@ -46,6 +48,15 @@ If set to `false` (default value), then `position` rules are not used and the dr
 **Default value**: `false`
 
 
+### `autoOpen` {#d_autoOpen}
+
+Specifies if the drop-down should open after page load.
+
+**Type**: Boolean
+
+**Default value**: `false`
+
+
 ### `autoSize` {#d_autoSize}
 
 Specifies if the size of the drop-down is defined by widget options ([height], [width], [minHeight], [minWidth]).
@@ -146,6 +157,43 @@ Beside default functionality, this method calls the `_mouseLeave()` and `_mouseE
 ### `close()` {#d_close}
 Beside default functionality, this method removes the classes from trigger and drop-down parent.Also clears the timeout if the latter exists.
 
+## Code sample
+
+The following example shows how to initialize the dropdown dialog widget and pass options during the initialization.
+This example uses some CSS classes that are used for minicart.
+
+```html
+<div data-block="dropdown" class="minicart-wrapper">
+    <button type="button" class="action" data-trigger="trigger">
+        <span data-bind="i18n: 'Click Here'"></span>
+    </button>
+</div>
+<div class="block block-minicart"
+     data-mage-init='{
+        "dropdownDialog": {
+            "appendTo": "[data-block=dropdown]",
+            "triggerTarget":"[data-trigger=trigger]",
+            "timeout": 2000,
+            "closeOnMouseLeave": false,
+            "closeOnEscape": true,
+            "autoOpen": true,
+            "triggerClass": "active",
+            "parentClass": "active",
+            "buttons": []
+        }
+     }'>
+    <div id="minicart-content-wrapper">
+        Here is our content
+    </div>
+</div>
+```
+
+### Result
+
+The result is a dropdown dialog and a button (_Click Here_) that opens the dialog.
+
+![DropdownDialog Widget]({{ site.baseurl }}/common/images/widget/dropdown-dialog-widget-result.png)
+
 [lib/web/mage/dropdown.js]: {{ site.mage2000url }}lib/web/mage/dropdown.js
 [Initialize JavaScript]: {{ page.baseurl }}/javascript-dev-guide/javascript/js_init.html
 [`position`]: http://api.jqueryui.com/dialog/#option-position

From b7b81f27f82fae3a54f800fc48704c7945ae227c Mon Sep 17 00:00:00 2001
From: eduard13 <e.chitoraga@atwix.com>
Date: Wed, 1 May 2019 07:49:56 +0300
Subject: [PATCH 2/2] Moving the image into the right folder

---
 .../widget}/dropdown-dialog-widget-result.png       | Bin
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {guides/v2.1/javascript-dev-guide/widgets/images => common/images/widget}/dropdown-dialog-widget-result.png (100%)

diff --git a/guides/v2.1/javascript-dev-guide/widgets/images/dropdown-dialog-widget-result.png b/common/images/widget/dropdown-dialog-widget-result.png
similarity index 100%
rename from guides/v2.1/javascript-dev-guide/widgets/images/dropdown-dialog-widget-result.png
rename to common/images/widget/dropdown-dialog-widget-result.png