@xenide-io/the-old-ui-theme 0.6.13 → 0.6.14

package/dist/suite.js

@@ -1636,17 +1636,17 @@ function SuiteNotificationBell({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     DropdownMenu2,
     {
-      "aria-label": "Notifications",
+      "aria-label": unread > 0 ? `Notifications, ${unread} unread` : "Notifications",
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       align: "end",
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex", children: [
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_iconoir_react3.Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
-        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
-      ] }) }),
+        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pointer-events-none absolute right-0 top-0 z-[1] flex h-4 min-w-4 translate-x-1/2 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
+      ] }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-semibold text-ph-ink", children: "Notifications" }),

package/dist/suite.mjs

@@ -1279,17 +1279,17 @@ function SuiteNotificationBell({
   return /* @__PURE__ */ jsxs7(
     DropdownMenu2,
     {
-      "aria-label": "Notifications",
+      "aria-label": unread > 0 ? `Notifications, ${unread} unread` : "Notifications",
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       align: "end",
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ jsx7("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex", children: [
+      trigger: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: [
         /* @__PURE__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
-        unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
-      ] }) }),
+        unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute right-0 top-0 z-[1] flex h-4 min-w-4 translate-x-1/2 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
+      ] }),
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [
           /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold text-ph-ink", children: "Notifications" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.6.13",
+  "version": "0.6.14",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/suite-notification-bell.test.tsx

@@ -0,0 +1,46 @@
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+import { SuiteNotificationBell } from "./suite-notification-bell";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("SuiteNotificationBell", () => {
+  it("anchors the unread badge to the button corner, not the bell glyph", async () => {
+    render(
+      <SuiteNotificationBell
+        fetchNotifications={async () => ({
+          notifications: [],
+          unread_count: 12,
+        })}
+        markRead={async () => undefined}
+        markAllRead={async () => undefined}
+        dropdownMenu={({ trigger, "aria-label": label, children }) => (
+          <div aria-label={label}>
+            {trigger}
+            {children}
+          </div>
+        )}
+        cacheKey={null}
+      />,
+    );
+
+    const badge = await waitFor(() => {
+      const el = document.querySelector("span.bg-ph-brand");
+      if (!el) throw new Error("missing badge");
+      return el;
+    });
+
+    expect(badge.textContent).toBe("9+");
+    expect(badge.className).toContain("translate-x-1/2");
+    expect(badge.className).not.toContain("-translate-y");
+    expect(badge.parentElement?.className).toContain("h-11");
+    expect(badge.parentElement?.className).toContain("w-11");
+  });
+});

package/src/suite/components/suite-notification-bell.tsx

@@ -170,7 +170,9 @@ export function SuiteNotificationBell({
 
   return (
     <DropdownMenu
-      aria-label="Notifications"
+      aria-label={
+        unread > 0 ? `Notifications, ${unread} unread` : "Notifications"
+      }
       triggerId={triggerId ?? `${dataTest}-trigger`}
       triggerDataTest={triggerDataTest ?? `${dataTest}-trigger`}
       align="end"
@@ -178,15 +180,13 @@ export function SuiteNotificationBell({
       open={open}
       onOpenChange={onOpenChange}
       trigger={
-        <span className="inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
-          <span className="relative inline-flex">
-            <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
-            {unread > 0 ? (
-              <span className="absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface">
-                {unread > 9 ? "9+" : unread}
-              </span>
-            ) : null}
-          </span>
+        <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+          <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
+          {unread > 0 ? (
+            <span className="pointer-events-none absolute right-0 top-0 z-[1] flex h-4 min-w-4 translate-x-1/2 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface">
+              {unread > 9 ? "9+" : unread}
+            </span>
+          ) : null}
         </span>
       }
     >