-
- {children}
-
+ const actions = (
+
+ {isFullscreenEnabled && (
+
+
+
+ }
+ aria-label="Full screen"
+ onClick={() => {
+ setIsFullscreen(!isFullscreen);
+ }}
+ />
+ )}
-
+
}
aria-label="Copy to clipboard"
- className="vuiCodeCopyButton"
onClick={() => {
navigator.clipboard.writeText(children);
if (onCopy) onCopy();
}}
/>
+
+ );
+
+ const code = (
+
+ {children}
+
+ );
+
+ return (
+
+ {code}
+
+ {actions}
{/* Expose this for tests to assert against. */}
{testId && (
@@ -64,6 +102,30 @@ export const VuiCode = ({ onCopy, language = "none", fullHeight, children = "",
{children}
)}
+
+ {isFullscreen && (
+
{
+ setIsFullscreen(false);
+ }}
+ >
+
+
+
+
+ }
+ aria-label="Exit fullscreen code"
+ onClick={() => setIsFullscreen(false)}
+ />
+ {code}
+
+
+ )}
);
};
diff --git a/src/lib/components/code/_index.scss b/src/lib/components/code/_index.scss
index 5e96028..1d9fdc9 100644
--- a/src/lib/components/code/_index.scss
+++ b/src/lib/components/code/_index.scss
@@ -8,9 +8,9 @@
max-height: 100%;
}
-.vuiCodeCopyButton {
+.vuiCodeActions {
position: absolute;
- right: $sizeXxs;
+ right: $sizeS;
top: $sizeXxs;
}
@@ -31,3 +31,21 @@
white-space: pre-wrap;
font-size: $fontSizeSmall !important;
}
+
+.vuiCodeFullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: $fullscreenZIndex;
+ // PrismJS theme color.
+ background-color: #f5f2f0;
+ overflow: auto;
+}
+
+.vuiCodeFullscreen__closeButton {
+ position: absolute;
+ right: $sizeS;
+ top: $sizeXxs;
+}
diff --git a/src/lib/components/drawer/Drawer.tsx b/src/lib/components/drawer/Drawer.tsx
index c5a0ae3..17678ed 100644
--- a/src/lib/components/drawer/Drawer.tsx
+++ b/src/lib/components/drawer/Drawer.tsx
@@ -80,6 +80,7 @@ export const VuiDrawer = ({ className, color = "primary", title, icon, children,
{onClose && (