fix(form): allow form-footer content to be responsive

This fix allows the form-footer content to be responsive, the buttons and validation message will wrap in smaller screen sizes. When buttons are `fullWidth` the `rightSideButtons` will now render underneath the `saveButton` instead of above. fix #6658
Sage · Sep 20, 2024 · d702e03 · d702e03
1 parent 67f225c
commit d702e03
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 80 deletions.
diff --git a/src/components/form/__internal__/form-summary.style.ts b/src/components/form/__internal__/form-summary.style.ts
@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../../icon/icon.style";
-import StyledButton from "../../button/button.style";
 
 type StyledFormSummaryProps = {
   showSummary?: boolean;
@@ -9,12 +8,11 @@ type StyledFormSummaryProps = {
 
 export const StyledFormSummary = styled.div<StyledFormSummaryProps>`
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  font-size: 13px;
+  justify-content: end;
+  font-size: var(--fontSizes100);
   font-weight: 700;
-  margin: -8px;
-  padding: 8px;
-  white-space: nowrap;
 
   ${({ fullWidth }) =>
     fullWidth &&
@@ -25,21 +23,27 @@ export const StyledFormSummary = styled.div<StyledFormSummaryProps>`
       justify-content: flex-start;
     `}
 
-  ${({ showSummary }) =>
+  ${({ showSummary, fullWidth }) =>
     showSummary &&
     css`
       background-color: var(--colorsUtilityMajor025);
+      border: solid var(--borderWidth100) var(--colorsActionMinor250);
+      border-radius: var(--borderRadius100);
+      margin: calc(-1 * var(--sizing100)) 0;
+      padding: var(--sizing100);
+      gap: var(--sizing125);
+
+      ${fullWidth &&
+      css`
+        margin: 0 calc(-1 * var(--sizing100));
+      `}
     `}
-  ${StyledButton} {
-    margin-right: 0;
-  }
 `;
 
 export const StyledMessagePrefix = styled.div`
   &:first-of-type {
-    margin-left: 4px;
+    margin-left: var(--sizing100);
   }
-  margin-right: 4px;
 `;
 
 export type StyledInternalSummaryProps = {
@@ -49,10 +53,7 @@ export type StyledInternalSummaryProps = {
 export const StyledInternalSummary = styled.div<StyledInternalSummaryProps>`
   display: flex;
   align-items: center;
-  margin-right: 8px;
-  &:last-of-type {
-    margin-right: 16px;
-  }
+  gap: var(--sizing100);
   ${({ type }) =>
     type === "warning" &&
     css`
@@ -65,7 +66,6 @@ export const StyledInternalSummary = styled.div<StyledInternalSummaryProps>`
     `}
 
   ${StyledIcon} {
-    margin-right: 4px;
     ${({ type }) =>
       type === "warning" &&
       css`

diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx
@@ -37,7 +37,7 @@ export default {
   },
 };
 
-export const DefaultWithStickyFooter = () => (
+export const DefaultWithStickyFooter = ({ ...props }) => (
   <Form
     onSubmit={() => console.log("submit")}
     leftSideButtons={
@@ -48,7 +48,7 @@ export const DefaultWithStickyFooter = () => (
         Save
       </Button>
     }
-    stickyFooter
+    {...props}
   >
     <Tabs mb={2}>
       <Tab
@@ -72,6 +72,12 @@ export const DefaultWithStickyFooter = () => (
 );
 
 DefaultWithStickyFooter.storyName = "default";
+DefaultWithStickyFooter.args = {
+  stickyFooter: true,
+  errorCount: 0,
+  warningCount: 0,
+  buttonAlignment: "right",
+};
 
 export const FormAlignmentCustomMarginsTextInputs = () => {
   return (
@@ -485,3 +491,40 @@ MarginTest.parameters = {
   },
   themeProvider: { chromatic: { theme: "sage" } },
 };
+
+export const FullWidthWithLeftAndRight = () => {
+  return (
+    <Form
+      fullWidthButtons
+      onSubmit={() => console.log("submit")}
+      leftSideButtons={
+        <Button onClick={() => console.log("cancel")} fullWidth>
+          Cancel
+        </Button>
+      }
+      saveButton={
+        <Button buttonType="primary" type="submit" fullWidth>
+          Save
+        </Button>
+      }
+      rightSideButtons={
+        <Button onClick={() => console.log("other")} fullWidth>
+          Other
+        </Button>
+      }
+      errorCount={3}
+      warningCount={2}
+    >
+      <Textbox label="Textbox" />
+      <Textbox label="Textbox" />
+    </Form>
+  );
+};
+
+FullWidthWithLeftAndRight.storyName = "left and right fullWith buttons";
+FullWidthWithLeftAndRight.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+  },
+  themeProvider: { chromatic: { theme: "sage" }, viewports: [1200, 900, 320] },
+};
diff --git a/src/components/form/form.component.tsx b/src/components/form/form.component.tsx
@@ -106,14 +106,15 @@ export const Form = ({
           {children}
         </FormSpacingProvider>
       </StyledFormContent>
-      {!fullWidthButtons && renderFooter && (
+      {renderFooter && (
         <StyledFormFooter
           data-element="form-footer"
           data-role="form-footer"
           className={classNames}
           ref={formFooterRef}
           stickyFooter={stickyFooter}
           buttonAlignment={buttonAlignment}
+          fullWidthButtons={fullWidthButtons}
           isInModal={isInModal}
           {...footerPadding}
         >
@@ -126,7 +127,11 @@ export const Form = ({
             </StyledLeftButtons>
           )}
 
-          <FormSummary errorCount={errorCount} warningCount={warningCount}>
+          <FormSummary
+            fullWidth={fullWidthButtons}
+            errorCount={errorCount}
+            warningCount={warningCount}
+          >
             {saveButton}
           </FormSummary>
 
@@ -140,38 +145,6 @@ export const Form = ({
           )}
         </StyledFormFooter>
       )}
-      {fullWidthButtons && renderFooter && (
-        <StyledFormFooter
-          data-element="form-footer"
-          data-role="form-footer"
-          className={classNames}
-          ref={formFooterRef}
-          stickyFooter={stickyFooter}
-          buttonAlignment={buttonAlignment}
-          fullWidthButtons={fullWidthButtons}
-          {...footerPadding}
-        >
-          {leftSideButtons && (
-            <StyledLeftButtons fullWidthButtons={fullWidthButtons}>
-              {leftSideButtons}
-            </StyledLeftButtons>
-          )}
-          {rightSideButtons && (
-            <StyledRightButtons fullWidthButtons={fullWidthButtons}>
-              {rightSideButtons}
-            </StyledRightButtons>
-          )}
-          <StyledFullWidthButtons>
-            <FormSummary
-              fullWidth={fullWidthButtons}
-              errorCount={errorCount}
-              warningCount={warningCount}
-            >
-              {saveButton}
-            </FormSummary>
-          </StyledFullWidthButtons>
-        </StyledFormFooter>
-      )}
     </StyledForm>
   );
 };

diff --git a/src/components/form/form.stories.tsx b/src/components/form/form.stories.tsx
@@ -94,7 +94,7 @@ export const WithFullWidthButtons: Story = () => (
       onSubmit={() => console.log("submit")}
       stickyFooter
       leftSideButtons={
-        <Button mb={3} onClick={() => console.log("cancel")} fullWidth>
+        <Button onClick={() => console.log("cancel")} fullWidth>
           Cancel
         </Button>
       }
@@ -179,6 +179,9 @@ export const WithErrorsSummary: Story = () => (
   </Form>
 );
 WithErrorsSummary.storyName = "With Errors Summary";
+WithErrorsSummary.parameters = {
+  chromatic: { viewports: [1200, 900, 320] },
+};
 
 export const WithWarningsSummary: Story = () => (
   <Form
@@ -197,6 +200,9 @@ export const WithWarningsSummary: Story = () => (
   </Form>
 );
 WithWarningsSummary.storyName = "With Warnings Summary";
+WithWarningsSummary.parameters = {
+  chromatic: { viewports: [1200, 900, 320] },
+};
 
 export const WithBothErrorsAndWarningsSummary: Story = () => (
   <Form
@@ -217,16 +223,17 @@ export const WithBothErrorsAndWarningsSummary: Story = () => (
 );
 WithBothErrorsAndWarningsSummary.storyName =
   "With Both Errors and Warnings Summary";
+WithBothErrorsAndWarningsSummary.parameters = {
+  chromatic: { viewports: [1200, 900, 320] },
+};
 
 export const WithAdditionalButtons: Story = () => (
   <Form
     onSubmit={() => console.log("submit")}
     leftSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Other</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Cancel
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Cancel</Button>
       </>
     }
     saveButton={
@@ -237,9 +244,7 @@ export const WithAdditionalButtons: Story = () => (
     rightSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Reset</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Other
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Other</Button>
       </>
     }
   >
@@ -254,9 +259,7 @@ export const WithButtonsAlignedToTheLeft: Story = () => (
     leftSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Other</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Cancel
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Cancel</Button>
       </>
     }
     saveButton={
@@ -267,9 +270,7 @@ export const WithButtonsAlignedToTheLeft: Story = () => (
     rightSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Reset</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Other
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Other</Button>
       </>
     }
     buttonAlignment="left"

diff --git a/src/components/form/form.style.ts b/src/components/form/form.style.ts
@@ -3,7 +3,6 @@ import styled, { css } from "styled-components";
 import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 
-import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import { FormButtonAlignment } from "./form.config";
 import StyledSearch from "../search/search.style";
@@ -33,6 +32,8 @@ interface ButtonProps extends StyledFormContentProps {
 export const StyledFormFooter = styled.div<ButtonProps>`
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: var(--sizing200);
 
   ${({ buttonAlignment }) =>
     buttonAlignment === "right" &&
@@ -119,13 +120,9 @@ export const StyledForm = styled.form<StyledFormProps>`
 
 export const StyledRightButtons = styled.div<ButtonProps>`
   display: flex;
-  ${({ fullWidthButtons }) =>
-    fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
-  ${({ buttonAlignment }) => buttonAlignment === "left" && "flex-grow: 1"};
+  gap: var(--sizing200);
 
-  ${StyledButton}:last-child {
-    margin-right: 0;
-  }
+  ${({ buttonAlignment }) => buttonAlignment === "left" && "flex-grow: 1;"}
 `;
 
 export const StyledFullWidthButtons = styled.div`
@@ -136,13 +133,8 @@ export const StyledFullWidthButtons = styled.div`
 export const StyledLeftButtons = styled.div<ButtonProps>`
   display: flex;
   justify-content: flex-end;
-  ${({ fullWidthButtons }) =>
-    fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
-  ${({ buttonAlignment }) => buttonAlignment === "right" && "flex-grow: 1"};
-
-  ${StyledButton}:last-child {
-    margin-right: 0;
-  }
+  gap: var(--sizing200);
+  ${({ buttonAlignment }) => buttonAlignment === "right" && "flex-grow: 1;"}
 `;
 
 StyledForm.defaultProps = {

diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx
@@ -162,7 +162,7 @@ test("form summary and footer have correct styles when the `fullWidthButtons` pr
 });
 
 // for coverage: stickyFooter prop styles are covered by Chromatic and Playwright
-test("has the corrrect styles when the `stickyFooter` prop is set", () => {
+test("has the correct styles when the `stickyFooter` prop is set", () => {
   render(
     <Form
       aria-label="form-example"