rm DeleteWizardStepContent

TheSonOfThomp · TheSonOfThomp · commit 4e72a37ac0b2 · 2025-11-25T13:43:23.000-05:00
diff --git a/templates/delete-wizard/src/DeleteWizard.stories.tsx b/templates/delete-wizard/src/DeleteWizard.stories.tsx
@@ -78,36 +78,32 @@ export const LiveExample: StoryObj<typeof DeleteWizard> = {
               margin-inline: 72px;
             `}
           />
-          <DeleteWizard.Step requiresAcknowledgement>
-            <DeleteWizard.StepContent>
-              <ExampleStepContent
-                index={0}
-                description={demoSteps[0].description}
-                content={demoSteps[0].content.split('\n').map((p, i) => (
-                  <Body key={i}>{p}</Body>
-                ))}
-              />
-            </DeleteWizard.StepContent>
+          <DeleteWizard.Step>
+            <ExampleStepContent
+              index={0}
+              description={demoSteps[0].description}
+              content={demoSteps[0].content.split('\n').map((p, i) => (
+                <Body key={i}>{p}</Body>
+              ))}
+            />
             <DeleteWizard.Footer
               cancelButtonText="Cancel wizard"
               primaryButtonText="Continue to next step"
             />
           </DeleteWizard.Step>
 
           <DeleteWizard.Step requiresAcknowledgement>
-            <DeleteWizard.StepContent>
-              <ExampleStepContent
-                index={1}
-                description={demoSteps[1].description}
-                content={demoSteps[1].content.split('\n').map((p, i) => (
-                  <Body key={i}>{p}</Body>
-                ))}
-              />
-            </DeleteWizard.StepContent>
+            <ExampleStepContent
+              index={1}
+              description={demoSteps[1].description}
+              content={demoSteps[1].content.split('\n').map((p, i) => (
+                <Body key={i}>{p}</Body>
+              ))}
+            />
             <DeleteWizard.Footer
               backButtonText="Go back"
               cancelButtonText="Cancel wizard"
-              primaryButtonText="Delete the prop"
+              primaryButtonText="Delete the thing"
             />
           </DeleteWizard.Step>
         </DeleteWizard>
diff --git a/templates/delete-wizard/src/DeleteWizard/DeleteWizard.tsx b/templates/delete-wizard/src/DeleteWizard/DeleteWizard.tsx
@@ -14,7 +14,6 @@ import { DeleteWizardContextProvider } from './DeleteWizardContext';
 import { DeleteWizardFooter } from './DeleteWizardFooter';
 import { DeleteWizardHeader } from './DeleteWizardHeader';
 import { DeleteWizardStep } from './DeleteWizardStep';
-import { DeleteWizardStepContent } from './DeleteWizardStepContents';
 
 /**
  * The parent DeleteWizard component.
@@ -54,11 +53,6 @@ export const DeleteWizard = CompoundComponent(
      */
     Step: DeleteWizardStep,
 
-    /**
-     * A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning
-     */
-    StepContent: DeleteWizardStepContent,
-
     /**
      * A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template.
      * Render this inside of each Step with the relevant button props for that Step.
diff --git a/templates/delete-wizard/src/DeleteWizard/DeleteWizardStep.tsx b/templates/delete-wizard/src/DeleteWizard/DeleteWizardStep.tsx
@@ -1,22 +1,60 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
-import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
+import {
+  CompoundSubComponent,
+  filterChildren,
+  findChild,
+} from '@leafygreen-ui/compound-component';
+import { css, cx } from '@leafygreen-ui/emotion';
 import {
   useWizardStepContext,
   Wizard,
   WizardStepProps,
+  WizardSubComponentProperties,
 } from '@leafygreen-ui/wizard';
 
 import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
 
 export const useDeleteWizardStepContext = useWizardStepContext;
 
+export interface DeleteWizardStepProps
+  extends WizardStepProps,
+    ComponentProps<'div'> {}
 /**
  * A wrapper around Wizard.Step
  */
 export const DeleteWizardStep = CompoundSubComponent(
-  (props: WizardStepProps) => {
-    return <Wizard.Step {...props} />;
+  ({
+    children,
+    className,
+    requiresAcknowledgement,
+    ...rest
+  }: DeleteWizardStepProps) => {
+    const footerChild = findChild(
+      children,
+      WizardSubComponentProperties.Footer,
+    );
+
+    const restChildren = filterChildren(children, [
+      WizardSubComponentProperties.Footer,
+    ]);
+
+    return (
+      <Wizard.Step requiresAcknowledgement={requiresAcknowledgement} {...rest}>
+        <div
+          className={cx(
+            css`
+              flex-grow: 1;
+            `,
+            className,
+          )}
+          {...rest}
+        >
+          {restChildren}
+        </div>
+        {footerChild}
+      </Wizard.Step>
+    );
   },
   {
     displayName: 'DeleteWizardStep',
diff --git a/templates/delete-wizard/src/DeleteWizard/DeleteWizardStepContents.tsx b/templates/delete-wizard/src/DeleteWizard/DeleteWizardStepContents.tsx
