fix(platform): Fix expandable state (#13736)

The previous approach was not working on safari, so we just
conditionally render the icon altogether now.

Author: chargome

src/components/expandable/index.tsx

@@ -57,6 +57,7 @@ export function Expandable({title, level = 'info', children, permalink, group}:
 
   function toggleIsExpanded(event: React.MouseEvent<HTMLDetailsElement>) {
     const newVal = event.currentTarget.open;
+    setIsExpanded(newVal);
 
     if (id) {
       if (newVal) {
@@ -65,26 +66,22 @@ export function Expandable({title, level = 'info', children, permalink, group}:
         window.history.pushState({}, '', '#');
       }
     }
-
-    setIsExpanded(newVal);
   }
 
   return (
     <details
       name={group}
       className={`${styles.expandable} callout !block ${'callout-' + level}`}
       open={isExpanded}
-      // We only need this to keep the URL hash in sync
-      onToggle={id ? toggleIsExpanded : undefined}
+      onToggle={toggleIsExpanded}
       id={id}
     >
       <summary className={`${styles['expandable-header']} callout-header`}>
-        <ChevronDownIcon
-          className={`${styles['expandable-icon-expanded']} callout-icon`}
-        />
-        <ChevronRightIcon
-          className={`${styles['expandable-icon-collapsed']} callout-icon`}
-        />
+        {isExpanded ? (
+          <ChevronDownIcon className="callout-icon" />
+        ) : (
+          <ChevronRightIcon className="callout-icon" />
+        )}
         <div>{title}</div>
       </summary>
       <div className={`${styles['expandable-body']} callout-body content-flush-bottom`}>

src/components/expandable/style.module.scss

@@ -8,7 +8,8 @@
 .expandable-body {
   margin-left: 1.6rem;
 
-  & ul, & ol {
+  & ul,
+  & ol {
     padding-left: 1.2rem;
   }
 }
@@ -21,12 +22,4 @@
   &:not(:open) .expandable-header {
     margin-bottom: 0;
   }
-
-  &:open .expandable-icon-collapsed {
-    display: none;
-  }
-
-  &:not(:open) .expandable-icon-expanded {
-    display: none;
-  }
 }