From 6961f5a271a34c064a4e071fa3e00113f34ff378 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Mon, 23 Dec 2024 11:31:45 -0500
Subject: [PATCH] [CL-524] Ignore flaky elements in Chromatic tests

---
 libs/components/src/menu/menu-trigger-for.directive.ts        | 2 +-
 .../components/dialog-virtual-scroll-block.component.ts       | 4 ++--
 .../src/stories/kitchen-sink/kitchen-sink.stories.ts          | 3 +++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index 786554e981..96d430c5e6 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -36,7 +36,7 @@ export class MenuTriggerForDirective implements OnDestroy {
   private defaultMenuConfig: OverlayConfig = {
     panelClass: "bit-menu-panel",
     hasBackdrop: true,
-    backdropClass: "cdk-overlay-transparent-backdrop",
+    backdropClass: ["cdk-overlay-transparent-backdrop", "bit-menu-panel-backdrop"],
     scrollStrategy: this.overlay.scrollStrategies.reposition(),
     positionStrategy: this.overlay
       .position()
diff --git a/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts b/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
index a867d9cdf5..02b49a3e91 100644
--- a/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
@@ -10,9 +10,9 @@ import { TableDataSource, TableModule } from "../../../table";
   selector: "dialog-virtual-scroll-block",
   standalone: true,
   imports: [DialogModule, IconButtonModule, SectionComponent, TableModule, ScrollingModule],
-  template: ` <bit-section>
+  template: /*html*/ `<bit-section>
     <cdk-virtual-scroll-viewport scrollWindow itemSize="47">
-      <bit-table [dataSource]="dataSource">
+      <bit-table [dataSource]="dataSource" data-chromatic="ignore">
         <ng-container header>
           <tr>
             <th bitCell bitSortable="id" default>Id</th>
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 203c510f81..44080e2904 100644
--- a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
+++ b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
@@ -130,6 +130,9 @@ export const MenuOpen: Story = {
     const menuButton = getAllByRole(table, "button")[0];
     await userEvent.click(menuButton);
   },
+  parameters: {
+    chromatic: { ignoreSelectors: [".bit-menu-panel-backdrop"] },
+  },
 };
 
 export const DefaultDialogOpen: Story = {