feat: Add new background property to docs Frame component (#819)

fern-api · May 7, 2024 · db56984 · db56984
1 parent 37455f8
commit db56984
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
@@ -153,7 +153,7 @@ export const Image: FC<ImgProps> = ({ className, src, height, width, disableZoom
     }, [files, src]);
 
     return (
-        <Zoom zoomImg={{ src: fernImageSrc?.url }}>
+        <Zoom zoomImg={{ src: fernImageSrc?.url }} classDialog="custom-backdrop">
             <FernImage src={fernImageSrc} {...rest} />
         </Zoom>
     );

diff --git a/packages/ui/app/src/mdx/components/Frame.tsx b/packages/ui/app/src/mdx/components/Frame.tsx
@@ -1,14 +1,20 @@
+import clsx from "clsx";
 import { FC, PropsWithChildren } from "react";
 
 export declare namespace Frame {
     export interface Props {
         caption?: string;
+        background?: "default" | "subtle";
     }
 }
 
-export const Frame: FC<PropsWithChildren<Frame.Props>> = ({ caption, children }) => {
+export const Frame: FC<PropsWithChildren<Frame.Props>> = ({ caption, background = "default", children }) => {
     return (
-        <figure className="not-prose fern-card relative mb-6 mt-4 overflow-hidden rounded-xl p-2 first:mt-0">
+        <figure
+            className={clsx("not-prose fern-card relative mb-6 mt-4 overflow-hidden rounded-xl p-2 first:mt-0", {
+                "bg-tag-default-soft": background === "subtle",
+            })}
+        >
             <div className="relative flex justify-center overflow-hidden rounded-lg shadow-sm">{children}</div>
             {caption && (
                 <figcaption className="t-muted relative mt-3 flex justify-center px-8 pb-2 pt-0 text-sm">

diff --git a/packages/ui/app/src/next-app/globals.scss b/packages/ui/app/src/next-app/globals.scss
@@ -36,7 +36,7 @@
         -webkit-tap-highlight-color: transparent;
     }
 
-    /* 
+    /*
     html.dark {
         background-color: var(--accent);
     } */
@@ -821,4 +821,8 @@
     .fern-api-property-key {
         @apply font-mono t-default font-semibold text-sm;
     }
+
+    .custom-backdrop [data-rmiz-modal-overlay="visible"] {
+        @apply bg-text-default/20;
+    }
 }