Merge pull request #25951 from storybookjs/jeppe/25946-bug-warning-re…

…ceived-true-for-a-non-boolean-attribute-display UI: Fix `display=true` warning in console
storybookjs · Feb 7, 2024 · b6425f5 · b6425f5
2 parents 99e551d + 4e6fc0d
commit b6425f5
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)({