[LG-5532] feat(time-input) display segment values

packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts

@@ -54,8 +54,12 @@ export const useDateSegments = (
       (isNull(date) || isUndefined(date)) && isValidDate(prevDate);
 
     if (hasDateValueChanged || hasDateBeenCleared) {
+      // This returns a new state object with the updated segments from the new date
       const newSegments = getFormattedSegmentsFromDate(date);
+      // Pass the new state and a copy of the previous state to the callback
       onUpdate?.(newSegments, { ...segments });
+      // This updates all segments in the internal state of the hook
+      // This internally invokes `dateSegmentsReducer` and passes `updateObject` as the second argument. `segments` is the first argument. This updates the internal state of the hook.
       dispatch(newSegments);
     }
   }, [date, onUpdate, prevDate, segments]);
@@ -69,8 +73,11 @@ export const useDateSegments = (
     // finally, commit the new state
 
     const updateObject = { [segment]: value };
+    // This returns a new state object with the updated segment
     const nextState = dateSegmentsReducer(segments, updateObject);
+    // Pass the new state and a copy of the previous state to the callback
     onUpdate?.(nextState, { ...segments }, segment);
+    // This internally invokes `dateSegmentsReducer` and passes `updateObject` as the second argument. `segments` is the first argument. This updates the internal state of the hook.
     dispatch(updateObject);
   };
 

packages/time-input/package.json

@@ -34,6 +34,7 @@
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/form-field": "workspace:^",
     "@leafygreen-ui/hooks": "workspace:^",
+    "@leafygreen-ui/input-box": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/select": "workspace:^",

packages/time-input/src/Context/TimeInputDisplayContext/TimeInputDisplayContext.tsx

@@ -5,6 +5,10 @@ import React, {
   useState,
 } from 'react';
 import defaults from 'lodash/defaults';
+import defaultTo from 'lodash/defaultTo';
+
+import { hasDayPeriod } from '../../utils';
+import { getFormatParts } from '../../utils/getFormatParts/getFormatParts';
 
 import {
   TimeInputDisplayContextProps,
@@ -37,7 +41,27 @@ export const TimeInputDisplayProvider = ({
     ...defaults(rest, defaultTimeInputDisplayContext),
   };
 
-  // TODO: min, max helpers
+  /**
+   * Determines if the input should show a select for the day period (AM/PM)
+   */
+  const is12HourFormat = !!hasDayPeriod(providerValue.locale);
+
+  /**
+   * Only used to track the presentation format of the segments, not the value itself
+   */
+  const formatParts = getFormatParts({
+    showSeconds: providerValue.showSeconds,
+  });
+
+  /**
+   * Gets the time zone from the provider value or the browser's default
+   */
+  const timeZone = defaultTo(
+    providerValue.timeZone,
+    Intl.DateTimeFormat().resolvedOptions().timeZone,
+  );
+
+  // TODO: min, max helpers will be in a future PR
 
   return (
     <TimeInputDisplayContext.Provider
@@ -48,6 +72,9 @@ export const TimeInputDisplayProvider = ({
         ariaLabelledbyProp,
         isDirty,
         setIsDirty,
+        is12HourFormat,
+        formatParts,
+        timeZone,
       }}
     >
       {children}

packages/time-input/src/Context/TimeInputDisplayContext/TimeInputDisplayContext.types.ts

@@ -4,6 +4,7 @@ import { AriaLabelPropsWithLabel } from '@leafygreen-ui/a11y';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 
 import { DisplayTimeInputProps } from '../../TimeInput/TimeInput.types';
+import { GetLgIdsReturnType } from '../../utils/getLgIds';
 
 type AriaLabelKeys = keyof AriaLabelPropsWithLabel;
 type AriaLabelKeysWithoutLabel = Exclude<AriaLabelKeys, 'label'>;
@@ -38,6 +39,24 @@ export type TimeInputDisplayContextProps = Omit<
    * Setter for whether the input has been interacted with
    */
   setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
+
+  /**
+   * Whether the time input is in 12-hour format. Helps determine if the AM/PM select should be shown.
+   *
+   * @default false
+   */
+  is12HourFormat: boolean;
+
+  /**
+   * An array of {@link Intl.DateTimeFormatPart},
+   * used to determine the order of segments in the input
+   */
+  formatParts?: Array<Intl.DateTimeFormatPart>;
+
+  /**
+   * LGIDs for the code snippet.
+   */
+  lgIds: GetLgIdsReturnType;
 };
 
 /**
@@ -62,4 +81,9 @@ export type TimeInputDisplayProviderProps = Omit<
    * The aria-labelledby prop
    */
   'aria-labelledby'?: string;
+
+  /**
+   * LGIDs for the code snippet.
+   */
+  lgIds?: GetLgIdsReturnType;
 };

packages/time-input/src/Context/TimeInputDisplayContext/TimePickerDisplayContext.utils.ts

@@ -6,13 +6,17 @@ import {
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
 import { Size } from '../../TimeInput/TimeInput.types';
+import { getLgIds } from '../../utils/getLgIds';
 
 import {
   TimeInputDisplayContextProps,
   TimeInputDisplayProviderProps,
 } from './TimeInputDisplayContext.types';
 
-export type DisplayContextPropKeys = keyof TimeInputDisplayProviderProps;
+export type DisplayContextPropKeys = Exclude<
+  keyof TimeInputDisplayProviderProps,
+  'lgIds'
+>;
 
 /**
  * Props names that that are added to the context and used to pick and omit props
@@ -31,6 +35,7 @@ export const displayContextPropNames: Array<DisplayContextPropKeys> = [
   'size',
   'errorMessage',
   'state',
+  'showSeconds',
 ];
 
 /**
@@ -51,4 +56,7 @@ export const defaultTimeInputDisplayContext: TimeInputDisplayContextProps = {
   errorMessage: '',
   isDirty: false,
   setIsDirty: () => {},
+  is12HourFormat: false,
+  showSeconds: true,
+  lgIds: getLgIds(),
 };

packages/time-input/src/TimeFormField/TimeFormField/TimeFormField.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { FormField } from '@leafygreen-ui/form-field';
+
+import { useTimeInputDisplayContext } from '../../Context/TimeInputDisplayContext';
+
+import { TimeFormFieldProps } from './TimeFormField.types';
+
+/**
+ * A wrapper around `FormField` that sets the relevant
+ * attributes, and styling
+ */
+export const TimeFormField = React.forwardRef<
+  HTMLDivElement,
+  TimeFormFieldProps
+>(({ children, ...rest }: TimeFormFieldProps, fwdRef) => {
+  const {
+    label,
+    description,
+    // stateNotification: { state, message: errorMessage },
+    disabled,
+    size,
+  } = useTimeInputDisplayContext();
+
+  return (
+    <FormField
+      label={label}
+      description={description}
+      disabled={disabled}
+      // state={state}
+      // errorMessage={errorMessage}
+      size={size}
+      ref={fwdRef}
+      {...rest}
+    >
+      {children}
+    </FormField>
+  );
+});
+
+TimeFormField.displayName = 'TimeFormField';

packages/time-input/src/TimeFormField/TimeFormField/TimeFormField.types.ts

@@ -0,0 +1,5 @@
+import { FormFieldProps } from '@leafygreen-ui/form-field';
+
+export type TimeFormFieldProps = React.ComponentPropsWithoutRef<'div'> & {
+  children: FormFieldProps['children'];
+};

packages/time-input/src/TimeFormField/TimeFormFieldInputContainer/TimeFormFieldInputContainer.styles.ts

@@ -0,0 +1,22 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+
+const selectStyles = css`
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+
+const baseStyles = css`
+  &:hover,
+  &:focus-within {
+    z-index: 1;
+  }
+`;
+
+export const getContainerStyles = ({
+  is12HourFormat,
+}: {
+  is12HourFormat: boolean;
+}) =>
+  cx(baseStyles, {
+    [selectStyles]: is12HourFormat,
+  });

packages/time-input/src/TimeFormField/TimeFormFieldInputContainer/TimeFormFieldInputContainer.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { FormFieldInputContainer } from '@leafygreen-ui/form-field';
+
+import { useTimeInputDisplayContext } from '../../Context/TimeInputDisplayContext';
+
+import { getContainerStyles } from './TimeFormFieldInputContainer.styles';
+import { TimeFormFieldInputContainerProps } from './TimeFormFieldInputContainer.types';
+
+/**
+ * A wrapper around `FormField` that sets the relevant
+ * attributes, and styling
+ */
+export const TimeFormFieldInputContainer = React.forwardRef<
+  HTMLDivElement,
+  TimeFormFieldInputContainerProps
+>(({ children, onInputClick }: TimeFormFieldInputContainerProps, fwdRef) => {
+  const { label, ariaLabelProp, ariaLabelledbyProp, is12HourFormat } =
+    useTimeInputDisplayContext();
+
+  return (
+    <FormFieldInputContainer
+      ref={fwdRef}
+      role="combobox"
+      tabIndex={-1}
+      aria-label={!label && ariaLabelProp ? ariaLabelProp : undefined}
+      aria-labelledby={
+        !label && !ariaLabelProp && ariaLabelledbyProp
+          ? ariaLabelledbyProp
+          : undefined
+      }
+      onClick={onInputClick}
+      className={getContainerStyles({ is12HourFormat })}
+    >
+      {children}
+    </FormFieldInputContainer>
+  );
+});
+
+TimeFormFieldInputContainer.displayName = 'TimeFormFieldInputContainer';

packages/time-input/src/TimeFormField/TimeFormFieldInputContainer/TimeFormFieldInputContainer.types.ts

@@ -0,0 +1,7 @@
+import { FormFieldProps } from '@leafygreen-ui/form-field';
+
+export type TimeFormFieldInputContainerProps =
+  React.ComponentPropsWithoutRef<'div'> & {
+    children: FormFieldProps['children'];
+    onInputClick?: React.MouseEventHandler<HTMLDivElement>;
+  };

packages/time-input/src/TimeFormField/index.ts

@@ -0,0 +1,2 @@
+export { TimeFormField } from './TimeFormField/TimeFormField';
+export { TimeFormFieldInputContainer } from './TimeFormFieldInputContainer/TimeFormFieldInputContainer';

packages/time-input/src/TimeInput.stories.tsx

@@ -1,19 +1,63 @@
-import React from 'react';
-import { type StoryMetaType } from '@lg-tools/storybook-utils';
+import React, { useState } from 'react';
+import {
+  storybookArgTypes,
+  type StoryMetaType,
+} from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
+import { DateType, SupportedLocales } from '@leafygreen-ui/date-utils';
+
+import { Size } from './TimeInput/TimeInput.types';
 import { TimeInput } from '.';
 
 const meta: StoryMetaType<typeof TimeInput> = {
   title: 'Components/Inputs/TimeInput',
   component: TimeInput,
   parameters: {
     default: 'LiveExample',
+    controls: {
+      exclude: [
+        'handleValidation',
+        'initialValue',
+        'onChange',
+        'onDateChange',
+        'onSegmentChange',
+        'value',
+        'onTimeChange',
+        'data-lgid',
+        'data-testid',
+      ],
+    },
+  },
+  args: {
+    showSeconds: true,
+    locale: SupportedLocales.ISO_8601,
+    timeZone: 'UTC',
+    label: 'Time Input',
+    darkMode: false,
+    size: Size.Default,
+  },
+  argTypes: {
+    locale: { control: 'select', options: Object.values(SupportedLocales) },
+    timeZone: {
+      control: 'select',
+      options: [undefined, 'UTC', 'America/New_York', 'Europe/London'],
+    },
+    darkMode: storybookArgTypes.darkMode,
+    size: { control: 'select', options: Object.values(Size) },
   },
 };
 
 export default meta;
 
-const Template: StoryFn<typeof TimeInput> = props => <TimeInput {...props} />;
+const Template: StoryFn<typeof TimeInput> = props => {
+  const [value, setValue] = useState<DateType | undefined>(
+    new Date('1990-02-20T14:30:50Z'),
+  );
+
+  return (
+    <TimeInput {...props} value={value} onTimeChange={time => setValue(time)} />
+  );
+};
 
 export const LiveExample = Template.bind({});

packages/time-input/src/TimeInput/TimeInput.tsx

@@ -16,6 +16,7 @@ import {
   displayContextPropNames,
 } from '../Context/TimeInputDisplayContext/TimePickerDisplayContext.utils';
 import { TimeInputContent } from '../TimeInputContent';
+import { getLgIds } from '../utils/getLgIds';
 
 import { TimeInputProps } from './TimeInput.types';
 
@@ -26,7 +27,7 @@ export const TimeInput = forwardRef<HTMLDivElement, TimeInputProps>(
       onTimeChange: onChangeProp,
       handleValidation,
       initialValue: initialValueProp,
-      'data-lgid': _dataLgId,
+      'data-lgid': dataLgId,
       darkMode: darkModeProp,
       baseFontSize: basefontSizeProp,
       ...props
@@ -35,6 +36,7 @@ export const TimeInput = forwardRef<HTMLDivElement, TimeInputProps>(
   ) => {
     const { darkMode } = useDarkMode(darkModeProp);
     const baseFontSize = useUpdatedBaseFontSize(basefontSizeProp);
+    const lgIds = getLgIds(dataLgId);
 
     const { value, updateValue } = useControlled<DateType | undefined>(
       valueProp,
@@ -55,7 +57,7 @@ export const TimeInput = forwardRef<HTMLDivElement, TimeInputProps>(
         darkMode={darkMode}
         baseFontSize={baseFontSize === BaseFontSize.Body1 ? 14 : baseFontSize}
       >
-        <TimeInputDisplayProvider {...displayProps}>
+        <TimeInputDisplayProvider {...displayProps} lgIds={lgIds}>
           <TimeInputProvider
             value={value}
             setValue={updateValue}

packages/time-input/src/TimeInput/TimeInput.types.ts

@@ -78,6 +78,13 @@ export type DisplayTimeInputProps = {
    * A message to show in red underneath the input when state is `Error`
    */
   errorMessage?: string;
+
+  /**
+   * Whether to show seconds in the input.
+   *
+   * @default true
+   */
+  showSeconds?: boolean;
 } & DarkModeProps &
   AriaLabelPropsWithLabel;