TESTING STORY (REMOVE BEFORE MERGE)

Author: weronikaolejniczak

packages/eui/src/components/provider/provider.stories.tsx

@@ -6,14 +6,17 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { SPREAD_STORY_ARGS_MARKER } from '../../../.storybook/addons/code-snippet/constants';
 
-import { EuiPanel } from '../panel';
+import { EuiButton, EuiButtonEmpty } from '../button';
 import { EuiCode } from '../code';
+import { EuiPanel } from '../panel';
+import { EuiPopover } from '../popover';
+import { SPREAD_STORY_ARGS_MARKER } from '../../../.storybook/addons/code-snippet/constants';
 
 import { EuiProvider, EuiProviderProps } from './provider';
+import { EuiToolTip } from '../tool_tip';
 
 const meta: Meta<EuiProviderProps<{}>> = {
   title: 'Theming/EuiProvider',
@@ -121,3 +124,77 @@ export const FontDefaultUnits: Story = {
     </>
   ),
 };
+
+export const ComponentDefaultsPopover: Story = {
+  parameters: {
+    controls: {
+      include: ['componentDefaults'],
+    },
+  },
+  args: {
+    componentDefaults: {
+      EuiPopover: {
+        repositionOnScroll: true,
+      },
+    },
+  },
+  render: function Render() {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+    const openPopover = () => setIsPopoverOpen(true);
+
+    const closePopover = () => setIsPopoverOpen(false);
+
+    const button = (
+      <EuiButtonEmpty iconType="help" iconSide="right" onClick={openPopover}>
+        Show fixed popover
+      </EuiButtonEmpty>
+    );
+
+    return (
+      <div style={{ position: 'relative', overflowY: 'auto', height: '100%' }}>
+        <div style={{ height: 1200 }}>
+          <EuiPopover
+            button={button}
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}
+            style={{ position: 'fixed', bottom: 32, right: 32, zIndex: 10 }}
+          >
+            <div>This popover scrolls with the button element!</div>
+          </EuiPopover>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const ComponentDefaultsTooltip: Story = {
+  parameters: {
+    controls: {
+      include: ['componentDefaults'],
+    },
+  },
+  args: {
+    componentDefaults: {
+      EuiToolTip: {
+        repositionOnScroll: true,
+      },
+    },
+  },
+  render: function Render() {
+    return (
+      <div style={{ position: 'relative', overflowY: 'auto', height: '100%' }}>
+        <div style={{ height: 1200 }}>
+          <div style={{ position: 'fixed', bottom: 32, right: 32, zIndex: 10 }}>
+            <EuiToolTip
+              position="top"
+              content="This tooltip text scrolls with the button element!"
+            >
+              <EuiButton fill>Show fixed tooltip</EuiButton>
+            </EuiToolTip>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};