From 37987f4f972767f5f3607bbb250cc6a9d673f8d6 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Fri, 25 Jul 2025 08:34:39 -0400
Subject: [PATCH] [CL-801] Move popover in kitchen sink story to avoid
 scrolling (#15767)

---
 .../components/kitchen-sink-main.component.ts | 24 ++++++++++++++++++-
 .../kitchen-sink/kitchen-sink.stories.ts      | 12 +++-------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
index 767659de3cb..6083b3d66e1 100644
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
@@ -105,7 +105,21 @@ class KitchenSinkDialog {
 
     <div class="tw-my-6">
       <h1 bitTypography="h1">Bitwarden Kitchen Sink<bit-avatar text="Bit Warden"></bit-avatar></h1>
-      <a bitLink linkType="primary" href="#">Learn more</a>
+      <a bitLink linkType="primary" href="#">This is a link</a>
+      <p bitTypography="body1" class="tw-inline">
+        &nbsp;and this is a link button popover trigger:&nbsp;
+      </p>
+      <button
+        bitLink
+        linkType="primary"
+        [bitPopoverTriggerFor]="myPopover"
+        #triggerRef="popoverTrigger"
+        type="button"
+        slot="end"
+        aria-label="Popover trigger link"
+      >
+        <i class="bwi bwi-question-circle"></i>
+      </button>
     </div>
 
     <bit-callout type="info" title="About the Kitchen Sink">
@@ -149,6 +163,14 @@ class KitchenSinkDialog {
         </bit-section>
       </bit-tab>
     </bit-tab-group>
+
+    <bit-popover [title]="'Educational Popover'" #myPopover>
+      <div>You can learn more things at:</div>
+      <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
+        <li>Help center</li>
+        <li>Support</li>
+      </ul>
+    </bit-popover>
   `,
 })
 export class KitchenSinkMainComponent {
diff --git a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
index 671a8d9ad82..cb8a72e1b3f 100644
--- a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
+++ b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
@@ -6,7 +6,6 @@ import {
   userEvent,
   getAllByRole,
   getByRole,
-  getByLabelText,
   fireEvent,
   getByText,
   getAllByLabelText,
@@ -155,16 +154,11 @@ export const PopoverOpen: Story = {
   render: Default.render,
   play: async (context) => {
     const canvas = context.canvasElement;
-    const passwordLabelIcon = getByLabelText(canvas, "A random password (required)", {
-      selector: "button",
+    const popoverLink = getByRole(canvas, "button", {
+      name: "Popover trigger link",
     });
 
-    await userEvent.click(passwordLabelIcon);
-  },
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
+    await userEvent.click(popoverLink);
   },
 };