docs(popups): allow opening popups via Storybook controls (#6898)

Fixes #6896

Author: Lukas742

packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx

@@ -1,6 +1,6 @@
 import { isChromatic } from '@sb/utils.js';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button } from '../Button/index.js';
 import { ColorPaletteItem } from '../ColorPaletteItem/index.js';
 import { ColorPalettePopover } from './index.js';
@@ -29,6 +29,11 @@ export const Default: Story = {
     const onButtonClick = () => {
       setOpen((prev) => !prev);
     };
+
+    useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
+
     return (
       <>
         <Button onClick={onButtonClick} ref={btnRef}>

packages/main/src/webComponents/Popover/Popover.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import PopoverVerticalAlign from '@ui5/webcomponents/dist/types/PopoverVerticalAlign.js';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
 import { ListItemStandard } from '../ListItemStandard/index.js';
@@ -41,24 +41,29 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render(args) {
-    const [popoverIsOpen, setPopoverIsOpen] = useState(args.open);
+    const [open, setOpen] = useState(args.open);
+
+    useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
+
     return (
       <>
         <Button
           id={'openPopoverBtn'}
           onClick={() => {
-            setPopoverIsOpen(true);
+            setOpen(true);
           }}
         >
           Open Popover
         </Button>
         <Popover
           {...args}
           onClose={() => {
-            setPopoverIsOpen(false);
+            setOpen(false);
           }}
           opener="openPopoverBtn"
-          open={popoverIsOpen}
+          open={open}
         />
       </>
     );

packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import PopoverVerticalAlign from '@ui5/webcomponents/dist/types/PopoverVerticalAlign.js';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
 import { ListItemStandard } from '../ListItemStandard/index.js';
@@ -42,24 +42,29 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render(args) {
-    const [responsivePopoverIsOpen, setResponsivePopoverIsOpen] = useState(args.open);
+    const [open, setOpen] = useState(args.open);
+
+    useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
+
     return (
       <>
         <Button
           id={'openResponsivePopoverBtn'}
           onClick={() => {
-            setResponsivePopoverIsOpen(true);
+            setOpen(true);
           }}
         >
           Open Popover
         </Button>
         <ResponsivePopover
           {...args}
           onClose={() => {
-            setResponsivePopoverIsOpen(false);
+            setOpen(false);
           }}
           opener="openResponsivePopoverBtn"
-          open={responsivePopoverIsOpen}
+          open={open}
         />
       </>
     );

packages/main/src/webComponents/UserMenu/UserMenu.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Avatar } from '../Avatar/index.js';
 import { ShellBar } from '../ShellBar/index.js';
 import { UserMenuAccount } from '../UserMenuAccount/index.js';
@@ -13,9 +13,7 @@ const meta = {
   argTypes: {
     children: { control: { disable: true } },
     opener: { control: { disable: true } },
-    accounts: { control: { disable: true } },
-    //todo: enable again once `close` event is exposed and the story is adjusted accordingly
-    open: { control: { disable: true } }
+    accounts: { control: { disable: true } }
   },
   args: {
     accounts: (
@@ -60,6 +58,11 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render(args) {
     const userMenuRef = useRef<UserMenuDomRef>(null);
+    const [open, setOpen] = useState(args.open);
+
+    useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
     return (
       <>
         <ShellBar
@@ -76,9 +79,17 @@ export const Default: Story = {
           onProfileClick={(event) => {
             userMenuRef.current.opener = event.detail.targetRef;
             userMenuRef.current.open = true;
+            setOpen(true);
+          }}
+        />
+        <UserMenu
+          ref={userMenuRef}
+          {...args}
+          open={open}
+          onClose={() => {
+            setOpen(false);
           }}
         />
-        <UserMenu ref={userMenuRef} {...args} />
       </>
     );
   }

packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx

@@ -1,6 +1,6 @@
 import { isChromatic } from '@sb/utils.js';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '../Button/index.js';
 import { FilterItem } from '../FilterItem/index.js';
 import { FilterItemOption } from '../FilterItemOption/index.js';
@@ -61,6 +61,11 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: (args) => {
     const [open, setOpen] = useState(args.open);
+
+    useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
+
     return (
       <>
         <Button