Fix modal fading issue

storybookjs · Dec 21, 2024 · 334e635 · 334e635
1 parent cf55526
commit 334e635
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/code/core/src/components/components/Modal/Modal.styled.tsx b/code/core/src/components/components/Modal/Modal.styled.tsx
@@ -37,6 +37,8 @@ export const Overlay = styled.div({
   height: '100%',
   zIndex: 10,
   animation: `${fadeIn} 200ms`,
+  opacity: 1,
+  transition: 'none',
 });
 
 export const Container = styled.div<{ width?: number; height?: number }>(
@@ -55,7 +57,8 @@ export const Container = styled.div<{ width?: number; height?: number }>(
     overflow: 'hidden',
     zIndex: 11,
     animation: `${zoomIn} 200ms`,
-
+    opacity: 1,
+    transition: 'none',
     '&:focus-visible': {
       outline: 'none',
     },
@@ -118,7 +121,7 @@ export const Actions = styled.div({
 export const ErrorWrapper = styled.div(({ theme }) => ({
   maxHeight: 100,
   overflow: 'auto',
-  animation: `${expand} 300ms, ${fadeIn} 300ms`,
+  animation: `${expand} 300ms`,
   backgroundColor: theme.background.critical,
   color: theme.color.lightest,
   fontSize: theme.typography.size.s2,

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json