[EuiSuperDatePicker] Time zone display (#9191)

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 zone information, opt-in via `timeZoneDisplayProps`.
+

packages/eui/.loki/reference/chrome_desktop_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/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png

@@ -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/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png

@@ -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}
+      />
     </>
   );
 };

packages/eui/changelogs/upcoming/9191.md

@@ -25,6 +25,7 @@ import {
   EuiDatePopoverContent,
   EuiDatePopoverContentProps,
 } from './date_popover_content';
+import { type EuiTimeZoneDisplayProps } from './timezone_display';
 
 import { euiDatePopoverButtonStyles } from './date_popover_button.styles';
 
@@ -50,6 +51,7 @@ export interface EuiDatePopoverButtonProps {
   maxDate?: Moment;
   compressed?: boolean;
   timeOptions: TimeOptions;
+  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;
 }
 
 export const EuiDatePopoverButton: FunctionComponent<
@@ -76,6 +78,7 @@ export const EuiDatePopoverButton: FunctionComponent<
     onPopoverClose,
     compressed,
     timeOptions,
+    timeZoneDisplayProps = {},
     ...rest
   } = props;
 
@@ -157,6 +160,7 @@ export const EuiDatePopoverButton: FunctionComponent<
         timeOptions={timeOptions}
         minDate={minDate}
         maxDate={maxDate}
+        timeZoneDisplayProps={timeZoneDisplayProps}
       />
     </EuiPopover>
   );

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

@@ -26,6 +26,7 @@ import {
 import { EuiAbsoluteTab } from './absolute_tab';
 import { EuiRelativeTab } from './relative_tab';
 import { euiDatePopoverContentStyles } from './date_popover_content.styles';
+import { type EuiTimeZoneDisplayProps } from './timezone_display';
 
 export interface EuiDatePopoverContentProps {
   value: string;
@@ -40,6 +41,7 @@ export interface EuiDatePopoverContentProps {
   minDate?: Moment;
   maxDate?: Moment;
   timeOptions: TimeOptions;
+  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;
 }
 
 export const EuiDatePopoverContent: FunctionComponent<
@@ -57,6 +59,7 @@ export const EuiDatePopoverContent: FunctionComponent<
   timeOptions,
   minDate,
   maxDate,
+  timeZoneDisplayProps = {},
 }) => {
   const styles = useEuiMemoizedStyles(euiDatePopoverContentStyles);
 
@@ -107,6 +110,7 @@ export const EuiDatePopoverContent: FunctionComponent<
           utcOffset={utcOffset}
           minDate={minDate}
           maxDate={maxDate}
+          timeZoneDisplayProps={timeZoneDisplayProps}
         />
       ),
       'data-test-subj': 'superDatePickerAbsoluteTab',
@@ -126,6 +130,7 @@ export const EuiDatePopoverContent: FunctionComponent<
           roundUp={roundUp}
           labelPrefix={labelPrefix}
           timeOptions={timeOptions}
+          timeZoneDisplayProps={timeZoneDisplayProps}
         />
       ),
       'data-test-subj': 'superDatePickerRelativeTab',