From 84d211fb564b1861fadd0f12293bdb763aa44c54 Mon Sep 17 00:00:00 2001
From: Jake Fink <jfink@bitwarden.com>
Date: Fri, 24 Feb 2023 11:19:09 -0500
Subject: [PATCH] Fix broken Storybook: Change ng-template to ng-container for
 ngIf and rename icon directive (#4816)

* remove added template for ngIf and rename icon directive

* fix regression in product switcher

* fix text color of bulk delete in org vault

* use ng-container for *ngIf
---
 .../individual-vault/vault-items.component.html      | 12 +++++++-----
 .../simple-configurable-dialog.component.html        |  2 +-
 .../simple-dialog/simple-dialog.component.html       |  6 +++---
 .../dialog/simple-dialog/simple-dialog.component.ts  |  2 +-
 .../dialog/simple-dialog/simple-dialog.stories.ts    |  2 +-
 libs/components/src/menu/menu.component.html         |  1 +
 6 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/app/vault/individual-vault/vault-items.component.html b/apps/web/src/app/vault/individual-vault/vault-items.component.html
index 39e8af4f1b..45be454a33 100644
--- a/apps/web/src/app/vault/individual-vault/vault-items.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-items.component.html
@@ -62,11 +62,13 @@
                 <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
                 {{ "restoreSelected" | i18n }}
               </button>
-              <button bitMenuItem class="tw-text-danger" (click)="bulkDelete()">
-                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
-                {{
-                  (activeFilter.isDeleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n
-                }}
+              <button bitMenuItem (click)="bulkDelete()">
+                <span class="tw-text-danger">
+                  <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
+                  {{
+                    (activeFilter.isDeleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n
+                  }}
+                </span>
               </button>
             </ng-container>
           </bit-menu>
diff --git a/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html b/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html
index cc6ce75dcb..dfc30d8c8f 100644
--- a/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html
+++ b/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html
@@ -1,5 +1,5 @@
 <bit-simple-dialog>
-  <i bit-dialog-icon class="bwi tw-text-3xl" [class]="iconClasses" aria-hidden="true"></i>
+  <i bitDialogIcon class="bwi tw-text-3xl" [class]="iconClasses" aria-hidden="true"></i>
 
   <span bitDialogTitle>{{ title }}</span>
 
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 89dccd4f90..4614dc96e5 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -3,9 +3,9 @@
   @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
-    <ng-template *ngIf="hasIcon; else elseBlock">
-      <ng-content select="[bit-dialog-icon]"></ng-content>
-    </ng-template>
+    <ng-container *ngIf="hasIcon; else elseBlock">
+      <ng-content select="[bitDialogIcon]"></ng-content>
+    </ng-container>
     <ng-template #elseBlock>
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
     </ng-template>
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts
index fa4e359bce..912b0299f6 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts
@@ -2,7 +2,7 @@ import { Component, ContentChild, Directive } from "@angular/core";
 
 import { fadeIn } from "../animations";
 
-@Directive({ selector: "[bit-dialog-icon]" })
+@Directive({ selector: "[bitDialogIcon]" })
 export class IconDirective {}
 
 @Component({
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
index 307b21b4c2..1792260799 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
@@ -42,7 +42,7 @@ const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogCompon
   props: args,
   template: `
   <bit-simple-dialog>
-      <i bit-dialog-icon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
+      <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
       <span bitDialogTitle>Premium Subscription Available</span>
       <span bitDialogContent> Message Content</span>
       <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
diff --git a/libs/components/src/menu/menu.component.html b/libs/components/src/menu/menu.component.html
index f254fe5826..d175a3fe3b 100644
--- a/libs/components/src/menu/menu.component.html
+++ b/libs/components/src/menu/menu.component.html
@@ -5,6 +5,7 @@
     [attr.role]="ariaRole"
     [attr.aria-label]="ariaLabel"
     cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="ariaRole === 'dialog'"
   >
     <ng-content></ng-content>
   </div>