diff --git a/packages/eui/changelogs/upcoming/9221.md b/packages/eui/changelogs/upcoming/9221.md new file mode 100644 index 00000000000..7bc2db597c6 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9221.md @@ -0,0 +1,2 @@ +- Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" + diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index 7b4500c996d..38b0e80ed9c 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -42,17 +42,21 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
- + + Last 15 minutes + + +
- + + Last 15 minutes + + + - + + Last 15 minutes + + + - + + Last 15 minutes + + + @@ -524,17 +540,21 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
- + + Last 15 minutes + + +
- + + Last 15 minutes + + + - + + Last 15 minutes + + + - + + Last 15 minutes + + + { ${logicalCSS('width', 'auto')} overflow: hidden; `, - euiSuperDatePicker__prettyFormat: css` - ${_buttonStyles(euiThemeContext)} - text-align: start; - - --euiFormControlStateHoverColor: ${forms.borderHovered}; - ${euiFormControlDefaultShadow(euiThemeContext)} - - &:focus { - ${euiFormControlFocusStyles(euiThemeContext)} - } - - ${highContrastModeStyles(euiThemeContext, { - preferred: ` - border: none; - `, - })} + euiSuperDatePicker__prettyDurationTooltip: css` + ${logicalCSS('max-width', 'min(58ch, 90vw)')} `, // Form states diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx index dc72e4e0443..a272bc261a5 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx @@ -556,6 +556,38 @@ describe('EuiSuperDatePicker', () => { }); }); + test('pretty duration button has full range tooltip', async () => { + const now = moment('1999-12-31'); + const dateFormat = 'MMM D, HH:mm:ss'; + + jest.useFakeTimers().setSystemTime(now.toDate()); + + const { getByTestSubject, findByRole } = render( + + ); + + // needs to be async to support React 17 + await act(async () => { + userEvent.hover(getByTestSubject('superDatePickerShowDatesButton')); + }); + + const tooltip = await findByRole('tooltip'); + + const end = now.format(dateFormat); + const start = now.clone().subtract(15, 'minutes').format(dateFormat); + const formattedValue = `${start} – ${end}`; + + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent(formattedValue); + + jest.useRealTimers(); + }); + describe('Quick Select time window steps', () => { it('steps forward', async () => { // Use fixed absolute start/end with time diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx index 094a7421811..10255c59f84 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -16,7 +16,7 @@ import classNames from 'classnames'; import moment, { LocaleSpecifier, Moment } from 'moment'; // eslint-disable-line import/named import dateMath from '@elastic/datemath'; -import { useEuiMemoizedStyles } from '../../../services'; +import { useEuiMemoizedStyles, RenderWithEuiTheme } from '../../../services'; import { isObject } from '../../../services/predicate'; import { EuiI18nConsumer } from '../../context'; import { CommonProps } from '../../common'; @@ -26,6 +26,7 @@ import { EuiFormControlLayout, EuiFormControlLayoutProps, } from '../../form'; +import { EuiToolTip } from '../../tool_tip'; import { ShortDate, @@ -626,33 +627,60 @@ export class EuiSuperDatePickerInternal extends Component< isDisabledDisplay || (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) ) { + // Tooltip content with full range + const startMoment = dateMath.parse(start); + const endMoment = dateMath.parse(end, { roundUp: true }); + const separator = ' – '; + const formattedFullRange = isInvalid + ? '' + : startMoment?.format(dateFormat) + + separator + + endMoment?.format(dateFormat); + return ( - - {!isQuickSelectOnly && ( - - {isDisabledDisplay ? ( - isDisabled.display - ) : ( - - )} - - )} - + + {(euiTheme) => { + return ( + + {!isQuickSelectOnly && ( + + + {isDisabledDisplay ? ( + isDisabled.display + ) : ( + + )} + + + )} + + ); + }} + ); }