DataForm: Update the style of the datetime fields to match the other …

…types (#64438) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>
WordPress · Aug 12, 2024 · 7969ba3 · 7969ba3
1 parent ba8c2c0
commit 7969ba3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/dataviews/src/dataform-controls/datetime.tsx b/packages/dataviews/src/dataform-controls/datetime.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { BaseControl, TimePicker } from '@wordpress/components';
+import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 
 /**
@@ -13,6 +13,7 @@ export default function DateTime< Item >( {
 	data,
 	field,
 	onChange,
+	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
 	const { id, label } = field;
 	const value = field.getValue( { item: data } );
@@ -23,10 +24,15 @@ export default function DateTime< Item >( {
 	);
 
 	return (
-		<fieldset>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
+		<fieldset className="dataviews-controls__datetime">
+			{ ! hideLabelFromVision && (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+			{ hideLabelFromVision && (
+				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
+			) }
 			<TimePicker
 				currentTime={ value }
 				onChange={ onChangeControl }

diff --git a/packages/dataviews/src/dataform-controls/style.scss b/packages/dataviews/src/dataform-controls/style.scss
@@ -0,0 +1,4 @@
+.dataviews-controls__datetime {
+	border: none;
+	padding: 0;
+}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -11,4 +11,5 @@
 @import "./dataviews-layouts/list/style.scss";
 @import "./dataviews-layouts/table/style.scss";
 
+@import "./dataform-controls/style.scss";
 @import "./dataforms-layouts/panel/style.scss";