2nd approach

Author: vanessatran-ddi

apps/prs/react/src/routes/features/feat2885.tsx

@@ -148,15 +148,15 @@ export function Feat2885Route() {
       prev.map((notif) =>
         notif.id === id && notif.readStatus === "unread"
           ? { ...notif, readStatus: "read" as const }
-          : notif
-      )
+          : notif,
+      ),
     );
   };
 
   const handleMarkAllRead = () => {
     console.log("Mark all as read clicked");
     setNotifications((prev) =>
-      prev.map((notif) => ({ ...notif, readStatus: "read" as const }))
+      prev.map((notif) => ({ ...notif, readStatus: "read" as const })),
     );
   };
 
@@ -176,11 +176,7 @@ export function Feat2885Route() {
         onToggle={() => setMenuOpen((prev) => !prev)}
         primaryContent={
           <>
-            <GoabxWorkSideMenuItem
-              icon="grid"
-              label="Dashboard"
-              url="/features/2885"
-            />
+            <GoabxWorkSideMenuItem icon="grid" label="Dashboard" url="/features/2885" />
             <GoabxWorkSideMenuItem
               icon="search"
               label="Search"
@@ -211,11 +207,15 @@ export function Feat2885Route() {
                   <h3 style={{ margin: "0 0 0.5rem 0", fontSize: "1rem" }}>
                     Custom Popover Content
                   </h3>
-                  <p style={{ margin: "0 0 1rem 0", color: "#666", fontSize: "0.875rem" }}>
-                    This demonstrates that <code>popoverContent</code> accepts any React node,
-                    not just <code>GoabxWorkSideNotificationPanel</code>.
+                  <p
+                    style={{ margin: "0 0 1rem 0", color: "#666", fontSize: "0.875rem" }}
+                  >
+                    This demonstrates that <code>popoverContent</code> accepts any React
+                    node, not just <code>GoabxWorkSideNotificationPanel</code>.
                   </p>
-                  <ul style={{ margin: "0", paddingLeft: "1.25rem", fontSize: "0.875rem" }}>
+                  <ul
+                    style={{ margin: "0", paddingLeft: "1.25rem", fontSize: "0.875rem" }}
+                  >
                     <li>Custom alerts</li>
                     <li>Quick actions</li>
                     <li>Mini dashboards</li>
@@ -274,11 +274,7 @@ export function Feat2885Route() {
               label="Settings"
               url="/features/2885/settings"
             />
-            <GoabxWorkSideMenuItem
-              icon="log-out"
-              label="Log out"
-              url="/logout"
-            />
+            <GoabxWorkSideMenuItem icon="log-out" label="Log out" url="/logout" />
           </>
         }
       />
@@ -293,11 +289,7 @@ export function Feat2885Route() {
       >
         {/* Mobile menu toggle button */}
         <div className="mobile-menu-toggle">
-          <GoabIconButton
-            icon="menu"
-            variant="dark"
-            onClick={() => setMenuOpen(true)}
-          />
+          <GoabIconButton icon="menu" variant="dark" onClick={() => setMenuOpen(true)} />
         </div>
         <style>{`
           .mobile-menu-toggle {
@@ -316,28 +308,28 @@ export function Feat2885Route() {
 
         <h1>Feature #2885: Work Side Menu with Notification Popover</h1>
         <p>
-          This demonstrates the <code>GoabxWorkSideMenu</code> with the new
-          notification popover feature.
+          This demonstrates the <code>GoabxWorkSideMenu</code> with the new notification
+          popover feature.
         </p>
 
         <h2>New Features</h2>
         <ul>
           <li>
-            <strong>Notification Popover</strong> - Click the "Notifications"
-            menu item to see the popover panel
+            <strong>Notification Popover</strong> - Click the "Notifications" menu item to
+            see the popover panel
           </li>
           <li>
-            <strong>Custom Popover Content</strong> - Click the "Alerts"
-            menu item to see a custom div, demonstrating that{" "}
-            <code>popoverContent</code> accepts any React node
+            <strong>Custom Popover Content</strong> - Click the "Alerts" menu item to see
+            a custom div, demonstrating that <code>popoverContent</code> accepts any React
+            node
           </li>
           <li>
-            <strong>GoabxWorkSideNotificationPanel</strong> - Panel with tabs
-            (Unread, Urgent, All)
+            <strong>GoabxWorkSideNotificationPanel</strong> - Panel with tabs (Unread,
+            Urgent, All)
           </li>
           <li>
-            <strong>GoabxWorkSideNotificationItem</strong> - Individual
-            notification cards with:
+            <strong>GoabxWorkSideNotificationItem</strong> - Individual notification cards
+            with:
             <ul>
               <li>Title and description</li>
               <li>Smart timestamp formatting (e.g., "5 min ago", "2 h ago")</li>
@@ -347,16 +339,15 @@ export function Feat2885Route() {
             </ul>
           </li>
           <li>
-            <strong>Footer actions</strong> - "View all" and "Mark all as read"
-            buttons
+            <strong>Footer actions</strong> - "View all" and "Mark all as read" buttons
           </li>
         </ul>
 
         <h2>Existing Features</h2>
         <ul>
           <li>
-            <strong>Collapsible menu</strong> - Click the toggle button at the
-            bottom to expand/collapse
+            <strong>Collapsible menu</strong> - Click the toggle button at the bottom to
+            expand/collapse
           </li>
           <li>
             <strong>Primary content slot</strong> - Main navigation items
@@ -366,12 +357,12 @@ export function Feat2885Route() {
             (notifications, help)
           </li>
           <li>
-            <strong>Account content slot</strong> - User account menu (click
-            profile to show)
+            <strong>Account content slot</strong> - User account menu (click profile to
+            show)
           </li>
           <li>
-            <strong>Badges</strong> - Notification counts with different types
-            (success, emergency)
+            <strong>Badges</strong> - Notification counts with different types (success,
+            emergency)
           </li>
           <li>
             <strong>Dividers</strong> - Visual separation between menu groups
@@ -397,8 +388,8 @@ export function Feat2885Route() {
 
         <h2>Console Output</h2>
         <p>
-          Open the browser console to see events when clicking notifications or
-          footer actions.
+          Open the browser console to see events when clicking notifications or footer
+          actions.
         </p>
       </main>
     </div>

libs/web-components/src/components/badge/Badge.svelte

@@ -77,6 +77,7 @@
   type BadgeType = (typeof Types)[number];
   type BadgeSize = (typeof badgeSizes)[number];
   type BadgeVersion = (typeof versions)[number];
+  type BadgeJustifyContent = "center" | "flex-start" | "flex-end" | "space-between";
 
   /** Defines the context and colour of the badge. */
   export let type: BadgeType;
@@ -110,8 +111,8 @@
 
   /** min-width value for the badge container (e.g. "20px", "var(--goa-space-m)"). */
   export let minWidth: string = "";
-  /** justify-content value for the badge container (e.g. "center", "flex-start"). */
-  export let justifyContent: string = "";
+  /** justify-content value for the badge container. */
+  export let justifyContent: BadgeJustifyContent | "" = "";
 
   // private
   // Show icon unless explicitly disabled, when either icon=true or icontype is provided

libs/web-components/src/components/popover/Popover.svelte

@@ -3,8 +3,6 @@
     tag: "goa-popover",
     props: {
       open: { reflect: true, type: "String" },
-      targetWidth: { type: "String", attribute: "target-width" },
-      targetTextAlign: { type: "String", attribute: "target-text-align" },
     },
   }}
 />
@@ -26,7 +24,7 @@
   /** Sets a data-testid attribute for automated testing. */
   export let testid: string = "popover";
   /** Provides control to where the popover content is positioned. */
-  export let position: "above" | "below" | "auto" | "right" = "auto";
+  export let position: "above" | "below" | "right" | "auto" = "auto";
   /** Sets the maximum width of the popover container. */
   export let maxwidth: string | "none" = "320px";
   /** Sets the minimum width of the popover container. */
@@ -63,10 +61,6 @@
   export let focusborderwidth = "var(--goa-border-width-l)";
   /** Border radius of the popover window. */
   export let borderradius = "var(--goa-border-radius-m)";
-  /** Width of the popover target button. */
-  export let targetWidth = "";
-  /** Text alignment of the popover target button. */
-  export let targetTextAlign = "";
   /** Indicates the popover is used within a filterable context like a combobox. */
   export let filterablecontext: string = "false";
 
@@ -209,11 +203,11 @@
     // Dispatch _open/_close events for consumer components
     // (MenuButton, AppHeader, AppHeaderMenu, Dropdown)
     if (_isOpen) {
-      dispatch(_rootEl, "_open");
-      requestAnimationFrame(updateAutoPosition); // same vs await tick(), make sure popover element is fully rendered before we measure its dimension
+      dispatch(_rootEl, "_open", {}, { bubbles: true });
+      requestAnimationFrame(() => requestAnimationFrame(updateAutoPosition)); // double rAF: give slot content (web components) one extra frame to render before measuring height
     } else {
       _targetEl.focus();
-      dispatch(_rootEl, "_close");
+      dispatch(_rootEl, "_close", {}, { bubbles: true });
     }
   }
 
@@ -235,12 +229,16 @@
     } else {
       _popoverEl.showPopover();
       _isOpen = true;
-      requestAnimationFrame(updateAutoPosition);
+      requestAnimationFrame(() => requestAnimationFrame(updateAutoPosition));
     }
   }
 
   function updateAutoPosition() {
-    if (position !== "auto" || !_isOpen || !_targetEl || !_popoverEl) {
+    if (!_isOpen || !_targetEl || !_popoverEl) {
+      return;
+    }
+
+    if (position !== "auto") {
       return;
     }
 
@@ -260,8 +258,7 @@
   bind:this={_rootEl}
   data-testid={testid}
   style={styles(
-    // Use block display when targetWidth is customized so width property works
-    targetWidth ? "display: block" : "display: inline-block",
+    "display: inline-block",
     height === "full" && "height: 100%;",
     calculateMargin(mt, mr, mb, ml),
     style("--offset-top", voffset),
@@ -270,9 +267,7 @@
     style("--offset-right", hoffset),
     style("--focus-border-width", focusborderwidth),
     style("--border-radius", borderradius),
-    targetWidth && style("--target-width", targetWidth),
-    targetTextAlign && style("--target-text-align", targetTextAlign),
-    !targetWidth && style("width", width),
+    style("width", width),
   )}
 >
   <button
@@ -304,9 +299,9 @@
       (position === "auto" && _autoPosition === "below")}
     class:position-right={position === "right"}
     style={styles(
-      style("width", width),
+      style("width", position !== "right" ? width : undefined),
       style("min-width", minwidth),
-      style("max-width", width ? `max(${width}, ${maxwidth})` : maxwidth),
+      style("max-width", position !== "right" && width ? `max(${width}, ${maxwidth})` : maxwidth),
       style("padding", _padded ? "var(--goa-space-m)" : "0"),
     )}
   >
@@ -336,8 +331,8 @@
     border: none;
     padding: 0;
     background-color: transparent;
-    width: var(--target-width, inherit);
-    text-align: var(--target-text-align, inherit);
+    width: inherit;
+    text-align: inherit;
     anchor-name: --goa-popover-target;
   }
 
@@ -381,11 +376,12 @@
   }
 
   .popover-content.position-right {
-    inset-block-start: anchor(top);
+    inset-block-start: unset;
+    inset-block-end: anchor(bottom);
     inset-inline-start: anchor(right);
-    --popover-translate-x: var(--offset-left, 0);
-    --popover-translate-y: var(--offset-top, 0);
-    position-try-fallbacks: flip-inline;
+    --popover-translate-x: var(--offset-left, 8px);
+    --popover-translate-y: 0;
+    position-try-fallbacks: none;
   }
 
   :global(::slotted(ul)) {