docs(dialog): Fix markup in docs and tests (#3623)

material-components · Sep 24, 2018 · 4888ebe · 4888ebe
1 parent 4074535
commit 4888ebe
Show file tree

Hide file tree

Showing 20 changed files with 99 additions and 93 deletions.
diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
@@ -46,17 +46,19 @@ npm install @material/dialog
      aria-labelledby="my-dialog-title"
      aria-describedby="my-dialog-content">
   <div class="mdc-dialog__container">
-    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
-    <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
-   -->Dialog Title<!--
- --></h2>
-    <section class="mdc-dialog__content" id="my-dialog-content">
-      Dialog body text goes here.
-    </section>
-    <footer class="mdc-dialog__actions">
-      <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">No</button>
-      <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">Yes</button>
-    </footer>
+    <div class="mdc-dialog__surface">
+      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+      <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
+     -->Dialog Title<!--
+   --></h2>
+      <div class="mdc-dialog__content" id="my-dialog-content">
+        Dialog body text goes here.
+      </div>
+      <footer class="mdc-dialog__actions">
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">No</button>
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">Yes</button>
+      </footer>
+    </div>
   </div>
   <div class="mdc-dialog__scrim"></div>
 </div>
@@ -110,21 +112,23 @@ The Simple Dialog contains a list of potential actions. It does not contain butt
      aria-labelledby="my-dialog-title"
      aria-describedby="my-dialog-content">
   <div class="mdc-dialog__container">
-    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
-    <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
-   -->Choose a Ringtone<!--
- --></h2>
-    <section class="mdc-dialog__content" id="my-dialog-content">
-      <ul class="mdc-list mdc-list--avatar-list">
-        <li class="mdc-list-item" tabindex="0" data-mdc-dialog-action="none">
-          <span class="mdc-list-item__text">None</span>
-        </li>
-        <li class="mdc-list-item" data-mdc-dialog-action="callisto">
-          <span class="mdc-list-item__text">Callisto</span>
-        </li>
-        <!-- ... -->
-      </ul>
-    </section>
+    <div class="mdc-dialog__surface">
+      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+      <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
+     -->Choose a Ringtone<!--
+   --></h2>
+      <div class="mdc-dialog__content" id="my-dialog-content">
+        <ul class="mdc-list mdc-list--avatar-list">
+          <li class="mdc-list-item" tabindex="0" data-mdc-dialog-action="none">
+            <span class="mdc-list-item__text">None</span>
+          </li>
+          <li class="mdc-list-item" data-mdc-dialog-action="callisto">
+            <span class="mdc-list-item__text">Callisto</span>
+          </li>
+          <!-- ... -->
+        </ul>
+      </div>
+    </div>
   </div>
   <div class="mdc-dialog__scrim"></div>
 </div>
@@ -144,37 +148,39 @@ radio buttons (indicating single selection) or checkboxes (indicating multiple s
      aria-labelledby="my-dialog-title"
      aria-describedby="my-dialog-content">
   <div class="mdc-dialog__container">
-    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
-    <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
-   -->Choose a Ringtone<!--
- --></h2>
-    <section class="mdc-dialog__content" id="my-dialog-content">
-      <ul class="mdc-list">
-        <li class="mdc-list-item" tabindex="0">
-          <span class="mdc-list-item__graphic">
-            <div class="mdc-radio">
-              <input class="mdc-radio__native-control"
-                     type="radio"
-                     id="test-dialog-baseline-confirmation-radio-1"
-                     name="test-dialog-baseline-confirmation-radio-group"
-                     checked>
-              <div class="mdc-radio__background">
-                <div class="mdc-radio__outer-circle"></div>
-                <div class="mdc-radio__inner-circle"></div>
+    <div class="mdc-dialog__surface">
+      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+      <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
+     -->Choose a Ringtone<!--
+   --></h2>
+      <div class="mdc-dialog__content" id="my-dialog-content">
+        <ul class="mdc-list">
+          <li class="mdc-list-item" tabindex="0">
+            <span class="mdc-list-item__graphic">
+              <div class="mdc-radio">
+                <input class="mdc-radio__native-control"
+                       type="radio"
+                       id="test-dialog-baseline-confirmation-radio-1"
+                       name="test-dialog-baseline-confirmation-radio-group"
+                       checked>
+                <div class="mdc-radio__background">
+                  <div class="mdc-radio__outer-circle"></div>
+                  <div class="mdc-radio__inner-circle"></div>
+                </div>
               </div>
-            </div>
-          </span>
-          <label id="test-dialog-baseline-confirmation-radio-1-label"
-                 for="test-dialog-baseline-confirmation-radio-1"
-                 class="mdc-list-item__text">None</label>
-        </li>
-        <!-- ... -->
-      </ul>
-    </section>
-    <footer class="mdc-dialog__actions">
-      <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
-      <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">OK</button>
-    </footer>
+            </span>
+            <label id="test-dialog-baseline-confirmation-radio-1-label"
+                   for="test-dialog-baseline-confirmation-radio-1"
+                   class="mdc-list-item__text">None</label>
+          </li>
+          <!-- ... -->
+        </ul>
+      </div>
+      <footer class="mdc-dialog__actions">
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">OK</button>
+      </footer>
+    </div>
   </div>
   <div class="mdc-dialog__scrim"></div>
 </div>

diff --git a/packages/mdc-dialog/mdc-dialog.scss b/packages/mdc-dialog/mdc-dialog.scss
@@ -156,7 +156,7 @@
   padding: 6px 0 0; // Top padding balances with title height
 }
 
-// stylelint-disable-next-line plugin/selector-bem-pattern
+// stylelint-disable-next-line plugin/selector-bem-pattern, selector-max-specificity
 .mdc-dialog--scrollable .mdc-dialog__content .mdc-list:first-child:last-child {
   // Override default .mdc-list padding for content consisting exclusively of a MDC List
   padding: 0;

diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
@@ -48,9 +48,9 @@
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
           <div class="mdc-dialog__surface">
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
               <div class="test-dialog__content-rect">Alert</div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
                 <span class="test-font--redact-all">Cancel</span>

diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html
@@ -51,9 +51,9 @@
             <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title"><!--
             -->Alert title<!--
           --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect"><p>Alert description</p></div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
                 <span class="test-font--redact-all">Cancel</span>

diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html
@@ -47,9 +47,9 @@
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
           <div class="mdc-dialog__surface">
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect"><p>Alert</p></div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
                 <span class="test-font--redact-all">Cancel</span>

diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html b/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html
@@ -49,7 +49,7 @@
         <div class="mdc-dialog__container">
           <div class="mdc-dialog__surface">
             <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title">Confirmation</h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
 
               <div class="test-dialog__content-rect">
                 <!--
@@ -93,7 +93,7 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title">Confirm
                 </ul>
               </div>
 
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
                 <span class="test-font--redact-all">Cancel</span>

diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-simple.html b/test/screenshot/spec/mdc-dialog/classes/baseline-simple.html
@@ -49,7 +49,7 @@
         <div class="mdc-dialog__container">
           <div class="mdc-dialog__surface">
             <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title--simple">Simple</h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content--simple">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--simple">
 
               <div class="test-dialog__content-rect">
                 <!--
@@ -72,7 +72,7 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title--simple"
                 </ul>
               </div>
 
-            </section>
+            </div>
           </div>
         </div>
       </div>

diff --git a/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html b/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html
@@ -53,7 +53,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
               Published in 1844 and translated by Robin Buss.<br>
               Public domain.<!--
          --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
                 <p>On the <span class="test-font--redact-all">24th</span> of February, 1815, the look-out at Notre-Dame de la Garde
                   signalled the <span class="test-font--redact-all">three-master, the</span> Pharaon from Smyrna, Trieste, and
@@ -68,7 +68,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
                   been built, rigged, and laden at the old Phocee docks, and belongs to an
                   owner of the city.</p>
               </div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
                 <span class="test-font--redact-all">Verbose loquacious button text</span>

diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html b/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html
@@ -53,7 +53,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
               Published in 1844 and translated by Robin Buss.<br>
               Public domain.<!--
          --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
                 <p>On the <span class="test-font--redact-all">24th</span> of February, 1815, the look-out at Notre-Dame de la Garde
                   signalled the <span class="test-font--redact-all">three-master, the</span> Pharaon from Smyrna, Trieste, and
@@ -273,7 +273,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
                   were known that you had conveyed a packet to the marshal, and had
                   conversed with the emperor, it might bring you into trouble.”</p>
               </div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
                 <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>

diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html b/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html
@@ -53,7 +53,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
               Published in 1844 and translated by Robin Buss.<br>
               Public domain.<!--
          --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
                 <p>On the <span class="test-font--redact-all">24th</span> of February, 1815, the look-out at Notre-Dame de la Garde
                   signalled the <span class="test-font--redact-all">three-master, the</span> Pharaon from Smyrna, Trieste, and
@@ -273,7 +273,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
                   were known that you had conveyed a packet to the marshal, and had
                   conversed with the emperor, it might bring you into trouble.”</p>
               </div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
                 <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>

diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-top.html b/test/screenshot/spec/mdc-dialog/classes/overflow-top.html
@@ -53,7 +53,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
               Published in 1844 and translated by Robin Buss.<br>
               Public domain.<!--
          --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
                 <p>On the <span class="test-font--redact-all">24th</span> of February, 1815, the look-out at Notre-Dame de la Garde
                   signalled the <span class="test-font--redact-all">three-master, the</span> Pharaon from Smyrna, Trieste, and
@@ -273,7 +273,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
                   were known that you had conveyed a packet to the marshal, and had
                   conversed with the emperor, it might bring you into trouble.”</p>
               </div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
                 <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>

diff --git a/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html b/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
@@ -53,7 +53,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
               Published in 1844 and translated by Robin Buss.<br>
               Public domain.<!--
          --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
                 <p>On the <span class="test-font--redact-all">24th</span> of February, 1815, the look-out at Notre-Dame de la Garde
                   signalled the <span class="test-font--redact-all">three-master, the</span> Pharaon from Smyrna, Trieste, and
@@ -68,7 +68,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
                   been built, rigged, and laden at the old Phocee docks, and belongs to an
                   owner of the city.</p>
               </div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
                 <span class="test-font--redact-all">Verbose loquacious button text</span>

diff --git a/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html b/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
@@ -53,7 +53,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
               Published in 1844 and translated by Robin Buss.<br>
               Public domain.<!--
          --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
                 <p>On the <span class="test-font--redact-all">24th</span> of February, 1815, the look-out at Notre-Dame de la Garde
                   signalled the <span class="test-font--redact-all">three-master, the</span> Pharaon from Smyrna, Trieste, and
@@ -68,7 +68,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
                   been built, rigged, and laden at the old Phocee docks, and belongs to an
                   owner of the city.</p>
               </div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
                 <span class="test-font--redact-all">Verbose loquacious button text</span>

diff --git a/test/screenshot/spec/mdc-dialog/mixins/corner-radius.html b/test/screenshot/spec/mdc-dialog/mixins/corner-radius.html
@@ -53,7 +53,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
               Published in 1844 and translated by Robin Buss.<br>
               Public domain.<!--
          --></h2>
-            <section class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
+            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
                 <p>On the <span class="test-font--redact-all">24th</span> of February, 1815, the look-out at Notre-Dame de la Garde
                   signalled the <span class="test-font--redact-all">three-master, the</span> Pharaon from Smyrna, Trieste, and
@@ -68,7 +68,7 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
                   been built, rigged, and laden at the old Phocee docks, and belongs to an
                   owner of the city.</p>
               </div>
-            </section>
+            </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
                 <span class="test-font--redact-all">Verbose loquacious button text</span>