refactor(docs-infra): make `<details>` styles more re-usable (#42620)

This commit makes the styling for `<details>` elements (including
expand/collapse actions in their `<summary>`) more re-usable.

PR Close #42620

aio/src/styles/2-modules/api-pages/_api-pages.scss

@@ -10,53 +10,23 @@
   details.overloads {
     box-shadow: none;
 
-    .icon-action-header {
+    > summary {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
       justify-content: space-between;
-
-      a {
-        display: flex;
-      }
-    }
-
-    .detail-contents {
-      padding: 0;
-      border-radius: 2px;
-      box-shadow: none;
-
-      > *:not(hr) {
-        margin: 16px 24px;
-      }
-    }
-
-    summary {
-      height: inherit;
       padding: 0;
 
       h4 {
         margin: 0;
         clear: left;
       }
-      .actions {
-        display: flex;
-        @include mixins.font-size(14);
-      }
-      .show-all {
-        display: initial;
-      }
-      .collapse-all {
-        display: none;
-      }
     }
 
-    &[open] > summary {
+    > .details-content {
-      .show-all {
+      padding: 0;
-        display: none;
+      border-radius: 2px;
-      }
+      box-shadow: none;
-      .collapse-all {
+
-        display: initial;
+      > *:not(hr) {
+        margin: 16px 24px;
       }
     }
   }

aio/src/styles/2-modules/details/_details.scss

@@ -14,6 +14,19 @@
  *   </div>
  * </details>
  * ```
+ *
+ * Optionally, you can use an `.actions` container inside `<summary>` to show expand/collapse
+ * actions and/or a rotating icon:
+ * ```html
+ * <summary>
+ *   <span>Some title</span>
+ *   <span class="actions">
+ *     <span class="action-expand">Show more</span>
+ *     <span class="action-collapse">Show less</span>
+ *     <i class="material-icons expand">expand_more</i>
+ *   </span>
+ * </summary>
+ * ```
  */
 
 details {
@@ -21,33 +34,57 @@ details {
     cursor: pointer;
     @include mixins.font-size(16);
     position: relative;
-    padding: 16px 24px;
+    padding: 16px;
-    height: 16px;
+    height: inherit;
-    display: block; // Remove the built in details marker in FF
+    display: flex; // Remove the built in details marker in FF
+    align-items: center;
     overflow: hidden;
 
     &::-webkit-details-marker {
       display: none; // Remove the built in details marker in webkit
     }
 
-    // Rotate the icon
-    i.material-icons.expand {
-      @include mixins.rotate(0deg);
-
-      @at-root #{selector.replace(&, 'details', 'details[open]')} {
-        @include mixins.rotate(180deg);
-      }
-    }
-
     > h2 {
       margin: 0;
       padding: 0;
       border: none;
       display: inline;
     }
+
+    .actions {
+      align-items: center;
+      display: flex;
+      @include mixins.font-size(14);
+
+      // Show/hide expand and collapse actions.
+      .action-expand {
+        display: initial;
+
+        @at-root #{selector.replace(&, 'details', 'details[open]')} {
+          display: none;
+        }
       }
 
-  .detail-contents {
+      .action-collapse {
+        display: none;
+
+        @at-root #{selector.replace(&, 'details', 'details[open]')} {
+          display: initial;
+        }
+      }
+
+      // Rotate the expand/collapse icon.
+      .material-icons.expand {
+        @include mixins.rotate(0deg);
+
+        @at-root #{selector.replace(&, 'details', 'details[open]')} {
+          @include mixins.rotate(180deg);
+        }
+      }
+    }
+  }
+
+  .details-content {
     padding: 16px 24px;
   }
 }

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -130,16 +130,14 @@
       <td>
         <details class="overloads">
           <summary>
-            <div class="icon-action-header">
             <h4 class="no-anchor">{$ method.overloads.length $} overloads...</h4>
             <span class="actions">
-                  <span class="show-all">Show All</span>
+              <span class="action-expand">Show All</span>
-                  <span class="collapse-all">Hide All</span>
+              <span class="action-collapse">Hide All</span>
               <i class="material-icons expand">expand_more</i>
             </span>
-              </div>
           </summary>
-          <div class="detail-contents">
+          <div class="details-content">
             {% if method.isAbstract %}
               {$ renderOverloadInfo(method, cssClass + '-overload', method) $}
               <hr class="hr-margin fullwidth">