[EuiSuperDatePicker] Fix dates overflowing out of the delimited inputs #8109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

cee-chen merged 4 commits into elastic:main from cee-chen:superdatepicker/overflow-fix

Nov 1, 2024

...me_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.storybook/test.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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()
+          ),
       };
     };
@@ Expand Down @@

packages/eui/changelogs/upcoming/8109.md

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed an `EuiSuperDatePicker` bug where inputs would overflow out of smaller widths instead of truncating

...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap

-Original file line number
+Diff line change
@@ Expand Up @@
               </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"
@@ Expand Down @@

...i/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts

-Original file line number
+Diff line change
@@ Expand Up @@
         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 */
+        `,
       };
     };

...ges/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -142,6 +142,7 @@ export const EuiDatePopoverButton: FunctionComponent< @@
           display="block"
           panelPaddingSize="none"
           {...rest}
+          css={value === 'now' && styles.now}
         >
           <EuiDatePopoverContent
             value={value}
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand Down Expand Up @@
         <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();
+      },
+    };

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts

-Original file line number
+Diff line change
@@ Expand Up @@
         euiSuperDatePicker__rangeInput: css`
           flex-grow: 1;
           ${logicalCSS('width', 'auto')}
+          overflow: hidden;
         `,
         euiSuperDatePicker__prettyFormat: css`
           ${_buttonStyles(euiThemeContext)}
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSuperDatePicker] Fix dates overflowing out of the delimited inputs #8109

Uh oh!

Diff view

Diff view

There are no files selected for viewing