From 79ef6497f286523bdba1411a5d3fed8635f2ac7a Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Tue, 24 Oct 2023 11:44:24 -0700
Subject: [PATCH] [EuiTabs] Fix incorrectly wrapping tab content (#7309)

---
 .../__snapshots__/page_header.test.tsx.snap   |  4 +--
 .../page_header_content.test.tsx.snap         | 12 +++----
 .../tabs/__snapshots__/tab.test.tsx.snap      | 12 +++----
 .../tabs/__snapshots__/tabs.test.tsx.snap     | 10 +++---
 src/components/tabs/tab.tsx                   |  5 ++-
 .../tabbed_content.test.tsx.snap              | 32 +++++++++----------
 upcoming_changelogs/7309.md                   |  3 ++
 7 files changed, 42 insertions(+), 36 deletions(-)
 create mode 100644 upcoming_changelogs/7309.md

diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
index f71cf760dbe..aff31af6d42 100644
--- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
@@ -339,7 +339,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
               type="button"
             >
               <span
-                class="euiTab__content emotion-euiTab__content-l"
+                class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
               >
                 Tab 1
               </span>
@@ -351,7 +351,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
               type="button"
             >
               <span
-                class="euiTab__content emotion-euiTab__content-l"
+                class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
               >
                 Tab 2
               </span>
diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
index 5a97e875e7d..5dbda871309 100644
--- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
@@ -299,7 +299,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
             type="button"
           >
             <span
-              class="euiTab__content emotion-euiTab__content-l"
+              class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
             >
               Tab 1
             </span>
@@ -311,7 +311,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
             type="button"
           >
             <span
-              class="euiTab__content emotion-euiTab__content-l"
+              class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
             >
               Tab 2
             </span>
@@ -588,7 +588,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content emotion-euiTab__content-xl"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-xl"
           >
             Tab 1
           </span>
@@ -600,7 +600,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content emotion-euiTab__content-xl"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-xl"
           >
             Tab 2
           </span>
@@ -639,7 +639,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content emotion-euiTab__content-xl"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-xl"
           >
             Tab 1
           </span>
@@ -651,7 +651,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content emotion-euiTab__content-xl"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-xl"
           >
             Tab 2
           </span>
diff --git a/src/components/tabs/__snapshots__/tab.test.tsx.snap b/src/components/tabs/__snapshots__/tab.test.tsx.snap
index 279a138bd17..438c9d068f0 100644
--- a/src/components/tabs/__snapshots__/tab.test.tsx.snap
+++ b/src/components/tabs/__snapshots__/tab.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiTab props append is rendered 1`] = `
     Append
   </span>
   <span
-    class="euiTab__content emotion-euiTab__content-m"
+    class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
   >
     children
   </span>
@@ -29,7 +29,7 @@ exports[`EuiTab props disabled and selected 1`] = `
   type="button"
 >
   <span
-    class="euiTab__content emotion-euiTab__content-m"
+    class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
   >
     Click Me
   </span>
@@ -45,7 +45,7 @@ exports[`EuiTab props disabled is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiTab__content emotion-euiTab__content-m"
+    class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
   >
     Click Me
   </span>
@@ -78,7 +78,7 @@ exports[`EuiTab props isSelected is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiTab__content emotion-euiTab__content-m"
+    class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
   >
     children
   </span>
@@ -95,7 +95,7 @@ exports[`EuiTab props onClick renders button 1`] = `
   type="button"
 >
   <span
-    class="euiTab__content emotion-euiTab__content-m"
+    class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
   >
     children
   </span>
@@ -115,7 +115,7 @@ exports[`EuiTab props prepend is rendered 1`] = `
     Prepend
   </span>
   <span
-    class="euiTab__content emotion-euiTab__content-m"
+    class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
   >
     children
   </span>
diff --git a/src/components/tabs/__snapshots__/tabs.test.tsx.snap b/src/components/tabs/__snapshots__/tabs.test.tsx.snap
index 98917c477a3..1dd3e3c2bf4 100644
--- a/src/components/tabs/__snapshots__/tabs.test.tsx.snap
+++ b/src/components/tabs/__snapshots__/tabs.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiTabs props expand passes down to EuiTab children 1`] = `
     type="button"
   >
     <span
-      class="euiTab__content emotion-euiTab__content-m"
+      class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
     >
       Tab
     </span>
@@ -32,7 +32,7 @@ exports[`EuiTabs props size l renders and passes down to EuiTab children 1`] = `
     type="button"
   >
     <span
-      class="euiTab__content emotion-euiTab__content-l"
+      class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
     >
       Tab
     </span>
@@ -52,7 +52,7 @@ exports[`EuiTabs props size m renders and passes down to EuiTab children 1`] = `
     type="button"
   >
     <span
-      class="euiTab__content emotion-euiTab__content-m"
+      class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
     >
       Tab
     </span>
@@ -72,7 +72,7 @@ exports[`EuiTabs props size s renders and passes down to EuiTab children 1`] = `
     type="button"
   >
     <span
-      class="euiTab__content emotion-euiTab__content-s"
+      class="euiTab__content eui-textTruncate emotion-euiTab__content-s"
     >
       Tab
     </span>
@@ -92,7 +92,7 @@ exports[`EuiTabs props size xl renders and passes down to EuiTab children 1`] =
     type="button"
   >
     <span
-      class="euiTab__content emotion-euiTab__content-xl"
+      class="euiTab__content eui-textTruncate emotion-euiTab__content-xl"
     >
       Tab
     </span>
diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
index 9a349bb16a0..7ae9ac2adcf 100644
--- a/src/components/tabs/tab.tsx
+++ b/src/components/tabs/tab.tsx
@@ -127,7 +127,10 @@ export const EuiTab: FunctionComponent<Props> = ({
       {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}
     >
       {prependNode}
-      <span className="euiTab__content" css={cssTabContentStyles}>
+      <span
+        className="euiTab__content eui-textTruncate"
+        css={cssTabContentStyles}
+      >
         {children}
       </span>
       {appendNode}
diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap
index ad996adf55e..7d16b9bd716 100644
--- a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap
+++ b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -35,7 +35,7 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -75,7 +75,7 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -95,7 +95,7 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -139,7 +139,7 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -159,7 +159,7 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -199,7 +199,7 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -219,7 +219,7 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -259,7 +259,7 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -279,7 +279,7 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -319,7 +319,7 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -339,7 +339,7 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -379,7 +379,7 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -399,7 +399,7 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -439,7 +439,7 @@ exports[`EuiTabbedContent props size can be small 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-s"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-s"
       >
         Elasticsearch
       </span>
@@ -459,7 +459,7 @@ exports[`EuiTabbedContent props size can be small 1`] = `
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-s"
+        class="euiTab__content eui-textTruncate emotion-euiTab__content-s"
       >
         <strong>
           Kibana
diff --git a/upcoming_changelogs/7309.md b/upcoming_changelogs/7309.md
new file mode 100644
index 00000000000..718fc0340b0
--- /dev/null
+++ b/upcoming_changelogs/7309.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiTabs` incorrectly wrapping text when it should instead either scroll or truncate