fix(pf4): wix wizard buttons layout

Author: Hyperkid123

packages/common/config/webpack.config.js

@@ -26,6 +26,9 @@ const devConfig = {
       process: 'process/browser.js'
     })
   ],
+  devServer: {
+    port: 3000,
+  },
   module: {
     rules: [
       {

packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, ActionList, ActionListGroup, ActionListItem } from '@patternfly/react-core';
 import selectNext from '@data-driven-forms/common/wizard/select-next';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
 
@@ -30,43 +30,53 @@ const WizardStepButtons = ({
   conditionalSubmitFlag,
 }) => (
   <footer className={`pf-v6-c-wizard__footer ${buttonsClassName ? buttonsClassName : ''}`}>
-    {Buttons ? (
-      <Buttons
-        disableBack={disableBack}
-        handlePrev={handlePrev}
-        nextStep={nextStep}
-        handleNext={handleNext}
-        buttonsClassName={buttonsClassName}
-        buttonLabels={{ cancel, submit, back, next }}
-        renderNextButton={(args) => (
-          <NextButton {...formOptions} handleNext={handleNext} nextStep={nextStep} nextLabel={next} submitLabel={submit} {...args} />
-        )}
-        selectNext={selectNext}
-      />
-    ) : (
-      <FormSpy>
-        {() => (
-          <React.Fragment>
-            <NextButton
-              {...formOptions}
-              conditionalSubmitFlag={conditionalSubmitFlag}
-              handleNext={handleNext}
-              nextStep={nextStep}
-              nextLabel={next}
-              submitLabel={submit}
-            />
-            <Button type="button" variant="secondary" isDisabled={disableBack} onClick={handlePrev}>
-              {back}
-            </Button>
-            <div className="pf-v6-c-wizard__footer-cancel">
-              <Button type="button" variant="link" onClick={formOptions.onCancel}>
-                {cancel}
-              </Button>
-            </div>
-          </React.Fragment>
-        )}
-      </FormSpy>
-    )}
+    <ActionList>
+      {Buttons ? (
+        <Buttons
+          disableBack={disableBack}
+          handlePrev={handlePrev}
+          nextStep={nextStep}
+          handleNext={handleNext}
+          buttonsClassName={buttonsClassName}
+          buttonLabels={{ cancel, submit, back, next }}
+          renderNextButton={(args) => (
+            <NextButton {...formOptions} handleNext={handleNext} nextStep={nextStep} nextLabel={next} submitLabel={submit} {...args} />
+          )}
+          selectNext={selectNext}
+        />
+      ) : (
+        <FormSpy>
+          {() => (
+            <React.Fragment>
+              <ActionListGroup>
+                <ActionListItem>
+                  <NextButton
+                    {...formOptions}
+                    conditionalSubmitFlag={conditionalSubmitFlag}
+                    handleNext={handleNext}
+                    nextStep={nextStep}
+                    nextLabel={next}
+                    submitLabel={submit}
+                  />
+                </ActionListItem>
+                <ActionListItem>
+                  <Button type="button" variant="secondary" isDisabled={disableBack} onClick={handlePrev}>
+                    {back}
+                  </Button>
+                </ActionListItem>
+              </ActionListGroup>
+              <ActionListGroup>
+                <ActionListItem>
+                  <Button type="button" variant="link" onClick={formOptions.onCancel}>
+                    {cancel}
+                  </Button>
+                </ActionListItem>
+              </ActionListGroup>
+            </React.Fragment>
+          )}
+        </FormSpy>
+      )}
+    </ActionList>
   </footer>
 );