Merge pull request #1034 from glints-dev/feature/next-alert-position

@next Alert: expose top and right position props
glints-dev · Jun 14, 2024 · 8f4b810 · 8f4b810
2 parents 3438cbd + 9eca37d
commit 8f4b810
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/@next/Alert/Alert.tsx b/src/@next/Alert/Alert.tsx
@@ -17,6 +17,10 @@ export type AlertProps = {
   /** Duration of alert in miliseconds */
   duration?: number;
   zIndex?: number;
+  position?: {
+    top?: string;
+    right?: string;
+  };
   onDismissed?: () => void;
 };
 
@@ -37,6 +41,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       duration = 4000,
       children,
       zIndex,
+      position,
       onDismissed,
     }: AlertProps,
     ref
@@ -74,6 +79,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
         data-titled={hasTitle}
         data-status={status || 'info'}
         zIndex={zIndex}
+        position={position}
       >
         <div>
           <Icon name={iconName} />

diff --git a/src/@next/Alert/AlertStyle.ts b/src/@next/Alert/AlertStyle.ts
@@ -4,10 +4,16 @@ import * as Breakpoints from '../utilities/breakpoints';
 import { Green, Neutral, Blue, Orange, Red } from '../utilities/colors';
 import { space12, space8 } from '../utilities/spacing';
 
-export const StyledAlertContainer = styled.div<{ zIndex?: number }>`
+export const StyledAlertContainer = styled.div<{
+  zIndex?: number;
+  position?: {
+    top?: string;
+    right?: string;
+  };
+}>`
   position: fixed;
-  top: 90px;
-  right: 24px;
+  top: ${props => (props.position?.top ? props.position.top : '90px')};
+  right: ${props => (props.position?.right ? props.position.right : '24px')};
   display: flex;
   padding: ${space12};
   gap: ${space8};