[Beta] Auto-expand on inline search (#5019)

beta/src/components/MDX/ExpandableExample.tsx

@@ -22,17 +22,29 @@ function ExpandableExample({
   excerpt,
   type,
 }: ExpandableExampleProps) {
+  const ref = React.useRef<null | HTMLDetailsElement>(null);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const isDeepDive = type === 'DeepDive';
   const isExample = type === 'Example';
 
   return (
-    <div
+    <details
+      open={isExpanded}
+      onToggle={(e: any) => {
+        setIsExpanded(e.target!.open);
+      }}
+      onClick={(e) => {
+        // We toggle using a button instead of this whole area.
+        e.preventDefault();
+      }}
+      ref={ref}
       className={cn('my-12 rounded-lg shadow-inner relative', {
         'dark:bg-opacity-20 dark:bg-purple-60 bg-purple-5': isDeepDive,
         'dark:bg-opacity-20 dark:bg-yellow-60 bg-yellow-5': isExample,
       })}>
-      <div className="p-8">
+      <summary
+        className="list-none p-8"
+        tabIndex={-1 /* there's a button instead */}>
         <h5
           className={cn('mb-4 uppercase font-bold flex items-center text-sm', {
             'dark:text-purple-30 text-purple-50': isDeepDive,
@@ -71,16 +83,15 @@ function ExpandableExample({
           </span>
           {isExpanded ? 'Hide Details' : 'Show Details'}
         </Button>
-      </div>
+      </summary>
       <div
         className={cn('p-8 border-t', {
           'dark:border-purple-60 border-purple-10 ': isDeepDive,
           'dark:border-yellow-60 border-yellow-50': isExample,
-          hidden: !isExpanded,
         })}>
         {children}
       </div>
-    </div>
+    </details>
   );
 }
 

beta/src/styles/index.css

@@ -143,6 +143,10 @@
     max-width: calc(min(700px, 100%));
   }
 
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
   @keyframes nav-fadein {
     from {
       opacity: 0.5;