[EuiSuperDatePicker] Fix dates overflowing out of the delimited inputs (

#8109)
elastic · Nov 1, 2024 · e58f336 · e58f336
1 parent e985cd6
commit e58f336
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 2 deletions.
diff --git a/...me_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/...me_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
diff --git a/...ome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/...ome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
diff --git a/packages/eui/.storybook/test.ts b/packages/eui/.storybook/test.ts
@@ -40,6 +40,12 @@ const customWithin = (canvasElement: HTMLElement) => {
       await waitFor(() =>
         expect(canvasElement.querySelector('[data-popover-open]')).toBeVisible()
       ),
+    waitForEuiPopoverHidden: async () =>
+      await waitFor(() =>
+        expect(
+          canvasElement.querySelector('[data-popover-panel]')
+        ).not.toBeInTheDocument()
+      ),
   };
 };
 

diff --git a/packages/eui/changelogs/upcoming/8109.md b/packages/eui/changelogs/upcoming/8109.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an `EuiSuperDatePicker` bug where inputs would overflow out of smaller widths instead of truncating
diff --git a/...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -826,7 +826,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
           </span>
         </div>
         <div
-          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
+          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-now-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
         >
           <button
             class="euiDatePopoverButton euiDatePopoverButton--end emotion-euiDatePopoverButton"

diff --git a/...i/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts b/...i/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts
@@ -15,5 +15,9 @@ export const euiDatePopoverButtonStyles = (euiThemeContext: UseEuiTheme) => {
     euiDatePopoverButton: css`
       ${_buttonStyles(euiThemeContext)}
     `,
+    now: css`
+      /* !important needed to override date range picker nested styles */
+      flex-grow: 0.5 !important; /* stylelint-disable-line declaration-no-important */
+    `,
   };
 };
diff --git a/...ges/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/...ges/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -142,6 +142,7 @@ export const EuiDatePopoverButton: FunctionComponent<
       display="block"
       panelPaddingSize="none"
       {...rest}
+      css={value === 'now' && styles.now}
     >
       <EuiDatePopoverContent
         value={value}

diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import moment from 'moment';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect } from '@storybook/test';
+import { expect, fireEvent } from '@storybook/test';
 import { within } from '../../../../.storybook/test';
 import { LOKI_SELECTORS } from '../../../../.storybook/loki';
 import { enableFunctionToggleControls } from '../../../../.storybook/utils';
@@ -123,3 +123,33 @@ function CustomPanel({ applyTime }: { applyTime?: ApplyTime }) {
     <EuiLink onClick={applyMyCustomTime}>Entire dataset timerange</EuiLink>
   );
 }
+
+/**
+ * VRT only
+ */
+export const OverflowingChildren: Story = {
+  tags: ['vrt-only'],
+  args: { start: 'Dec 31, 1999' },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const startButton = canvas.getByTestSubject(
+      'superDatePickerstartDatePopoverButton'
+    );
+    const getAbsoluteTab = () =>
+      canvas.getByTestSubject('superDatePickerAbsoluteTab');
+
+    await fireEvent.click(startButton);
+    await canvas.waitForEuiPopoverVisible();
+    await fireEvent.click(getAbsoluteTab());
+    await fireEvent.click(startButton);
+    await canvas.waitForEuiPopoverHidden();
+  },
+};
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
@@ -129,6 +129,7 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
     euiSuperDatePicker__rangeInput: css`
       flex-grow: 1;
       ${logicalCSS('width', 'auto')}
+      overflow: hidden;
     `,
     euiSuperDatePicker__prettyFormat: css`
       ${_buttonStyles(euiThemeContext)}