[EuiSuperDatePicker] Improvements: time window buttons and time zone display (#9210)

Co-authored-by: Lene Gadewoll <[email protected]>

Author: acstll

packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png

@@ -0,0 +1,2 @@
+- Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop.
+

packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png

@@ -0,0 +1,2 @@
+- Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`.
+

packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiTimeWindowButtons renders 1`] = `
+<div
+  class="euiSuperDatePicker__timeWindowButtons emotion-euiButtonGroup__buttons-m-EuiTimeWindowButtons"
+  data-test-subj="timeWindowButtons"
+>
+  <span
+    class="euiToolTipAnchor euiButtonGroup__tooltipWrapper emotion-euiToolTipAnchor-inlineBlock-tooltipWrapper-m"
+  >
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-iconOnly-hasToolTip-uncompressed-base-text"
+      data-test-subj="timeWindowButtonsPrevious"
+      title=""
+      type="button"
+    >
+      <span
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
+      >
+        <span
+          color="inherit"
+          data-euiicon-type="arrowLeft"
+        />
+        <span
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Previous"
+        >
+          Previous
+        </span>
+      </span>
+    </button>
+  </span>
+  <span
+    class="euiToolTipAnchor euiButtonGroup__tooltipWrapper emotion-euiToolTipAnchor-inlineBlock-tooltipWrapper-m"
+  >
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-iconOnly-hasToolTip-uncompressed-base-text"
+      data-test-subj="timeWindowButtonsZoomOut"
+      title=""
+      type="button"
+    >
+      <span
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
+      >
+        <span
+          color="inherit"
+          data-euiicon-type="magnifyWithMinus"
+        />
+        <span
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Zoom out"
+        >
+          Zoom out
+        </span>
+      </span>
+    </button>
+  </span>
+  <span
+    class="euiToolTipAnchor euiButtonGroup__tooltipWrapper emotion-euiToolTipAnchor-inlineBlock-tooltipWrapper-m"
+  >
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-iconOnly-hasToolTip-uncompressed-base-text"
+      data-test-subj="timeWindowButtonsNext"
+      title=""
+      type="button"
+    >
+      <span
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
+      >
+        <span
+          color="inherit"
+          data-euiicon-type="arrowRight"
+        />
+        <span
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Next"
+        >
+          Next
+        </span>
+      </span>
+    </button>
+  </span>
+</div>
+`;

packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiTimeZoneDisplay renders 1`] = `
+<div>
+  <div
+    aria-label="UTC-8 (America/Los_Angeles)"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-xs-flexStart-center-row-euiTimeZoneDisplay"
+    data-test-subj="euiTimeZoneDisplay"
+  >
+    <span
+      color="subdued"
+      data-euiicon-type="globe"
+    />
+    <span
+      class="euiText emotion-euiText-s-euiTextColor-subdued"
+    >
+      UTC-8 (America/Los_Angeles)
+    </span>
+  </div>
+</div>
+`;

packages/eui/changelogs/upcoming/9151.md

@@ -150,7 +150,7 @@ describe('EuiAbsoluteTab', () => {
 
     describe('allows several other common date formats, and autoformats them to the `dateFormat` prop', () => {
       const assertOutput = (input: HTMLInputElement) => {
-        // Exclude hours from assertion, because moment uses local machine timezone
+        // Exclude hours from assertion, because moment uses local machine time zone
         expect(input.value).toContain('Jan 1, 1970');
       };
 

packages/eui/changelogs/upcoming/9191.md

@@ -17,7 +17,11 @@ import React, {
 import moment, { Moment, LocaleSpecifier } from 'moment';
 import dateMath from '@elastic/datemath';
 
-import { useUpdateEffect, useEuiMemoizedStyles } from '../../../../services';
+import {
+  useUpdateEffect,
+  useEuiMemoizedStyles,
+  useGeneratedHtmlId,
+} from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
 import { EuiFlexGroup } from '../../../flex';
@@ -26,6 +30,10 @@ import { EuiCode } from '../../../code';
 
 import { EuiDatePicker, EuiDatePickerProps } from '../../date_picker';
 import { EuiDatePopoverContentProps } from './date_popover_content';
+import {
+  EuiTimeZoneDisplay,
+  type EuiTimeZoneDisplayProps,
+} from './timezone_display';
 import { euiAbsoluteTabDateFormStyles } from './absolute_tab.styles';
 
 // Allow users to paste in and have the datepicker parse multiple common date formats,
@@ -47,6 +55,7 @@ export interface EuiAbsoluteTabProps {
   utcOffset?: number;
   minDate?: Moment;
   maxDate?: Moment;
+  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;
 }
 
 export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
@@ -60,6 +69,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
   minDate,
   maxDate,
   labelPrefix,
+  timeZoneDisplayProps = {},
 }) => {
   const styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
 
@@ -80,6 +90,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
     [dateFormat]
   );
 
+  const timeZomeDescriptionId = useGeneratedHtmlId();
   const submitButtonLabel = useEuiI18n(
     'euiAbsoluteTab.dateFormatButtonLabel',
     'Parse date'
@@ -181,6 +192,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
           helpText={
             hasUnparsedText && !isTextInvalid ? dateFormatError : undefined
           }
+          describedByIds={[timeZomeDescriptionId]}
         >
           <EuiFieldText
             compressed
@@ -212,6 +224,10 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
           />
         )}
       </EuiFlexGroup>
+      <EuiTimeZoneDisplay
+        id={timeZomeDescriptionId}
+        {...timeZoneDisplayProps}
+      />
     </>
   );
 };