TimeInput: Add label prop (#63106)

* TimeInput: Add `label` prop * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
WordPress · Jul 4, 2024 · cae3225 · cae3225
1 parent 2f00bfd
commit cae3225
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 74 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -25,6 +25,7 @@
 -   `CustomSelectControlV2`: allow wrapping item hint to new line ([#62848](https://github.com/WordPress/gutenberg/pull/62848)).
 -   `CustomSelectControlV2`: fix select popover content overflow. ([#62844](https://github.com/WordPress/gutenberg/pull/62844))
 -   Extract `TimeInput` component from `TimePicker` ([#60613](https://github.com/WordPress/gutenberg/pull/60613)).
+-   `TimeInput`: Add `label` prop ([#63106](https://github.com/WordPress/gutenberg/pull/63106)).
 
 ## 28.2.0 (2024-06-26)
 

diff --git a/packages/components/src/date-time/stories/time-input.story.tsx b/packages/components/src/date-time/stories/time-input.story.tsx
@@ -31,3 +31,6 @@ const Template: StoryFn< typeof TimeInput > = ( args ) => {
 };
 
 export const Default: StoryFn< typeof TimeInput > = Template.bind( {} );
+Default.args = {
+	label: 'Time',
+};
diff --git a/packages/components/src/date-time/time-input/index.tsx b/packages/components/src/date-time/time-input/index.tsx
@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,6 +17,7 @@ import {
 	TimeSeparator,
 	HoursInput,
 	MinutesInput,
+	Fieldset,
 } from '../time/styles';
 import { HStack } from '../../h-stack';
 import Button from '../../button';
@@ -29,11 +31,13 @@ import {
 import type { TimeInputProps } from '../types';
 import type { InputChangeCallback } from '../../input-control/types';
 import { useControlledValue } from '../../utils';
+import BaseControl from '../../base-control';
 
 export function TimeInput( {
 	value: valueProp,
 	defaultValue,
 	is12Hour,
+	label,
 	minutesProps,
 	onChange,
 }: TimeInputProps ) {
@@ -89,86 +93,104 @@ export function TimeInput( {
 		return _hours < 12 ? 'AM' : 'PM';
 	}
 
+	const Wrapper = label ? Fieldset : Fragment;
+
 	return (
-		<HStack alignment="left">
-			<TimeWrapper
-				className="components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
-			>
-				<HoursInput
-					className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
-					label={ __( 'Hours' ) }
-					hideLabelFromVision
-					__next40pxDefaultSize
-					value={ String(
-						is12Hour ? hours12Format : value.hours
-					).padStart( 2, '0' ) }
-					step={ 1 }
-					min={ is12Hour ? 1 : 0 }
-					max={ is12Hour ? 12 : 23 }
-					required
-					spinControls="none"
-					isPressEnterToChange
-					isDragEnabled={ false }
-					isShiftStepEnabled={ false }
-					onChange={ buildNumberControlChangeCallback( 'hours' ) }
-					__unstableStateReducer={ buildPadInputStateReducer( 2 ) }
-				/>
-				<TimeSeparator
-					className="components-datetime__time-separator" // Unused, for backwards compatibility.
-					aria-hidden="true"
-				>
-					:
-				</TimeSeparator>
-				<MinutesInput
-					className={ clsx(
-						'components-datetime__time-field-minutes-input', // Unused, for backwards compatibility.
-						minutesProps?.className
-					) }
-					label={ __( 'Minutes' ) }
-					hideLabelFromVision
-					__next40pxDefaultSize
-					value={ String( value.minutes ).padStart( 2, '0' ) }
-					step={ 1 }
-					min={ 0 }
-					max={ 59 }
-					required
-					spinControls="none"
-					isPressEnterToChange
-					isDragEnabled={ false }
-					isShiftStepEnabled={ false }
-					onChange={ ( ...args ) => {
-						buildNumberControlChangeCallback( 'minutes' )(
-							...args
-						);
-						minutesProps?.onChange?.( ...args );
-					} }
-					__unstableStateReducer={ buildPadInputStateReducer( 2 ) }
-					{ ...minutesProps }
-				/>
-			</TimeWrapper>
-			{ is12Hour && (
-				<ButtonGroup
-					className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+		<Wrapper>
+			{ label && (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+
+			<HStack alignment="left">
+				<TimeWrapper
+					className="components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
 				>
-					<Button
-						className="components-datetime__time-am-button" // Unused, for backwards compatibility.
-						variant={ dayPeriod === 'AM' ? 'primary' : 'secondary' }
+					<HoursInput
+						className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+						label={ __( 'Hours' ) }
+						hideLabelFromVision
 						__next40pxDefaultSize
-						onClick={ buildAmPmChangeCallback( 'AM' ) }
+						value={ String(
+							is12Hour ? hours12Format : value.hours
+						).padStart( 2, '0' ) }
+						step={ 1 }
+						min={ is12Hour ? 1 : 0 }
+						max={ is12Hour ? 12 : 23 }
+						required
+						spinControls="none"
+						isPressEnterToChange
+						isDragEnabled={ false }
+						isShiftStepEnabled={ false }
+						onChange={ buildNumberControlChangeCallback( 'hours' ) }
+						__unstableStateReducer={ buildPadInputStateReducer(
+							2
+						) }
+					/>
+					<TimeSeparator
+						className="components-datetime__time-separator" // Unused, for backwards compatibility.
+						aria-hidden="true"
 					>
-						{ __( 'AM' ) }
-					</Button>
-					<Button
-						className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
-						variant={ dayPeriod === 'PM' ? 'primary' : 'secondary' }
+						:
+					</TimeSeparator>
+					<MinutesInput
+						className={ clsx(
+							'components-datetime__time-field-minutes-input', // Unused, for backwards compatibility.
+							minutesProps?.className
+						) }
+						label={ __( 'Minutes' ) }
+						hideLabelFromVision
 						__next40pxDefaultSize
-						onClick={ buildAmPmChangeCallback( 'PM' ) }
+						value={ String( value.minutes ).padStart( 2, '0' ) }
+						step={ 1 }
+						min={ 0 }
+						max={ 59 }
+						required
+						spinControls="none"
+						isPressEnterToChange
+						isDragEnabled={ false }
+						isShiftStepEnabled={ false }
+						onChange={ ( ...args ) => {
+							buildNumberControlChangeCallback( 'minutes' )(
+								...args
+							);
+							minutesProps?.onChange?.( ...args );
+						} }
+						__unstableStateReducer={ buildPadInputStateReducer(
+							2
+						) }
+						{ ...minutesProps }
+					/>
+				</TimeWrapper>
+				{ is12Hour && (
+					<ButtonGroup
+						className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
 					>
-						{ __( 'PM' ) }
-					</Button>
-				</ButtonGroup>
-			) }
-		</HStack>
+						<Button
+							className="components-datetime__time-am-button" // Unused, for backwards compatibility.
+							variant={
+								dayPeriod === 'AM' ? 'primary' : 'secondary'
+							}
+							__next40pxDefaultSize
+							onClick={ buildAmPmChangeCallback( 'AM' ) }
+						>
+							{ __( 'AM' ) }
+						</Button>
+						<Button
+							className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
+							variant={
+								dayPeriod === 'PM' ? 'primary' : 'secondary'
+							}
+							__next40pxDefaultSize
+							onClick={ buildAmPmChangeCallback( 'PM' ) }
+						>
+							{ __( 'PM' ) }
+						</Button>
+					</ButtonGroup>
+				) }
+			</HStack>
+		</Wrapper>
 	);
 }
 export default TimeInput;
diff --git a/packages/components/src/date-time/types.ts b/packages/components/src/date-time/types.ts
@@ -61,6 +61,11 @@ export type TimeInputProps = {
 	 */
 	minutesProps?: React.ComponentProps< typeof MinutesInput >;
 
+	/**
+	 * The label for the time input.
+	 */
+	label?: string;
+
 	/**
 	 * The function is called when a new time has been selected.
 	 * Passing hours and minutes as an object properties.