Merge pull request #3877 from Royal-Navy/fix/alert-optional-dismiss-s…

…tyling fix(Alert): Prevent constained text with hideDismiss
Royal-Navy · Sep 16, 2024 · 83eb6af · 83eb6af
2 parents e40ab6c + 2ad5ab8
commit 83eb6af
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 50 deletions.
diff --git a/packages/react-component-library/src/components/Alert/Alert.tsx b/packages/react-component-library/src/components/Alert/Alert.tsx
@@ -13,7 +13,6 @@ import { StyledIcon } from './partials/StyledIcon'
 import { StyledContent } from './partials/StyledContent'
 import { StyledTitle } from './partials/StyledTitle'
 import { StyledDescription } from './partials/StyledDescription'
-import { StyledFooter } from './partials/StyledFooter'
 import { StyledCloseButton } from './partials/StyledCloseButton'
 import { useExternalId } from '../../hooks/useExternalId'
 import { ValueOf } from '../../helpers'
@@ -84,6 +83,7 @@ export const Alert = ({
       aria-labelledby={title ? titleId : undefined}
       role="alert"
       $hideBorder={hideBorder}
+      $hideDismiss={hideDismiss}
       {...rest}
     >
       <StyledIcon
@@ -100,14 +100,10 @@ export const Alert = ({
           </StyledTitle>
         )}
         <StyledDescription id={descriptionId}>{children}</StyledDescription>
-        <StyledFooter>
-          {!hideDismiss && (
-            <StyledCloseButton onClick={handleOnClose}>
-              Dismiss
-            </StyledCloseButton>
-          )}
-        </StyledFooter>
       </StyledContent>
+      {!hideDismiss && (
+        <StyledCloseButton onClick={handleOnClose}>Dismiss</StyledCloseButton>
+      )}
     </StyledAlert>
   )
 }
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledAlert.tsx b/packages/react-component-library/src/components/Alert/partials/StyledAlert.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { mq, spacing, shadow } from '@royalnavy/design-tokens'
+import { spacing, shadow, mq } from '@royalnavy/design-tokens'
 
 import { AlertVariantType } from '../Alert'
 
@@ -16,6 +16,7 @@ import {
 interface StyledAlertProps {
   $variant: AlertVariantType
   $hideBorder?: boolean
+  $hideDismiss?: boolean
 }
 
 const STATE_VARIANT_MAP = {
@@ -42,18 +43,21 @@ const getBorderStyles = ({ $hideBorder }: StyledAlertProps) => {
 }
 
 export const StyledAlert = styled.div<StyledAlertProps>`
-  background-color: ${ALERT_BACKGROUND_COLOR};
-  padding: ${spacing('4')} ${spacing('4')} ${spacing('4')} ${spacing('6')};
   position: relative;
   display: flex;
-  align-items: flex-start;
-
-  ${getBorderStyles}
+  align-items: stretch;
+  flex-wrap: wrap;
+  background-color: ${ALERT_BACKGROUND_COLOR};
+  padding: ${spacing('4')};
+  padding-left: ${spacing('10')};
 
   ${mq({ gte: 'xs' })`
-    padding-right: ${spacing('18')};
+    flex-wrap: unset;
+    padding: ${spacing('4')};
   `}
 
+  ${getBorderStyles}
+
   &::before {
     content: '';
     position: absolute;

diff --git a/packages/react-component-library/src/components/Alert/partials/StyledCloseButton.tsx b/packages/react-component-library/src/components/Alert/partials/StyledCloseButton.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { breakpoint, fontSize, spacing } from '@royalnavy/design-tokens'
+import { fontSize, spacing, mq } from '@royalnavy/design-tokens'
 
 import {
   ALERT_CLOSE_COLOR,
@@ -9,26 +9,22 @@ import {
 } from '../constants'
 
 export const StyledCloseButton = styled.button`
-  margin-left: auto;
+  flex-basis: 100%;
   border: none;
   font-size: ${fontSize('base')};
   color: ${ALERT_CLOSE_COLOR};
   font-weight: 600;
   transition: all 0.3s;
   border-radius: 2px;
-  padding: ${spacing('4')} ${spacing('10')};
-  background-color: ${ALERT_CLOSE_BACKGROUND_COLOR_HOVER};
+  padding: ${spacing('4')};
+  margin-top: ${spacing('4')};
+  background-color: ${ALERT_CLOSE_BACKGROUND_COLOR};
+  text-align: center;
 
-  @media only screen and (min-width: ${breakpoint('xs').breakpoint}) {
-    position: absolute;
-    background-color: ${ALERT_CLOSE_BACKGROUND_COLOR};
-    margin-top: 0;
-    top: ${spacing('4')};
-    right: ${spacing('4')};
-    bottom: ${spacing('4')};
-    padding: ${spacing('2')};
-    width: ${spacing('17')};
-  }
+  ${mq({ gte: 'xs' })`
+    flex-basis: auto;
+    width: ${spacing('18')};
+  `}
 
   &:hover {
     background-color: ${ALERT_CLOSE_BACKGROUND_COLOR_HOVER};

diff --git a/packages/react-component-library/src/components/Alert/partials/StyledContent.tsx b/packages/react-component-library/src/components/Alert/partials/StyledContent.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import { spacing } from '@royalnavy/design-tokens'
 
 export const StyledContent = styled.div`
-  width: 100%;
-  padding: ${spacing('4')} ${spacing('4')} ${spacing('4')} 0;
+  flex: 1 1 auto;
+  padding: ${spacing('4')} ${spacing('4')} ${spacing('4')} ${spacing('2')};
+  min-width: 0;
 `
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledFooter.tsx b/packages/react-component-library/src/components/Alert/partials/StyledFooter.tsx
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledIcon.tsx b/packages/react-component-library/src/components/Alert/partials/StyledIcon.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { spacing } from '@royalnavy/design-tokens'
+import { spacing, mq } from '@royalnavy/design-tokens'
 
 import { AlertVariantType } from '../Alert'
 
@@ -24,8 +24,12 @@ const ICON_VARIANT_MAP = {
 
 export const StyledIcon = styled.div<StyledIconProps>`
   display: inline-flex;
-  align-self: flex-start;
+  align-self: stretch;
+  flex: 0 0 auto;
   color: ${({ $variant }) => ICON_VARIANT_MAP[$variant]};
-  padding: ${spacing('4')} ${spacing('5')} ${spacing('4')} ${spacing('6')};
   transform: translateY(1px);
+
+  ${mq({ gte: 'xs' })`
+    padding: ${spacing('4')} ${spacing('4')} 0 ${spacing('8')};
+  `}
 `