@helloimjolopez-pathway/pathway-components 0.2.3 → 0.2.4

package/components/org-switcher/org-switcher.jsx

@@ -513,6 +513,7 @@ function OrgRow({ org, active, onSelect }) {
       onMouseLeave={() => setHov(false)}
       aria-current={active ? "true" : undefined}
       style={{
+        position: "relative",
         display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left",
         padding: "8px 8px", border: "none", cursor: "pointer", borderRadius: 8,
         fontFamily: "inherit",
@@ -520,6 +521,17 @@ function OrgRow({ org, active, onSelect }) {
         transition: noMotion ? "none" : "background var(--motion-duration-2) var(--motion-easing-standard)",
       }}
     >
+      {/* indicator.stripe on the selected row, as OrgSwitcher.Row State=Selected
+          draws it (40018011:16090): 4 wide, 44 tall, right corners rounded 8,
+          Fill/Action/Selection/Indicator. The same stripe as the side nav. */}
+      {active && (
+        <span aria-hidden="true" style={{
+          position: "absolute", left: 0, top: "50%", transform: "translateY(-50%)",
+          width: 4, height: 44,
+          borderRadius: "0 var(--semantic-layout-units-cornerradius-base) var(--semantic-layout-units-cornerradius-base) 0",
+          background: "var(--semantic-color-fill-action-selection-indicator)",
+        }} />
+      )}
       {/* Logo tile, org initials on brand fill (falls back from a logo image) */}
       <div style={{
         width: 44, height: 44, borderRadius: 6, flexShrink: 0, background: PANEL_T.logoBg,
@@ -538,7 +550,8 @@ function OrgRow({ org, active, onSelect }) {
         <ModuleCluster />
       </div>
       {/* Trailing chevron */}
-      <Icon name="chevron_right" size={20} style={{ color: PANEL_T.icon, flexShrink: 0 }} />
+      {/* 12, as OrgSwitcher.Row's trailing chevron in Figma. Was 20. */}
+      <Icon name="chevron_right" size={12} style={{ color: PANEL_T.icon, flexShrink: 0 }} />
     </button>
   );
 }
@@ -577,7 +590,8 @@ export function OrgSwitcherPanel({
         display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)", padding: "var(--semantic-layout-units-padding-xtight)", borderRadius: "var(--semantic-layout-units-cornerradius-base)",
         border: `1px solid ${PANEL_T.border}`,
       }}>
-        <Icon name="search" size={20} style={{ color: PANEL_T.icon }} />
+        {/* 18, as OrgSwitcher.Panel's Field.Search icon in Figma. Was 20. */}
+        <Icon name="search" size={18} style={{ color: PANEL_T.icon }} />
         <input
           type="text"
           value={query}

package/components/sidenav/sidenav.jsx

@@ -501,7 +501,10 @@ export function PopoverRow({ item, onClick, activeId }) {
       <div style={{ position: "absolute", left: 0, top: "var(--semantic-layout-units-padding-xtight)",
         bottom: "var(--semantic-layout-units-padding-xtight)", width: L.stripeW,
         borderRadius: `0 ${L.stripeRadius} ${L.stripeRadius} 0`,
-        backgroundColor: isActive ? T.indicator : "transparent",
+        // PopoverMenu.Item's Stripe binds Fill/Action/Primary/Strong/Pressed in
+        // Figma (40018914:3149), not the nav's Selection/Indicator. Same value
+        // in Light; in Midnight they differ, so this follows Figma.
+        backgroundColor: isActive ? c("fill-action-primary-strong-pressed") : "transparent",
         transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }} />
       {/* Label/Menu/Base/Medium: 14 / 500 / 20 / 0.3 (the repo's `spacious`). */}
       <span style={{ fontFamily: "'Red Hat Text',sans-serif",

package/components/top-nav/top-nav.jsx

@@ -351,9 +351,12 @@ export const DEFAULT_MODULES = MODULES.map((id) => ({ id, label: MODULE_LABELS[i
  *
  * THE STATE FILL BELONGS ON THE 28 BOX, not on the touch target.
  */
+// TopNav.Actions in Figma (40007082:7313): help, settings, notifications_unread,
+// each a 16 glyph in a 28 layer in a 44 target. This drew "notifications" twice.
 export const DEFAULT_ACTIONS = [
-  { icon: "notifications", label: "Notifications" },
-  { icon: "notifications", label: "Alerts" },
+  { icon: "help", label: "Help" },
+  { icon: "settings", label: "Settings" },
+  { icon: "notifications_unread", label: "Notifications" },
 ];
 
 function TopNavActionIcon({ icon, label, onClick }) {
@@ -362,8 +365,11 @@ function TopNavActionIcon({ icon, label, onClick }) {
   const fill = press ? T.controlPressed : hov ? T.controlHover : "transparent";
   const fg = press ? T.monoPressed : hov ? T.monoHover : T.monoBase;
   return (
+    // The 44 target is the button itself. It used to be a min-size wrapper
+    // with a height:100% button, which a min-height parent does not resolve,
+    // so the clickable box collapsed to the 28 layer.
     <div style={{ display: "flex", alignItems: "center", justifyContent: "center",
-      minHeight: L.actionTarget, minWidth: L.actionTarget }}>
+      width: L.actionTarget, height: L.actionTarget, flexShrink: 0 }}>
       <button type="button" aria-label={label} onClick={onClick}
         onMouseEnter={() => setHov(true)} onMouseLeave={() => { setHov(false); setPress(false); }}
         onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onBlur={() => setPress(false)}
@@ -382,7 +388,8 @@ function TopNavActionIcon({ icon, label, onClick }) {
 }
 
 export function TopNavActions({ breakpoint = "desktop", actions, onNotifications, onMore }) {
-  const items = (actions || DEFAULT_ACTIONS).map((a) => ({ ...a, onClick: a.onClick || onNotifications }));
+  const items = (actions || DEFAULT_ACTIONS).map((a) => ({
+    ...a, onClick: a.onClick || (a.icon === "notifications_unread" ? onNotifications : undefined) }));
   if (breakpoint === "mobile" && items.length > 1) {
     return (
       <div style={{ display: "flex", alignItems: "center" }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,