test

primer · Nov 25, 2024 · 4ea3678 · 4ea3678
1 parent b7fdfec
commit 4ea3678
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 18 deletions.
diff --git a/e2e/components/Overlay.test.ts b/e2e/components/Overlay.test.ts
@@ -142,6 +142,9 @@ test.describe('Overlay ', () => {
               globals: {
                 colorScheme: theme,
               },
+              args: {
+                open: true,
+              },
             })
             await story.setup(page)
 

diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useRef, useCallback} from 'react'
-import type {Meta} from '@storybook/react'
+import type {Args, Meta} from '@storybook/react'
 import {TriangleDownIcon, PlusIcon, IssueDraftIcon, XIcon} from '@primer/octicons-react'
 import {
   Overlay,
@@ -28,6 +28,7 @@ export default {
   args: {
     anchorSide: 'inside-top',
     role: 'dialog',
+    open: false,
   },
   argTypes: {
     anchorSide: {
@@ -49,6 +50,10 @@ export default {
     role: {
       type: 'string',
     },
+    open: {
+      control: false,
+      visible: false,
+    },
   },
 } as Meta
 
@@ -58,7 +63,7 @@ interface OverlayProps {
   right?: boolean
 }
 
-export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
+export const DropdownOverlay = ({anchorSide, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -67,7 +72,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
       <Button ref={buttonRef} sx={{position: 'relative'}} onClick={() => setIsOpen(!isOpen)}>
         open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         <Overlay
           returnFocusRef={buttonRef}
           height="auto"
@@ -94,7 +99,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
   )
 }
 
-export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
+export const DialogOverlay = ({anchorSide, role, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -108,7 +113,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
         open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -137,7 +142,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
   )
 }
 
-export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
+export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const [isSecondaryOpen, setIsSecondaryOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -164,7 +169,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
         open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -223,7 +228,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
   )
 }
 
-export const MemexNestedOverlays = ({role}: OverlayProps) => {
+export const MemexNestedOverlays = ({role, open}: Args) => {
   const [overlayOpen, setOverlayOpen] = React.useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -243,7 +248,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => {
           icon={TriangleDownIcon}
         />
       </ButtonGroup>
-      {overlayOpen && (
+      {(overlayOpen || open) && (
         <Overlay
           width="auto"
           onEscape={() => setOverlayOpen(false)}
@@ -296,7 +301,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => {
   )
 }
 
-export const NestedOverlays = ({role}: OverlayProps) => {
+export const NestedOverlays = ({role, open}: Args) => {
   const [listOverlayOpen, setListOverlayOpen] = React.useState(false)
   const [createListOverlayOpen, setCreateListOverlayOpen] = React.useState(false)
 
@@ -332,7 +337,7 @@ export const NestedOverlays = ({role}: OverlayProps) => {
           icon={TriangleDownIcon}
         />
       </ButtonGroup>
-      {listOverlayOpen && (
+      {(listOverlayOpen || open) && (
         <Overlay
           width="medium"
           onEscape={() => setListOverlayOpen(false)}
@@ -409,7 +414,7 @@ export const NestedOverlays = ({role}: OverlayProps) => {
   )
 }
 
-export const MemexIssueOverlay = ({role}: OverlayProps) => {
+export const MemexIssueOverlay = ({role, open}: Args) => {
   const [overlayOpen, setOverlayOpen] = React.useState(false)
   const linkRef = useRef<HTMLAnchorElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -448,7 +453,7 @@ export const MemexIssueOverlay = ({role}: OverlayProps) => {
       >
         <IssueDraftIcon /> {title}
       </Link>
-      {overlayOpen && (
+      {(overlayOpen || open) && (
         <Overlay
           height="auto"
           width="auto"
@@ -523,7 +528,7 @@ export const MemexIssueOverlay = ({role}: OverlayProps) => {
   )
 }
 
-export const PositionedOverlays = ({right, role}: OverlayProps) => {
+export const PositionedOverlays = ({right, role, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const [direction, setDirection] = useState<'left' | 'right'>(right ? 'right' : 'left')
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -561,7 +566,7 @@ export const PositionedOverlays = ({right, role}: OverlayProps) => {
       >
         Open right overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         direction === 'left' ? (
           <Overlay
             initialFocusRef={confirmButtonRef}

diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -214,7 +214,7 @@ export default {
   },
 } as Meta<ComponentProps<typeof Overlay>>
 
-export const Default = () => {
+export const Default = (args: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const confirmButtonRef = useRef<HTMLButtonElement>(null)
@@ -235,7 +235,7 @@ export const Default = () => {
       >
         Open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || args.open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -276,6 +276,15 @@ export const Default = () => {
     </Box>
   )
 }
+Default.args = {
+  open: false,
+}
+Default.argTypes = {
+  open: {
+    control: false,
+    visible: false,
+  },
+}
 export const Playground = (args: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -297,7 +306,7 @@ export const Playground = (args: Args) => {
       >
         Open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || args.open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -351,6 +360,7 @@ Playground.args = {
   preventOverflow: 'false',
   role: 'dialog',
   visibility: 'visible',
+  open: false,
 }
 Playground.argTypes = {
   width: {
@@ -383,6 +393,7 @@ Playground.argTypes = {
   },
   open: {
     control: false,
+    visible: false,
   },
   portalContainerName: {
     control: false,