From 190ea14340a15e6946f6dc136c3b81978b2cadab Mon Sep 17 00:00:00 2001
From: Branden <bra13894@esri.com>
Date: Tue, 27 Feb 2024 12:46:45 -0800
Subject: [PATCH 1/2] added alignText test

---
 .../src/components/alert/alert.stories.ts              | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/calcite-components/src/components/alert/alert.stories.ts b/packages/calcite-components/src/components/alert/alert.stories.ts
index 99c2654aca4..5008f270a0e 100644
--- a/packages/calcite-components/src/components/alert/alert.stories.ts
+++ b/packages/calcite-components/src/components/alert/alert.stories.ts
@@ -218,3 +218,13 @@ export const autoClosableRetainsCloseButton_TestOnly = (): string => html`
     <calcite-link slot="link" title="my action" role="presentation"> Take action </calcite-link>
   </calcite-alert>
 `;
+
+export const textAlignDoesNotAffectComponentAlignment_TestOnly = (): string => html`
+  <div style="text-align:center">
+    <calcite-alert icon="rangefinder" kind="brand" open label="A report alert">
+      <div slot="title">Trail Camera Report</div>
+      <div slot="message">We thought you might want to take a look</div>
+      <calcite-link slot="link">Take action</calcite-link>
+    </calcite-alert>
+  </div>
+`;

From 1ae93b992d202cf3488cefdb73001897b3b333b7 Mon Sep 17 00:00:00 2001
From: Branden <bra13894@esri.com>
Date: Tue, 27 Feb 2024 12:46:45 -0800
Subject: [PATCH 2/2] feat(alert): added a text alignment test to make sure
 external styling doesn't affect shadow dom

---
 .../src/components/alert/alert.stories.ts              | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/calcite-components/src/components/alert/alert.stories.ts b/packages/calcite-components/src/components/alert/alert.stories.ts
index 99c2654aca4..5008f270a0e 100644
--- a/packages/calcite-components/src/components/alert/alert.stories.ts
+++ b/packages/calcite-components/src/components/alert/alert.stories.ts
@@ -218,3 +218,13 @@ export const autoClosableRetainsCloseButton_TestOnly = (): string => html`
     <calcite-link slot="link" title="my action" role="presentation"> Take action </calcite-link>
   </calcite-alert>
 `;
+
+export const textAlignDoesNotAffectComponentAlignment_TestOnly = (): string => html`
+  <div style="text-align:center">
+    <calcite-alert icon="rangefinder" kind="brand" open label="A report alert">
+      <div slot="title">Trail Camera Report</div>
+      <div slot="message">We thought you might want to take a look</div>
+      <calcite-link slot="link">Take action</calcite-link>
+    </calcite-alert>
+  </div>
+`;