Merge pull request #33615 from storybookjs/viewport-complex-values

Core: Fix handling complex viewport sizes

Author: ghengeveld

code/core/src/manager/components/preview/NumericInput.tsx

@@ -46,6 +46,9 @@ const Wrapper = styled.div<{ after?: ReactNode; before?: ReactNode }>(
         outline: 'none',
       },
     },
+    'input:disabled': {
+      background: 'transparent',
+    },
     'input + div': {
       paddingInline: 0,
       fontSize: 'inherit',
@@ -54,6 +57,10 @@ const Wrapper = styled.div<{ after?: ReactNode; before?: ReactNode }>(
       outline: `2px solid ${theme.color.secondary}`,
       outlineOffset: -2,
     },
+    '&:has(input:disabled)': {
+      background: theme.base === 'light' ? theme.color.lighter : theme.input.background,
+      cursor: 'not-allowed',
+    },
     ...(after && { paddingRight: 2 }),
     ...(before && { paddingLeft: 2 }),
   })

code/core/src/manager/components/preview/Viewport.stories.tsx

@@ -38,6 +38,14 @@ const customViewports = {
     },
     type: 'other',
   },
+  calc: {
+    name: 'Calculated',
+    styles: {
+      height: 'calc(100% - 50px)',
+      width: 'calc(100% - 50px)',
+    },
+    type: 'other',
+  },
 } as ViewportMap;
 
 const meta = preview.meta({
@@ -106,6 +114,7 @@ export const Short = meta.story({
   },
   parameters: {
     viewport: { options: customViewports },
+    chromatic: { disableSnapshot: true },
   },
   render: () => <></>,
 });
@@ -116,6 +125,19 @@ export const Narrow = meta.story({
   },
   parameters: {
     viewport: { options: customViewports },
+    chromatic: { disableSnapshot: true },
+  },
+  render: () => <></>,
+});
+
+export const Calculated = meta.story({
+  globals: {
+    viewport: { value: 'calc' },
+  },
+  parameters: {
+    viewport: { options: customViewports },
+    chromatic: { disableSnapshot: true },
   },
   render: () => <></>,
+  tags: ['!test', '!vitest'], // Vitest browser does not support calculated viewports
 });

code/core/src/manager/components/preview/Viewport.tsx

@@ -197,11 +197,6 @@ const SizeInput = styled(NumericInput)({
   minHeight: 28,
 });
 
-const parseNumber = (value: string) => {
-  const [match, number, unit] = value.match(/^(\d+(?:\.\d+)?)(\%|[a-z]{0,4})?$/) || [];
-  return match ? { number: Number(number), unit } : undefined;
-};
-
 export const Viewport = ({
   active,
   id,
@@ -278,18 +273,20 @@ export const Viewport = ({
   }, [resize, scale]);
 
   const dimensions = useMemo(() => {
-    const { number: nx, unit: ux = 'px' } = parseNumber(width) ?? { number: 0, unit: 'px' };
-    const { number: ny, unit: uy = 'px' } = parseNumber(height) ?? { number: 0, unit: 'px' };
-    const frameWidth = Math.max(VIEWPORT_MIN_WIDTH, nx * scale);
-    const frameHeight = Math.max(VIEWPORT_MIN_HEIGHT, ny * scale);
+    const [, nx = '', ux = 'px'] = width.match(/^(\d+(?:\.\d+)?)(\%|[a-z]{1,4})?$/) || [];
+    const [, ny = '', uy = 'px'] = height.match(/^(\d+(?:\.\d+)?)(\%|[a-z]{1,4})?$/) || [];
     return {
       frame: {
-        width: `${frameWidth}${ux}`,
-        height: `${frameHeight}${uy}`,
+        width: `calc(${width} * ${scale})`,
+        height: `calc(${height} * ${scale})`,
       },
       display: {
-        width: `${nx}${ux === 'px' ? '' : ux}`,
-        height: `${ny}${uy === 'px' ? '' : uy}`,
+        width: `${nx || width}${ux === 'px' ? '' : ux}`,
+        height: `${ny || height}${uy === 'px' ? '' : uy}`,
+      },
+      locked: {
+        width: !nx || !ny,
+        height: !nx || !ny,
       },
     };
   }, [width, height, scale]);
@@ -311,6 +308,7 @@ export const Viewport = ({
               value={width}
               minValue={0}
               setValue={(value) => resize(value, height)}
+              disabled={dimensions.locked.width}
             />
             <ActionList.Button
               key="viewport-rotate"
@@ -333,6 +331,7 @@ export const Viewport = ({
               value={height}
               minValue={0}
               setValue={(value) => resize(width, value)}
+              disabled={dimensions.locked.height}
             />
             {isCustom && lastSelectedOption && (
               <ActionList.Button
@@ -372,19 +371,25 @@ export const Viewport = ({
             </>
           )}
         </div>
-        <DragHandle
-          ref={dragRefX}
-          isDefault={isDefault}
-          data-side="right"
-          data-value={dimensions.display.width}
-        />
-        <DragHandle
-          ref={dragRefY}
-          isDefault={isDefault}
-          data-side="bottom"
-          data-value={dimensions.display.height}
-        />
-        <DragHandle ref={dragRefXY} isDefault={isDefault} data-side="both" />
+        {!dimensions.locked.width && (
+          <DragHandle
+            ref={dragRefX}
+            isDefault={isDefault}
+            data-side="right"
+            data-value={dimensions.display.width}
+          />
+        )}
+        {!dimensions.locked.height && (
+          <DragHandle
+            ref={dragRefY}
+            isDefault={isDefault}
+            data-side="bottom"
+            data-value={dimensions.display.height}
+          />
+        )}
+        {!dimensions.locked.width && !dimensions.locked.height && (
+          <DragHandle ref={dragRefXY} isDefault={isDefault} data-side="both" />
+        )}
       </FrameWrapper>
     </ViewportWrapper>
   );

code/core/src/viewport/useViewport.ts

@@ -179,12 +179,7 @@ export const useViewport = () => {
       const w = width.replace(/px$/, '').replace(/%$/, 'pct');
       const h = height.replace(/px$/, '').replace(/%$/, 'pct');
       const value = isRotated ? `${h}-${w}` : `${w}-${h}`;
-      const [match, vx, ux, vy, uy] = value.match(URL_VALUE_PATTERN) || [];
-
-      // Don't update to pixel values less than 40
-      if (match && (ux || Number(vx) >= 40) && (uy || Number(vy) >= 40)) {
-        update({ value: match, isRotated });
-      }
+      update({ value, isRotated });
     },
     [update, isRotated]
   );