[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

@@ -41,21 +41,28 @@ 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 is12hFormat = !!hasDayPeriod(providerValue.locale);
+  /**
+   * 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
+  /**
+   * 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
       value={{
@@ -65,7 +72,7 @@ export const TimeInputDisplayProvider = ({
         ariaLabelledbyProp,
         isDirty,
         setIsDirty,
-        is12hFormat,
+        is12HourFormat,
         formatParts,
         timeZone,
       }}

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

@@ -40,9 +40,11 @@ export type TimeInputDisplayContextProps = Omit<
   setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
 
   /**
-   * Whether the AM/PM select should be shown
+   * Whether the time input is in 12-hour format. Helps determine if the AM/PM select should be shown.
+   *
+   * @default false
    */
-  is12hFormat: boolean;
+  is12HourFormat: boolean;
 
   /**
    * An array of {@link Intl.DateTimeFormatPart},

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

@@ -52,6 +52,6 @@ export const defaultTimeInputDisplayContext: TimeInputDisplayContextProps = {
   errorMessage: '',
   isDirty: false,
   setIsDirty: () => {},
-  is12hFormat: false,
+  is12HourFormat: false,
   showSeconds: true,
 };

packages/time-input/src/Context/TimeInputDisplayContext/Index.ts → packages/time-input/src/Context/TimeInputDisplayContext/index.ts

@@ -7,4 +7,4 @@ export {
   type TimeInputDisplayContextProps,
   type TimeInputDisplayProviderProps,
 } from './TimeInputDisplayContext.types';
-export { defaultTimeInputDisplayContext } from './TimePickerDisplayContext.utils';
+export { defaultTimeInputDisplayContext } from './TimePickerDisplayContext.utils'; //

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,9 +1,13 @@
 import React, { useState } from 'react';
-import { type StoryMetaType } from '@lg-tools/storybook-utils';
+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> = {
@@ -20,20 +24,27 @@ const meta: StoryMetaType<typeof TimeInput> = {
         '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) },
   },
 };
 

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { InputBox } from '@leafygreen-ui/input-box';
+
+import { getTimeSegmentRules } from '../constants';
+import { useTimeInputDisplayContext } from '../Context/TimeInputDisplayContext/TimeInputDisplayContext';
+import { TimeSegment } from '../shared.types';
+import { TimeInputSegment } from '../TimeInputSegment/TimeInputSegment';
+
+import { TimeInputBoxProps } from './TimeInputBox.types';
+
+export const TimeInputBox = React.forwardRef<HTMLDivElement, TimeInputBoxProps>(
+  ({ children, ...rest }: TimeInputBoxProps, fwdRef) => {
+    const { disabled, formatParts, size, is12HourFormat } =
+      useTimeInputDisplayContext();
+    return (
+      <InputBox
+        ref={fwdRef}
+        segmentEnum={TimeSegment}
+        segmentRules={getTimeSegmentRules({ is12HourFormat })}
+        disabled={disabled}
+        segmentComponent={TimeInputSegment}
+        size={size}
+        formatParts={formatParts}
+        {...rest}
+      />
+    );
+  },
+);
+
+TimeInputBox.displayName = 'TimeInputBox';

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

@@ -0,0 +1,7 @@
+import { TimeSegment, TimeSegmentsState } from '../shared.types';
+
+export interface TimeInputBoxProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  segments: TimeSegmentsState;
+  setSegment: (segment: TimeSegment, value: string) => void;
+}