chore: fixes after review

packages/orbit-components/src/Modal/Modal.stories.tsx

@@ -89,23 +89,6 @@ Sizes.story = {
   },
 };
 
-export const ModalFooterOnly = () => {
-  const isBackButton = boolean("isBackButton", false);
-  const isNextButton = boolean("isNextButton", true);
-
-  return (
-    <Modal>
-      <ModalSection>
-        The dinosaurs looked at Chuck Norris the wrong way once. You know what happened to them.
-      </ModalSection>
-      <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
-        {isBackButton ? <Button>Back</Button> : null}
-        {isNextButton ? <Button>Next</Button> : null}
-      </ModalFooter>
-    </Modal>
-  );
-};
-
 export const ShortModal = () => {
   const { Container, onClose } = useModal();
   return (

packages/orbit-components/src/Modal/ModalFooter/__tests__/index.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+import ModalFooter from "..";
+import Button from "../../../Button";
+import { getBreakpointWidth } from "../../../utils/mediaQuery";
+import theme from "../../../defaultTheme";
+
+describe("ModalFooter", () => {
+  it("should render save button with flex-end", () => {
+    render(
+      <ModalFooter dataTest="footer">
+        {null}
+        <Button type="primary">Save</Button>
+      </ModalFooter>,
+    );
+
+    expect(screen.getByTestId("footer")).toHaveStyleRule("justify-content", "flex-end", {
+      media: getBreakpointWidth("largeMobile", theme),
+    });
+  });
+
+  it("should render buttons with space-between", () => {
+    render(
+      <ModalFooter dataTest="footer">
+        <Button type="secondary">Cancel</Button>
+        <Button type="primary">Save</Button>
+      </ModalFooter>,
+    );
+
+    expect(screen.getByTestId("footer")).toHaveStyleRule("justify-content", "space-between", {
+      media: getBreakpointWidth("largeMobile", theme),
+    });
+  });
+});

packages/orbit-components/src/Modal/ModalFooter/index.tsx

@@ -68,16 +68,17 @@ StyledModalFooter.defaultProps = {
 const getChildFlex = (flex: Props["flex"], key: number) =>
   Array.isArray(flex) && flex.length !== 1 ? flex[key] || flex[0] : flex;
 
-const wrappedChildren = (children: React.ReactElement<unknown>[], flex: Props["flex"]) => {
+const wrappedChildren = (children: React.ReactNode, flex: Props["flex"]) => {
   return React.Children.map(children, (child, key) => {
+    if (!React.isValidElement(child)) return null;
     return (
       <StyledChild flex={getChildFlex(flex, key)}>
         {React.cloneElement(child, {
-          // @ts-expect-error React.cloneElement issue
+          // @ts-expect-error React.cloneElement  issue
           ref: child.ref
             ? node => {
                 // Call the original ref, if any
-                // @ts-expect-error React.cloneElement issue
+                // @ts-expect-error React.cloneElement  issue
                 const { ref } = child;
                 if (typeof ref === "function") {
                   ref(node);
@@ -95,7 +96,6 @@ const wrappedChildren = (children: React.ReactElement<unknown>[], flex: Props["f
 const ModalFooter = ({ dataTest, children, flex = "0 1 auto" }: Props) => {
   const { isMobileFullPage, setFooterHeight } = React.useContext(ModalContext);
   const containerRef = React.useRef<HTMLDivElement | null>(null);
-  const filteredChildren = React.Children.toArray(children).filter(React.isValidElement);
 
   useModalContextFunctions();
 
@@ -117,9 +117,9 @@ const ModalFooter = ({ dataTest, children, flex = "0 1 auto" }: Props) => {
       ref={containerRef}
       data-test={dataTest}
       isMobileFullPage={isMobileFullPage}
-      childrenLength={React.Children.count(filteredChildren)}
+      childrenLength={React.Children.toArray(children).length}
     >
-      {flex && wrappedChildren(filteredChildren, flex)}
+      {flex && wrappedChildren(children, flex)}
     </StyledModalFooter>
   );
 };

packages/orbit-components/src/Modal/__tests__/index.test.tsx

@@ -35,7 +35,9 @@ describe("Modal", () => {
           header content
         </ModalHeader>
         <ModalSection dataTest="section">section content</ModalSection>
-        <ModalFooter dataTest="footer">footer content</ModalFooter>
+        <ModalFooter dataTest="footer">
+          <p>footer content</p>
+        </ModalFooter>
       </Modal>,
     );