[EuiTabs] Fix incorrectly wrapping tab content (elastic#7309)

cee-chen · Oct 24, 2023 · 79ef649 · 79ef649
1 parent 5f1e680
commit 79ef649
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 36 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiTabs` incorrectly wrapping text when it should instead either scroll or truncate
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed `EuiTabs` incorrectly wrapping text when it should instead either scroll or truncate