[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.spec.tsx

@@ -6,13 +6,17 @@ import { renderHook } from '@leafygreen-ui/testing-lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
 import { Size } from '../../TimeInput/TimeInput.types';
+import { getLgIds } from '../../utils';
 
 import {
   TimeInputDisplayProvider,
   useTimeInputDisplayContext,
 } from './TimeInputDisplayContext';
 import { type TimeInputDisplayProviderProps } from './TimeInputDisplayContext.types';
-import { defaultTimeInputDisplayContext } from './TimePickerDisplayContext.utils';
+import { defaultTimeInputDisplayContext } from './TimeInputDisplayContext.utils';
+
+const lgIds = getLgIds();
+const overrideLgIds = getLgIds('lg-override-lgids');
 
 const renderTimeInputDisplayProvider = (
   props?: Partial<TimeInputDisplayProviderProps>,
@@ -60,6 +64,7 @@ describe('packages/time-input-display-context', () => {
         defaultTimeInputDisplayContext.isDirty,
       );
       expect(typeof result.current.setIsDirty).toBe('function');
+      expect(result.current.lgIds).toEqual(lgIds);
     });
 
     test('overrides default values with provided props', () => {
@@ -73,6 +78,7 @@ describe('packages/time-input-display-context', () => {
         disabled: true,
         size: Size.Large,
         errorMessage: 'Custom error message',
+        lgIds: overrideLgIds,
       };
 
       const { result } = renderTimeInputDisplayProvider(customProps);
@@ -86,6 +92,7 @@ describe('packages/time-input-display-context', () => {
       expect(result.current.disabled).toBe(true);
       expect(result.current.size).toBe(Size.Large);
       expect(result.current.errorMessage).toBe('Custom error message');
+      expect(result.current.lgIds).toEqual(overrideLgIds);
     });
 
     describe('isDirty', () => {

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

@@ -12,7 +12,7 @@ import {
   TimeInputDisplayContextProps,
   TimeInputDisplayProviderProps,
 } from './TimeInputDisplayContext.types';
-import { defaultTimeInputDisplayContext } from './TimePickerDisplayContext.utils';
+import { defaultTimeInputDisplayContext } from './TimeInputDisplayContext.utils';
 
 export const TimeInputDisplayContext =
   createContext<TimeInputDisplayContextProps>(defaultTimeInputDisplayContext);
@@ -39,12 +39,14 @@ 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,
   });
@@ -58,7 +60,7 @@ export const TimeInputDisplayProvider = ({
         ariaLabelledbyProp,
         isDirty,
         setIsDirty,
-        is12hFormat,
+        is12HourFormat,
         formatParts,
       }}
     >

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

@@ -4,11 +4,19 @@ 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'>;
 type DarkModeKeys = keyof DarkModeProps;
 
+/**
+ * Dynamically generated LGIDs that will be used for the data-lgid and data-testid attributes in child components
+ */
+interface LgIds {
+  lgIds: GetLgIdsReturnType;
+}
+
 /**
  * The values in context that can be used in the component
  * Omits the aria-label and aria-labelledby props and replaces them with the ariaLabelProp and ariaLabelledbyProp
@@ -18,38 +26,41 @@ type DarkModeKeys = keyof DarkModeProps;
 export type TimeInputDisplayContextProps = Omit<
   Required<DisplayTimeInputProps>,
   AriaLabelKeysWithoutLabel | 'state' | DarkModeKeys
-> & {
-  /**
-   *  The aria-label prop
-   */
-  ariaLabelProp: string;
+> &
+  LgIds & {
+    /**
+     *  The aria-label prop
+     */
+    ariaLabelProp: string;
 
-  /**
-   * The aria-labelledby prop
-   */
-  ariaLabelledbyProp: string;
+    /**
+     * The aria-labelledby prop
+     */
+    ariaLabelledbyProp: string;
 
-  /**
-   * Whether the input has been interacted with
-   */
-  isDirty: boolean;
+    /**
+     * Whether the input has been interacted with
+     */
+    isDirty: boolean;
 
-  /**
-   * Setter for whether the input has been interacted with
-   */
-  setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Setter for whether the input has been interacted with
+     */
+    setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
 
-  /**
-   * Whether the AM/PM select should be shown
-   */
-  is12hFormat: 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>;
-};
+    /**
+     * An array of {@link Intl.DateTimeFormatPart},
+     * used to determine the order of segments in the input
+     */
+    formatParts?: Array<Intl.DateTimeFormatPart>;
+  };
 
 /**
  * The props expected to pass into the provider
@@ -58,19 +69,20 @@ export type TimeInputDisplayContextProps = Omit<
 export type TimeInputDisplayProviderProps = Omit<
   DisplayTimeInputProps,
   AriaLabelKeys | DarkModeKeys
-> & {
-  /**
-   * The label prop
-   */
-  label?: ReactNode;
+> &
+  Partial<LgIds> & {
+    /**
+     * The label prop
+     */
+    label?: ReactNode;
 
-  /**
-   * The aria-label prop
-   */
-  'aria-label'?: string;
+    /**
+     * The aria-label prop
+     */
+    'aria-label'?: string;
 
-  /**
-   * The aria-labelledby prop
-   */
-  'aria-labelledby'?: string;
-};
+    /**
+     * The aria-labelledby prop
+     */
+    'aria-labelledby'?: string;
+  };

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

@@ -1 +1,62 @@
-// TODO: min, max helpers
+import {
+  MAX_DATE,
+  MIN_DATE,
+  SupportedLocales,
+} from '@leafygreen-ui/date-utils';
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import { Size } from '../../TimeInput/TimeInput.types';
+import { getLgIds } from '../../utils';
+
+import {
+  TimeInputDisplayContextProps,
+  TimeInputDisplayProviderProps,
+} from './TimeInputDisplayContext.types';
+
+export type DisplayContextPropKeys = Exclude<
+  keyof TimeInputDisplayProviderProps,
+  'lgIds'
+>;
+
+/**
+ * Props names that that are added to the context and used to pick and omit props
+ */
+export const displayContextPropNames: Array<DisplayContextPropKeys> = [
+  'aria-label',
+  'aria-labelledby',
+  'label',
+  'description',
+  'locale',
+  'timeZone',
+  'min',
+  'max',
+  'baseFontSize',
+  'disabled',
+  'size',
+  'errorMessage',
+  'state',
+  'showSeconds',
+];
+
+/**
+ * The default display context values
+ */
+export const defaultTimeInputDisplayContext: TimeInputDisplayContextProps = {
+  ariaLabelProp: '',
+  ariaLabelledbyProp: '',
+  label: '',
+  description: '',
+  locale: SupportedLocales.ISO_8601,
+  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  min: MIN_DATE,
+  max: MAX_DATE,
+  baseFontSize: BaseFontSize.Body1,
+  disabled: false,
+  size: Size.Default,
+  errorMessage: '',
+  isDirty: false,
+  setIsDirty: () => {},
+  is12HourFormat: false,
+  showSeconds: true,
+  lgIds: getLgIds(),
+};

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

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

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

@@ -0,0 +1,2 @@
+export * from './TimeInputContext';
+export * from './TimeInputDisplayContext';