Overlay enhacements (#35)

* overlay: width * bump: version
datalayer · Sep 1, 2024 · 9ac7260 · 9ac7260
1 parent 8ad89b6
commit 9ac7260
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
@@ -23,9 +23,10 @@
   },
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
-    "@datalayer/icons-react": "0.3.0",
+    "@datalayer/icons-react": "^0.3.2",
     "@primer/octicons-react": "^19.6.0",
-    "@primer/react": "^36.6.0",
+    "@primer/primitives": "^8.2.3",
+    "@primer/react": "^36.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loading-skeleton": "^3.3.1",

diff --git a/src/components/overlay/Overlay.tsx b/src/components/overlay/Overlay.tsx
@@ -1,23 +1,29 @@
 import { useEffect, useState } from 'react';
-import {
-  Button,
-  Overlay as PrimerOverlay,
-  Box
-} from "@primer/react";
+import { Box, IconButton, Overlay as PrimerOverlay } from "@primer/react";
+import { XIcon } from "@primer/octicons-react";
 
 export interface OverlayProps {
+  closeButtonRef?: React.RefObject<HTMLButtonElement>;
+  content: JSX.Element;
   direction: 'left' | 'right';
+  headingRef?: React.RefObject<HTMLHeadingElement>;
   isOpen?: boolean;
+  openButtonRef?: React.RefObject<HTMLButtonElement>;
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-  content: JSX.Element;
-  buttonRef?: React.RefObject<HTMLButtonElement>;
-  confirmButtonRef?: React.RefObject<HTMLButtonElement>;
-  headingRef?: React.RefObject<HTMLHeadingElement>;
+  width: number | string;
 }
 
 const PrimerAddonOverlay = (props: OverlayProps) => {
 
-  const { content, buttonRef, confirmButtonRef, headingRef, isOpen, setIsOpen } = props;
+  const {
+    closeButtonRef,
+    content,
+    headingRef,
+    isOpen,
+    openButtonRef,
+    setIsOpen,
+    width,
+  } = props;
 
   const [direction, _] = useState(props.direction);
   const [top, setTop] = useState(0);
@@ -29,14 +35,14 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
   const closeOverlay = () => setIsOpen!(false);
 
   return (
-    confirmButtonRef && buttonRef ? 
+    closeButtonRef && openButtonRef ? 
     <>
       {isOpen ? 
         direction === 'left' ? 
           <PrimerOverlay
-            initialFocusRef={confirmButtonRef}
-            returnFocusRef={buttonRef}
-            ignoreClickRefs={[buttonRef]}
+            initialFocusRef={closeButtonRef}
+            returnFocusRef={openButtonRef}
+            ignoreClickRefs={[openButtonRef]}
             onEscape={closeOverlay}
             onClickOutside={closeOverlay}
             width="auto"
@@ -46,7 +52,7 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
             <Box sx={{
               /* We need to remove the padding */
               height: `calc(100vh - ${top}px - 8px)`,
-              width: '500px',
+              width,
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
@@ -59,21 +65,22 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
                   width: '100%'
                 }}
               >
-                <Button
-                  ref={confirmButtonRef}
+                <IconButton
+                  variant='invisible'
+                  ref={closeButtonRef}
                   onClick={closeOverlay}
-                >
-                  Close me
-                </Button>
+                  icon={XIcon}
+                  aria-labelledby="close"
+                />
               </Box>
               {content}
             </Box>
           </PrimerOverlay> 
         : 
           <PrimerOverlay
-            initialFocusRef={confirmButtonRef}
-            returnFocusRef={buttonRef}
-            ignoreClickRefs={[buttonRef]}
+            initialFocusRef={closeButtonRef}
+            returnFocusRef={openButtonRef}
+            ignoreClickRefs={[openButtonRef]}
             onEscape={closeOverlay}
             onClickOutside={closeOverlay}
             width="auto"
@@ -85,7 +92,7 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
             <Box sx={{
               /* We need to remove the padding */
               height: `calc(100vh - ${top}px - 8px)`,
-              width: '500px',
+              width,
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
@@ -98,12 +105,13 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
                   width: '100%'
                 }}
               >
-                <Button
-                  ref={confirmButtonRef}
+                <IconButton
+                  variant='invisible'
+                  ref={closeButtonRef}
                   onClick={closeOverlay}
-                >
-                  Close me
-                </Button>
+                  icon={XIcon}
+                  aria-labelledby="close"
+                />
               </Box>
               {content}
             </Box>
@@ -121,4 +129,8 @@ export const Overlay = (props: OverlayProps) => {
   )
 };
 
+Overlay.defaultProps = {
+  width: '500px',
+} as Partial<OverlayProps>;
+
 export default Overlay;
diff --git a/src/components/overlay/stories/Overlay.stories.tsx b/src/components/overlay/stories/Overlay.stories.tsx
@@ -30,8 +30,8 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const confirmButtonRef = useRef<HTMLButtonElement>(null);
+  const openButtonRef = useRef<HTMLButtonElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -43,7 +43,7 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
               <Heading ref={headingRef}>Header</Heading>
             </Box>
             <Box>
-              <Button ref={buttonRef} onClick={() => {
+              <Button ref={openButtonRef} onClick={() => {
                 setIsOpen(!isOpen);
               }}>
                 Open overlay
@@ -52,8 +52,8 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
                 {...props}
                 isOpen={isOpen}
                 setIsOpen={setIsOpen}
-                buttonRef={buttonRef}
-                confirmButtonRef={confirmButtonRef}
+                openButtonRef={openButtonRef}
+                closeButtonRef={closeButtonRef}
                 headingRef={props.direction === 'left' ? headingRef : undefined}
                 />
             </Box>
@@ -66,32 +66,36 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
 
 export const OverlayDayLeft: Story = {
   args: {
-    direction: "left",
     content: <Text>👈 Look, left aligned, no heading.</Text>,
+    direction: "left",
+    width: '500px',
   },
   render: (args) => <ThemedOverlay {...args} colorMode="day" />
 };
 
 export const OverlayDayRight: Story = {
   args: {
-    direction: "right",
     content: <Text>Look, right aligned, on heading 👉</Text>,
+    direction: "right",
+    width: '500px',
   },
   render: (args) => <ThemedOverlay {...args} colorMode="day" />
 };
 
 export const OverlayNightLeft: Story = {
   args: {
-    direction: "left",
     content: <Text>👈 Look, left aligned, no heading.</Text>,
+    direction: "left",
+    width: '300px',
   },
   render: (args) => <ThemedOverlay {...args} colorMode="night" />
 };
 
 export const OverlayNightRight: Story = {
   args: {
+    content: <Text>Look, right aligned, on heading 👉</Text>,
     direction: "right",
-    content: <Text>Look, right aligned, on heading 👉</Text>
+    width: '300px',
   },
   render: (args) => <ThemedOverlay {...args} colorMode="night" />
 };