Improving the dropdown dialog widget documentation

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