Merge pull request #236 from brainstormforce/date-picker-and-change-log

Updated the change log and fix datepicker component UI

changelog.txt

@@ -1,9 +1,13 @@
-Version 1.3.4 - 27th December, 2024
+Version 1.3.4 - 30th December, 2024
 - Improvement - Enhanced the UI of the Table and Line chart component for responsive design.
 - Improvement - Added option group to the Select component.
 - Improvement - Updated the Table component design.
 - Improvement - Added support for controlling selected dates through the 'selected' prop in DatePicker component.
+- Fixed - Adjusted search icon size in Select combobox for better visual consistency.
+- Fixed - Focus ring offset of Select, Switch, Checkbox, and dropdown component.
+- Fixed - Checkbox/Switch toggle behavior with hint text and adjusted help text size.
 - Fixed - DatePicker component crash when navigating through years.
+- Fixed - DatePicker component UI styles for better visual consistency.
 
 Version 1.3.3 - 20th December, 2024
 - Fixed - React `Each child in a list should have a unique "key" prop` console warning.

src/components/datepicker/datepicker-component.tsx

@@ -361,7 +361,7 @@ const DatePickerComponent = ( {
 
 		// Common class for disabled outside days
 		const disabledOutsideClass =
-			'bg-transperant opacity-50 text-text-disabled cursor-auto';
+			'bg-transparent opacity-50 text-text-disabled cursor-auto';
 
 		const buttonClasses = cn(
 			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm',
@@ -391,7 +391,7 @@ const DatePickerComponent = ( {
 			>
 				{ ( ! showOutsideDates || ( isPartOfRange && shouldShowDay ) ) &&
 					format( day.date, 'd' ) }
-				{ isToday && (
+				{ isToday && shouldShowDay && (
 					<span className="absolute h-1 w-1 bg-background-brand rounded-full bottom-1"></span>
 				) }
 			</button>

src/components/datepicker/datepicker.tsx

@@ -208,13 +208,13 @@ const DatePicker = ( {
 	if ( variant === 'presets' ) {
 		return (
 			<div className="flex flex-row shadow-datepicker-wrapper">
-				<div className="flex flex-col gap-1 p-3 items-start border border-solid border-border-subtle border-r-0 rounded-tl-md rounded-bl-md">
+				<div className="flex flex-col gap-1 p-3 items-start border border-solid border-border-subtle border-r-0 rounded-tl-md rounded-bl-md bg-background-primary">
 					{ presets.map( ( preset, index ) => (
 						<Button
 							key={ index }
 							onClick={ () => handlePresetClick( preset.range ) }
 							variant="ghost"
-							className="font-medium text-sm"
+							className="font-medium text-sm text-nowrap"
 						>
 							{ preset.label }
 						</Button>
@@ -234,7 +234,7 @@ const DatePicker = ( {
 					width="w-auto"
 					numberOfMonths={ 2 }
 					footer={
-						<div className="flex justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none bg-background-primary">
+						<div className="flex justify-end p-2 gap-3 border-l border-r border-t-0 border-b border-solid border-border-subtle bg-background-primary rounded-br-md">
 							<Button
 								variant="outline"
 								onClick={ handleCancelClick }

src/components/table/table.tsx

@@ -397,11 +397,7 @@ export const TableFooter: React.FC<TableFooterProps> = ( {
 	const { checkboxSelection } = useTableContext();
 	return (
 		<div
-			className={ cn(
-				'px-3 py-3',
-				checkboxSelection && 'px-4',
-				className
-			) }
+			className={ cn( 'px-3 py-3', checkboxSelection && 'px-4', className ) }
 			{ ...props }
 		>
 			{ children }