chore: Fixes permutation pages with 0-height blocks (#4251)

Author: pan-kot

pages/box/float-align.page.tsx

@@ -27,10 +27,13 @@ export default function BoxPermutations() {
         <PermutationsView
           permutations={permutations}
           render={permutation => (
-            <Box {...permutation} className={styles['permutation-box']}>
-              {permutation.textAlign && `textAlign:${permutation.textAlign}`}
-              {permutation.float && `float:${permutation.float}`}
-            </Box>
+            // The flow-root is necessary for the float permutations so that the permutation wrapper height is computed correctly.
+            <div style={{ display: 'flow-root' }}>
+              <Box {...permutation} className={styles['permutation-box']}>
+                {permutation.textAlign && `textAlign:${permutation.textAlign}`}
+                {permutation.float && `float:${permutation.float}`}
+              </Box>
+            </div>
           )}
         />
       </ScreenshotArea>

pages/date-range-picker/month-calendar-permutations.page.tsx

@@ -83,33 +83,29 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
 ]);
 
 export default function DateRangePickerCalendarPage() {
-  let i = -1;
   return (
     <PermutationsPage title="Date range picker permutations: month calendar" i18n={{}}>
       <div style={{ blockSize: `${(1 + permutations.length) * 400}px` }}>
         <PermutationsView
           permutations={permutations}
-          render={permutation => {
-            i++;
-            return (
-              <div style={{ insetBlockStart: `${i * 400}px`, position: 'relative' }}>
-                <Dropdown
-                  stretchWidth={true}
-                  stretchHeight={true}
-                  stretchToTriggerWidth={false}
-                  open={true}
-                  onDropdownClose={() => {}}
-                  onMouseDown={() => {}}
-                  trigger={null}
-                  content={
-                    <Box padding="m">
-                      <Calendar {...permutation} />
-                    </Box>
-                  }
-                />
-              </div>
-            );
-          }}
+          render={permutation => (
+            <div style={{ blockSize: '400px' }}>
+              <Dropdown
+                stretchWidth={true}
+                stretchHeight={true}
+                stretchToTriggerWidth={false}
+                open={true}
+                onDropdownClose={() => {}}
+                onMouseDown={() => {}}
+                trigger={null}
+                content={
+                  <Box padding="m">
+                    <Calendar {...permutation} />
+                  </Box>
+                }
+              />
+            </div>
+          )}
         />
       </div>
     </PermutationsPage>

pages/date-range-picker/year-calendar-permutations.page.tsx

@@ -63,33 +63,29 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
 ]);
 
 export default function DateRangePickerCalendarPage() {
-  let i = -1;
   return (
     <PermutationsPage title="Date range picker permutations: year calendar" i18n={{}}>
       <div style={{ blockSize: `${(1 + permutations.length) * 300}px` }}>
         <PermutationsView
           permutations={permutations}
-          render={permutation => {
-            i++;
-            return (
-              <div style={{ insetBlockStart: `${i * 300}px`, position: 'relative' }}>
-                <Dropdown
-                  stretchWidth={true}
-                  stretchHeight={true}
-                  stretchToTriggerWidth={false}
-                  open={true}
-                  onDropdownClose={() => {}}
-                  onMouseDown={() => {}}
-                  trigger={null}
-                  content={
-                    <Box padding="m">
-                      <Calendar {...permutation} granularity="month" />
-                    </Box>
-                  }
-                />
-              </div>
-            );
-          }}
+          render={permutation => (
+            <div style={{ blockSize: '300px' }}>
+              <Dropdown
+                stretchWidth={true}
+                stretchHeight={true}
+                stretchToTriggerWidth={false}
+                open={true}
+                onDropdownClose={() => {}}
+                onMouseDown={() => {}}
+                trigger={null}
+                content={
+                  <Box padding="m">
+                    <Calendar {...permutation} granularity="month" />
+                  </Box>
+                }
+              />
+            </div>
+          )}
         />
       </div>
     </PermutationsPage>

pages/steps/permutations-utils.tsx

@@ -303,8 +303,6 @@ const allStatusesSteps: ReadonlyArray<StepsProps.Step> = [
   },
 ];
 
-const emptySteps: ReadonlyArray<StepsProps.Step> = [];
-
 export const initialStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     status: 'loading',
@@ -754,7 +752,6 @@ export const stepsPermutations = createPermutations<StepsProps>([
       successfulSteps,
       blockedSteps,
       failedSteps,
-      emptySteps,
       allStatusesSteps,
       initialStepsInteractive,
       loadingStepsInteractive,