feat(Modal): remove flex-none from ModalFooter (#3816)

BREAKING CHANGE: visual breaking change on ModalFooter. Flex-none is no longer applied after largeMobile.
kiwicom · Apr 20, 2023 · 8c3637c · 8c3637c
1 parent 2697f32
commit 8c3637c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 9 deletions.
diff --git a/docs/src/__examples__/Modal/FIXED_FOOTER.tsx b/docs/src/__examples__/Modal/FIXED_FOOTER.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FlightDirect } from "@kiwicom/orbit-components/icons";
 import {
+  Box,
   Button,
   Stack,
   Text,
@@ -132,9 +133,9 @@ export default {
           </Stack>
         </ModalSection>
         <ModalFooter>
-          <Stack justify="end">
+          <Box display="flex" justify="end">
             <Button>Save meals</Button>
-          </Stack>
+          </Box>
         </ModalFooter>
       </Modal>
     );

diff --git a/packages/orbit-components/src/ErrorForms.stories.tsx b/packages/orbit-components/src/ErrorForms.stories.tsx
@@ -22,6 +22,7 @@ import TextLink from "./TextLink";
 import Checkbox from "./Checkbox";
 import Radio from "./Radio";
 import Modal, { ModalHeader, ModalSection, ModalFooter } from "./Modal";
+import Box from "./Box";
 
 const objectOptions = [
   { value: 0, label: "Zero-th item" },
@@ -456,7 +457,9 @@ export const withModal = () => {
         <Button iconLeft={<ChevronBackward />} type="secondary">
           Back
         </Button>
-        <Button fullWidth>Proceed to Payment (23.98€)</Button>
+        <Box display="flex" justify="end">
+          <Button>Proceed to Payment (23.98€)</Button>
+        </Box>
       </ModalFooter>
     </Modal>
   );

diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx
@@ -26,6 +26,7 @@ import Checkbox from "../Checkbox";
 import Radio from "../Radio";
 import Tooltip from "../Tooltip";
 import Tile from "../Tile";
+import Box from "../Box";
 
 import Modal, { ModalHeader, ModalSection, ModalFooter } from ".";
 
@@ -508,7 +509,9 @@ export const FullPreview = () => {
               <ButtonLink type="secondary">Button</ButtonLink>
             </Stack>
           )}
-          <Button fullWidth>Continue to Payment</Button>
+          <Box justify="end" display="flex">
+            <Button>Continue to Payment</Button>
+          </Box>
         </ModalFooter>
       </Modal>
     </Container>

diff --git a/packages/orbit-components/src/Modal/ModalFooter/index.tsx b/packages/orbit-components/src/Modal/ModalFooter/index.tsx
@@ -16,10 +16,6 @@ const StyledChild = styled.div<{ flex?: Props["flex"] }>`
     flex: ${flex};
     box-sizing: border-box;
     padding: ${rtlSpacing(`0 ${theme.orbit.spaceXSmall} 0 0`)};
-
-    ${media.largeMobile(css`
-      flex: none;
-    `)};
   `}
 `;
 

diff --git a/packages/orbit-components/src/SkipLink/SkipLink.stories.tsx b/packages/orbit-components/src/SkipLink/SkipLink.stories.tsx
@@ -7,6 +7,7 @@ import Text from "../Text";
 import Card, { CardSection } from "../Card";
 import Stack from "../Stack";
 import Modal, { ModalHeader, ModalSection, ModalFooter } from "../Modal";
+import Box from "../Box";
 import Button from "../Button";
 import Illustration from "../Illustration";
 import ChevronBackward from "../icons/ChevronBackward";
@@ -252,7 +253,9 @@ export const WithinModal = () => (
       <Button iconLeft={<ChevronBackward />} type="secondary">
         Back
       </Button>
-      <Button fullWidth>Proceed to Payment (23.98€)</Button>
+      <Box display="flex" justify="end">
+        <Button>Proceed to Payment (23.98€)</Button>
+      </Box>
     </ModalFooter>
   </Modal>
 );