[EuiSuperDatePicker] Fix pretty format button truncation

packages/eui/changelogs/upcoming/9231.md

@@ -0,0 +1,5 @@
+- Added `euiTextTruncateCSS` Emotion style utility
+
+**Bug fixes**
+
+- Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly

packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap

@@ -53,7 +53,11 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -134,7 +138,11 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -343,7 +351,11 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -490,7 +502,11 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -551,7 +567,11 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -635,7 +655,11 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -716,7 +740,11 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>
@@ -798,7 +826,11 @@ exports[`EuiSuperDatePicker renders 1`] = `
           <span
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
           >
-            Last 15 minutes
+            <span
+              class="emotion-euiTextTruncateCSS"
+            >
+              Last 15 minutes
+            </span>
           </span>
         </button>
       </span>

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx

@@ -18,6 +18,7 @@ import dateMath from '@elastic/datemath';
 
 import { useEuiMemoizedStyles, RenderWithEuiTheme } from '../../../services';
 import { isObject } from '../../../services/predicate';
+import { euiTextTruncateCSS } from '../../../global_styling';
 import { EuiI18nConsumer } from '../../context';
 import { CommonProps } from '../../common';
 import { EuiDatePickerRange } from '../date_picker_range';
@@ -667,12 +668,14 @@ export class EuiSuperDatePickerInternal extends Component<
                       {isDisabledDisplay ? (
                         isDisabled.display
                       ) : (
-                        <PrettyDuration
-                          timeFrom={start}
-                          timeTo={end}
-                          quickRanges={commonlyUsedRanges}
-                          dateFormat={dateFormat}
-                        />
+                        <span css={euiTextTruncateCSS()}>
+                          <PrettyDuration
+                            timeFrom={start}
+                            timeTo={end}
+                            quickRanges={commonlyUsedRanges}
+                            dateFormat={dateFormat}
+                          />
+                        </span>
                       )}
                     </EuiFormControlButton>
                   </EuiToolTip>

packages/eui/src/global_styling/mixins/_typography.ts

@@ -7,6 +7,7 @@
  */
 
 import { CSSProperties } from 'react';
+import { css } from '@emotion/react';
 import {
   euiLineHeightFromBaseline,
   euiFontSizeFromScale,
@@ -87,6 +88,16 @@ export const euiTextTruncate = (
   white-space: nowrap !important;
 `;
 
+/**
+ * Emotion CSS wrapper around `euiTextTruncate` style.
+ */
+export const euiTextTruncateCSS = (
+  maxWidth: CSSProperties['maxWidth'] = '100%'
+) =>
+  css`
+    ${euiTextTruncate(maxWidth)}
+  `;
+
 /**
  * Fixed-width numbers for tabular data
  */