diff --git a/src/documentation/components/FlashNotificationDemo.tsx b/src/documentation/components/FlashNotificationDemo.tsx
index 93a89ddb..84b8a7a9 100644
--- a/src/documentation/components/FlashNotificationDemo.tsx
+++ b/src/documentation/components/FlashNotificationDemo.tsx
@@ -5,22 +5,15 @@ import { Box, Button } from '@chakra-ui/react'
export default function FlashNotificationDemo({
state,
message,
- width,
}: IFlashNotificationProps): JSX.Element {
const { show, active, config } = useFlashNotification({
state: state,
message: message,
- width,
}) as { show: boolean; active: () => void; config: IFlashNotificationProps }
return (
-
+
)
}
diff --git a/src/documentation/pages/Organisms/FlashNotification.tsx b/src/documentation/pages/Organisms/FlashNotification.tsx
index 681d3096..29788889 100644
--- a/src/documentation/pages/Organisms/FlashNotification.tsx
+++ b/src/documentation/pages/Organisms/FlashNotification.tsx
@@ -31,40 +31,6 @@ export const ViewFlashNotification = (): JSX.Element => {
- Ancho y Centrado
-
- Por defecto, la notificación toma un ancho de max-content (se ajusta al texto) y se
- mantiene perfectamente centrada en la parte superior de la pantalla. Si deseas un control
- más específico, puedes pasar un ancho fijo mediante la propiedad width.
-
-
-
-
-
-
-
-// Notificación con ancho fijo
-`}
- />
-
Soporte HTML
La propiedad message admite etiquetas HTML básicas para dar formato al contenido,
diff --git a/src/organisms/Alerts/Alert.tsx b/src/organisms/Alerts/Alert.tsx
index 2815cb72..b2bc773b 100644
--- a/src/organisms/Alerts/Alert.tsx
+++ b/src/organisms/Alerts/Alert.tsx
@@ -71,6 +71,7 @@ export function Alert({
p="1rem"
pr={canDismiss ? '1.75rem' : '1rem'}
position="relative"
+ boxShadow={isFlash ? '0px 2px 8px 0px #5C5C5C33' : ''}
sx={sx}
>
{
// Si no hay un Toaster registrado globalmente en la ventana, esta instancia lo toma.
@@ -53,9 +54,16 @@ export function FlashNotification({
state={state}
canDismiss
onClick={() => toast.dismiss(t.id)}
- width={width}
- maxContent={!width}
m={m}
+ sx={{
+ w: 'initial',
+ maxWidth: 'initial',
+ ...(isMobile && {
+ // La librería agrega un margin por defecto, que no pude quitar.
+ margin: '-4px -10px',
+ borderRadius: 0,
+ }),
+ }}
>
{message}
@@ -65,7 +73,7 @@ export function FlashNotification({
id: alertStates[state].id,
}
)
- }, [message, state, width, m])
+ }, [message, state, m])
useEffect(() => {
if (show) {
@@ -83,9 +91,20 @@ export function FlashNotification({
style: {
background: 'transparent',
boxShadow: 'none',
- maxWidth: width ?? 'max-content',
+ maxWidth: '100vw',
+ padding: 0,
+ margin: 0,
},
}}
+ containerStyle={{
+ left: 0,
+ right: 0,
+ ...(isMobile && {
+ top: 0,
+ }),
+ padding: 0,
+ margin: 0,
+ }}
/>
)}
>
diff --git a/src/organisms/Alerts/types.d.ts b/src/organisms/Alerts/types.d.ts
index d2d48911..05ac4ecb 100644
--- a/src/organisms/Alerts/types.d.ts
+++ b/src/organisms/Alerts/types.d.ts
@@ -76,5 +76,4 @@ export interface IFlashNotificationProps {
*/
state: TState
show?: boolean
- width?: string
}
diff --git a/src/organisms/Alerts/utils/useFlashNotification.ts b/src/organisms/Alerts/utils/useFlashNotification.ts
index 6e0738e3..72908591 100644
--- a/src/organisms/Alerts/utils/useFlashNotification.ts
+++ b/src/organisms/Alerts/utils/useFlashNotification.ts
@@ -19,7 +19,7 @@ import { handleTime } from './handleTime'
*
*/
-export const useFlashNotification = ({ state, message, width }: IFlashNotificationProps): any => {
+export const useFlashNotification = ({ state, message }: IFlashNotificationProps): any => {
// Estado que maneja si la notificación debe mostrarse.
const [show, setShow] = useState(false)
@@ -49,7 +49,6 @@ export const useFlashNotification = ({ state, message, width }: IFlashNotificati
config: {
state,
message,
- width,
},
}
}