fix(notifications): more visible (#790)

Author: tenphi

.changeset/twelve-phones-admire.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Make toasts and notifications more visible with a colorful border.

src/components/overlays/NewNotifications/Bar/FloatingNotification.tsx

@@ -22,7 +22,7 @@ export type FloatingNotificationProps = {
 const NotificationContainer = tasty({
   styles: {
     overflow: 'hidden',
-    radius: true,
+    radius: '1cr',
     boxShadow: '0 0.5x 2x #shadow',
     pointerEvents: 'auto',
   },

src/components/overlays/NewNotifications/Dialog/NotificationsDialogContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export interface NotificationsDialogContextValue {
+  insideNotificationsDialog: boolean;
+}
+
+export const NotificationsDialogContext =
+  createContext<NotificationsDialogContextValue | null>(null);
+
+export function NotificationsDialogProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <NotificationsDialogContext.Provider
+      value={{ insideNotificationsDialog: true }}
+    >
+      {children}
+    </NotificationsDialogContext.Provider>
+  );
+}
+
+export function useNotificationsDialogContext() {
+  const context = useContext(NotificationsDialogContext);
+  return context?.insideNotificationsDialog ?? false;
+}

src/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.tsx

@@ -14,6 +14,8 @@ import {
 import { useNotificationsObserver } from '../hooks';
 import { CubeNotifyApiPropsWithID } from '../types';
 
+import { NotificationsDialogProvider } from './NotificationsDialogContext';
+
 export type NotificationsDialogTriggerProps = Omit<
   CubeDialogTriggerProps,
   'type'
@@ -56,7 +58,9 @@ export function NotificationsDialog(props: NotificationsDialogProps) {
       </VisuallyHidden>
 
       <StyledDialogContent>
-        <ClearSlots>{children}</ClearSlots>
+        <NotificationsDialogProvider>
+          <ClearSlots>{children}</ClearSlots>
+        </NotificationsDialogProvider>
       </StyledDialogContent>
     </StyledDialog>
   );

src/components/overlays/NewNotifications/NotificationView/NotificationFooter.tsx

@@ -17,8 +17,10 @@ const FooterArea = tasty(ButtonGroup, {
     gridArea: 'footer',
     gap: '1x 2x',
     flow: 'row wrap',
-    '&:not(:empty)': {
-      margin: { '': '0.5x top', 'has-description': '1x top' },
+    margin: {
+      '': '0.5x top',
+      'has-description': '1x top',
+      ':empty': '0',
     },
   },
 });

src/components/overlays/NewNotifications/NotificationView/NotificationView.tsx

@@ -5,6 +5,7 @@ import { useEvent, useTimer } from '../../../../_internal';
 import { tasty } from '../../../../tasty';
 import { ClearSlots, mergeProps } from '../../../../utils/react';
 import { useId } from '../../../../utils/react/useId';
+import { useNotificationsDialogContext } from '../Dialog/NotificationsDialogContext';
 
 import { NotificationCloseButton } from './NotificationCloseButton';
 import { NotificationDescription } from './NotificationDescription';
@@ -36,6 +37,15 @@ const NotificationContainer = tasty({
       '': '0 0 0 4bw #purple-04.0 inset',
       focused: '0 0 0 4bw #purple-04 inset',
     },
+    outline: 0,
+    border: {
+      '': '#border',
+      '[data-type="success"]': '#success.4',
+      '[data-type="danger"]': '#danger.4',
+      '[data-type="attention"]': '#border',
+      // Clear border when inside dialog
+      'inside-dialog': false,
+    },
   },
 });
 
@@ -66,6 +76,9 @@ export const NotificationView = forwardRef(function NotificationView(
   const labelID = useId();
   const descriptionID = useId();
 
+  // Detect if we're inside a NotificationsDialog specifically
+  const insideNotificationsDialog = useNotificationsDialogContext();
+
   const onCloseEvent = useEvent(() => {
     onClose?.();
   });
@@ -95,9 +108,14 @@ export const NotificationView = forwardRef(function NotificationView(
           styles={styles}
           data-id={id}
           data-qa={qa}
+          data-type={type}
           aria-labelledby={labelID}
           aria-describedby={descriptionID}
-          mods={{ focused: isFocusVisible, 'is-dismissible': isDismissible }}
+          mods={{
+            focused: isFocusVisible,
+            'is-dismissible': isDismissible,
+            'inside-dialog': insideNotificationsDialog,
+          }}
         >
           <NotificationIcon icon={icon} type={type} />