🌉 Minor improvements for handling subfigures

See jupyter-book/mystmd#770

.changeset/strong-masks-cry.md

@@ -0,0 +1,7 @@
+---
+'myst-to-react': patch
+'@myst-theme/jupyter': patch
+'@myst-theme/styles': patch
+---
+
+Improve handling for subfigures

packages/jupyter/src/figure.tsx

@@ -1,6 +1,7 @@
 import { SourceFileKind } from 'myst-spec-ext';
 import { type GenericNode } from 'myst-common';
 import { DEFAULT_RENDERERS, MyST } from 'myst-to-react';
+import classNames from 'classnames';
 import { OutputDecoration } from './decoration.js';
 
 export function Figure({ node }: { node: GenericNode }) {
@@ -11,15 +12,20 @@ export function Figure({ node }: { node: GenericNode }) {
     const placeholder = node.children?.find((child) => child.type === 'image' && child.placeholder);
     const others = node.children?.filter((child) => !(child.type === 'image' && child.placeholder));
     return (
-      <OutputDecoration
-        key={node.key}
-        outputId={output.id}
-        placeholder={placeholder}
-        title={node.source?.title}
-        url={node.source?.url}
+      <figure
+        id={node.html_id || node.identifier || node.key}
+        className={classNames({ subcontainer: node.subcontainer }, node.class)}
       >
-        <MyST ast={others} />
-      </OutputDecoration>
+        <OutputDecoration
+          key={node.key}
+          outputId={output.id}
+          placeholder={placeholder}
+          title={node.source?.title}
+          url={node.source?.url}
+        >
+          <MyST ast={others} />
+        </OutputDecoration>
+      </figure>
     );
   }
   return <Container node={node} />;

packages/myst-to-react/src/basic.tsx

@@ -214,7 +214,10 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
   },
   container({ node }) {
     return (
-      <figure id={node.html_id || node.identifier || node.key} className={classNames(node.class)}>
+      <figure
+        id={node.html_id || node.identifier || node.key}
+        className={classNames({ subcontainer: node.subcontainer }, node.class)}
+      >
         <MyST ast={node.children} />
       </figure>
     );

styles/figures.css

@@ -8,6 +8,13 @@ figure.quote figcaption > p:before {
 figure.code > div {
   margin: 0;
 }
+figure.subcontainer {
+  margin-bottom: 0;
+}
+figure.subcontainer figcaption {
+  margin-top: 0.25em;
+  text-align: center;
+}
 figure figcaption > p {
   margin-top: 0 !important;
   margin-bottom: 0 !important;