Adding dialog to component documentation

docs/_assets/components.css

@@ -149,6 +149,16 @@ mdl-components-dd {
   width: 46px;
 }
 
+.mdl-components__warning {
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+  background-color: #FFF9C4;
+  padding: 16px;
+  border-radius: 2px;
+  color: #212121;
+}
+
 .mdl-components__link.is-active .mdl-components__link-image {
   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
       0 3px 3px -2px rgba(0, 0, 0, 0.2),

docs/_pages/components.md

@@ -98,6 +98,16 @@ categories:
               file: image.html
             - caption: Event
               file: event.html
+  - name: dialog
+    title: Dialogs
+    description: Modal windows for dedicated user input.
+    components:
+      - name: dialog
+        class: mdl-dialog
+        warning: Dialogs use the HTML <dialog> element, which currently has very
+          limited cross-browser support. To ensure support across all modern
+          browsers, please consider using a polyfill or creating your own.
+          There is no polyfill included with MDL.
   - name: layout
     title: Layout
     description: Building blocks for constructing a page layout.

docs/_templates/components.html

@@ -60,11 +60,16 @@
         {%- endif %}
 
         {% for component in category.components %}
+
           {% if component.caption %}
             <span class="docs-text-styling">
               <h1 class="mdl-components__classname" id="{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</h1>
             </span>
           {%- endif %}
+          <!-- Add warning, if the component has one -->
+          {% if component.warning %}
+           <div class="mdl-components__warning"><b>Note: </b>{{ component.warning }}</div>
+          {%- endif %}
           <!-- Generating snippets -->
           {% for snippet_group in component.snippets %}
             {% set snippet_group["component_name"] = component.name %}