From aa764fa322bdda88187e0a32111f1d62f60a9ad6 Mon Sep 17 00:00:00 2001
From: m7kvqbe1 <48086589+m7kvqbe1@users.noreply.github.com>
Date: Fri, 14 May 2021 11:26:59 +0100
Subject: [PATCH] fix(Modal): Resolve incorrect use of ButtonGroup wrapper

---
 .../src/components/Modal/Footer.tsx           | 35 +++++++++----------
 .../Modal/partials/StyledButtonGroup.tsx      | 19 ----------
 2 files changed, 16 insertions(+), 38 deletions(-)
 delete mode 100644 packages/react-component-library/src/components/Modal/partials/StyledButtonGroup.tsx

diff --git a/packages/react-component-library/src/components/Modal/Footer.tsx b/packages/react-component-library/src/components/Modal/Footer.tsx
index a53bb336fc..c052a5bcf0 100644
--- a/packages/react-component-library/src/components/Modal/Footer.tsx
+++ b/packages/react-component-library/src/components/Modal/Footer.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { BUTTON_VARIANT, ButtonProps } from '../Button'
-import { StyledButtonGroup } from '../ButtonGroup/partials/StyledButtonGroup'
 import { StyledFooter } from './partials/StyledFooter'
 import { StyledPrimaryButton } from './partials/StyledPrimaryButton'
 import { StyledSecondaryButton } from './partials/StyledSecondaryButton'
@@ -30,23 +29,21 @@ export const Footer: React.FC<FooterProps> = ({
         data-testid="modal-tertiary"
       />
     )}
-    <StyledButtonGroup>
-      {secondaryButton && (
-        <StyledSecondaryButton
-          type="button"
-          variant={BUTTON_VARIANT.SECONDARY}
-          {...secondaryButton}
-          data-testid="modal-secondary"
-        />
-      )}
-      {primaryButton && (
-        <StyledPrimaryButton
-          type="button"
-          variant={BUTTON_VARIANT.PRIMARY}
-          {...primaryButton}
-          data-testid="modal-primary"
-        />
-      )}
-    </StyledButtonGroup>
+    {secondaryButton && (
+      <StyledSecondaryButton
+        type="button"
+        variant={BUTTON_VARIANT.SECONDARY}
+        {...secondaryButton}
+        data-testid="modal-secondary"
+      />
+    )}
+    {primaryButton && (
+      <StyledPrimaryButton
+        type="button"
+        variant={BUTTON_VARIANT.PRIMARY}
+        {...primaryButton}
+        data-testid="modal-primary"
+      />
+    )}
   </StyledFooter>
 )
diff --git a/packages/react-component-library/src/components/Modal/partials/StyledButtonGroup.tsx b/packages/react-component-library/src/components/Modal/partials/StyledButtonGroup.tsx
deleted file mode 100644
index 0755f9cb91..0000000000
--- a/packages/react-component-library/src/components/Modal/partials/StyledButtonGroup.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { selectors } from '@royalnavy/design-tokens'
-import styled from 'styled-components'
-
-import { StyledButton } from '../../Button/partials/StyledButton'
-
-const { mq, spacing } = selectors
-
-export const StyledFooter = styled.div`
-  display: flex;
-  flex-direction: column-reverse;
-
-  ${mq({ gte: 'xs' })`
-    flex-direction: row;
-  `}
-
-  ${StyledButton} + ${StyledButton} {
-    margin-bottom: ${spacing('4')};
-  }
-`