From 2b0d70410ffacd7a3a85a7d2edf7dc255bbcb56e Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 6 Mar 2023 12:09:24 -0800
Subject: [PATCH] fix(action): ensure consistent width to accommodate indicator
 when displaying text (#6562)

**Related Issue:** #5375

## Summary

Updates layout to include space for indicator when `text-enabled` is
set.
---
 src/components/action/action.scss       | 4 +---
 src/components/action/action.stories.ts | 4 ++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/action/action.scss b/src/components/action/action.scss
index 1db50bb5535..a3f5ce55598 100755
--- a/src/components/action/action.scss
+++ b/src/components/action/action.scss
@@ -70,6 +70,7 @@
 
   .text-container--visible {
     @apply w-auto flex-auto opacity-100;
+    margin-inline-end: theme("spacing.4");
   }
 }
 
@@ -213,9 +214,6 @@
     &::after {
       inset-block-end: auto;
     }
-    .text-container--visible {
-      margin-inline-end: theme("spacing.4");
-    }
   }
   .button:hover::after,
   .button:focus::after {
diff --git a/src/components/action/action.stories.ts b/src/components/action/action.stories.ts
index 679bc7bfa7f..b4b951e2c5f 100644
--- a/src/components/action/action.stories.ts
+++ b/src/components/action/action.stories.ts
@@ -198,6 +198,10 @@ export const alignmentStartAndLargeScaleAndTextOverflow_TestOnly = (): string =>
     )}
   </div>`;
 
+export const indicatorTextEnabled_TestOnly = (): string => html`
+  <calcite-action indicator active text="click-me" text-enabled icon="gear"></calcite-action>
+`;
+
 export const arabicLocale_TestOnly = (): string => html`
   <calcite-action
     dir="rtl"