update description

mondaycom · Oct 29, 2024 · c2516c7 · c2516c7
1 parent 7021e62
commit c2516c7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
@@ -139,7 +139,7 @@ Provides contextual and related information.
 
 ### Animation
 
-The Attention box component consist of enter animation prop to increase user attention.
+The Attention box component consist of enter animation prop to increase user attention. Is highly recommended to use a 200ms delay before the attention box entry motion once the page is fully loaded.
 
 <Canvas of={AttentionBoxStories.AttentionBoxAnimation} />
 

diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
@@ -191,19 +191,26 @@ export const AttentionBoxAnimation = {
     }, []);
     return (
       <>
-        <Button onClick={onClick} kind={Button.kinds.SECONDARY}>
-          Entry animation
-        </Button>
-        {isOpen && (
-          <AttentionBox
-            compact
-            withIconWithoutHeader
-            entryAnimation
-            icon={Info}
-            text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
-            onClose={() => setOpen(false)}
-          />
-        )}
+        <Flex
+          gap={Flex.gaps.MEDIUM}
+          style={{
+            height: "44px"
+          }}
+        >
+          <Button onClick={onClick} kind={Button.kinds.SECONDARY}>
+            Entry animation
+          </Button>
+          {isOpen && (
+            <AttentionBox
+              compact
+              withIconWithoutHeader
+              entryAnimation
+              icon={Info}
+              text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
+              onClose={() => setOpen(false)}
+            />
+          )}
+        </Flex>
       </>
     );
   },