Add optional border for Image component (#1091)

streamlit · Jun 20, 2024 · 168950f · 168950f
1 parent 811c7ea
commit 168950f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/components/blocks/image.js b/components/blocks/image.js
@@ -3,7 +3,7 @@ import classNames from "classnames";
 
 import styles from "./image.module.css";
 
-const Image = ({ caption, pure, src, alt, clean }) => {
+const Image = ({ caption, pure, src, alt, clean, frame }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const openModal = () => {
@@ -14,6 +14,8 @@ const Image = ({ caption, pure, src, alt, clean }) => {
     setIsOpen(false);
   };
 
+  const borderStyle = frame ? styles.ImageBorder : "";
+
   useEffect(() => {
     const handleEsc = (event) => {
       if (event.keyCode === 27) closeModal();
@@ -46,7 +48,7 @@ const Image = ({ caption, pure, src, alt, clean }) => {
             onClick={openModal}
             src={src}
             alt={alt}
-            className={classNames(captionClass, styles.Image)}
+            className={classNames(captionClass, styles.Image, borderStyle)}
           />
           {customCaption}
         </section>
@@ -78,7 +80,7 @@ const Image = ({ caption, pure, src, alt, clean }) => {
         <section className={styles.InnerContainer}>
           <img
             onClick={openModal}
-            className={classNames(captionClass, styles.Image)}
+            className={classNames(captionClass, styles.Image, borderStyle)}
             src={src}
             alt={alt}
           />

diff --git a/components/blocks/image.module.css b/components/blocks/image.module.css
@@ -14,6 +14,14 @@
   @apply max-w-full max-h-screen transition duration-100 ease-in-out hover:opacity-80 cursor-pointer;
 }
 
+.ImageBorder {
+  @apply border-solid border border-gray-90;
+}
+
+:global(.dark) .ImageBorder {
+  @apply border-gray-20;
+}
+
 .Caption {
   @apply italic text-gray-90 pt-2 md:pt-4 text-sm tracking-tight;
 }