Refactor CanvasWrap component to use 'show' prop instead of 'display'…

… prop
storybookjs · Feb 7, 2024 · 4e6fc0d · 4e6fc0d
1 parent 99e551d
commit 4e6fc0d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/code/ui/manager/src/components/preview/Preview.tsx b/code/ui/manager/src/components/preview/Preview.tsx
@@ -103,7 +103,7 @@ const Preview = React.memo<PreviewProps>(function Preview(props) {
           />
           <S.FrameWrap key="frame">
             {tabContent && <S.IframeWrapper>{tabContent({ active: true })}</S.IframeWrapper>}
-            <S.CanvasWrap display={!tabId}>
+            <S.CanvasWrap show={!tabId}>
               <Canvas {...{ withLoader, baseUrl }} wrappers={wrappers} />
             </S.CanvasWrap>
           </S.FrameWrap>

diff --git a/code/ui/manager/src/components/preview/utils/components.ts b/code/ui/manager/src/components/preview/utils/components.ts
@@ -16,21 +16,20 @@ export const FrameWrap = styled.div({
   background: 'transparent',
   flex: 1,
 });
-export const CanvasWrap = styled.div<{ display: boolean }>(
+export const CanvasWrap = styled.div<{ show: boolean }>(
   {
     alignContent: 'center',
     alignItems: 'center',
     justifyContent: 'center',
     justifyItems: 'center',
     overflow: 'auto',
-    display: 'grid',
     gridTemplateColumns: '100%',
     gridTemplateRows: '100%',
     position: 'relative',
     width: '100%',
     height: '100%',
   },
-  ({ display }) => (display ? {} : { display: 'none' })
+  ({ show }) => ({ display: show ? 'grid' : 'none' })
 );
 
 export const UnstyledLink = styled(Link)({