SRML-64 - Update the flyout design based on the new mockup

changelog.txt

@@ -1,8 +1,10 @@
-Version 1.3.4 - 30th December, 2024
+Version 1.3.4 - 31th 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.
+- Improvement - Enhanced the UI of the Drawer component.
+- Improvement - Added a new prop to the Badge component to disable hover effect.
 - 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.

src/components/badge/badge.tsx

@@ -27,6 +27,11 @@ export interface BadgeProps {
 	 * Custom Icon for the badge.
 	 */
 	icon?: ReactNode;
+	/**
+	 * Disable hover effect.
+	 * @default false
+	 */
+	disableHover?: boolean;
 	/**
 	 * Defines if the badge is disabled.
 	 */
@@ -60,12 +65,13 @@ const Badge = forwardRef<Ref, BadgeProps>(
 			onClose = () => {},
 			closable = false,
 			onMouseDown = () => {},
+			disableHover = false,
 		},
 		ref
 	) => {
 		// Base classes - Mandatory classes
 		const baseClasses =
-			'font-medium border-badge-border-gray flex items-center justify-center border border-solid box-border max-w-full';
+			'font-medium border-badge-border-gray flex items-center justify-center border border-solid box-border max-w-full transition-colors duration-150 ease-in-out';
 
 		// Size classes - Based on the size prop
 		const sizeClasses = {
@@ -82,18 +88,29 @@ const Badge = forwardRef<Ref, BadgeProps>(
 			rounded: 'rounded',
 		};
 
+		// Hover classes - Based on the variant prop
+		const hoverClasses = {
+			neutral: 'hover:bg-badge-hover-gray',
+			red: 'hover:bg-badge-hover-red',
+			yellow: 'hover:bg-badge-hover-yellow',
+			green: 'hover:bg-badge-hover-green',
+			blue: 'hover:bg-badge-hover-sky',
+			inverse: 'hover:bg-badge-hover-inverse',
+			disabled: 'hover:bg-badge-hover-disabled',
+		};
+
 		// Variant classes - Based on the variant prop
 		const variantClasses = {
 			neutral:
-				'bg-badge-background-gray hover:bg-badge-hover-gray text-badge-color-gray border-badge-border-gray',
-			red: 'bg-badge-background-red hover:bg-badge-hover-red text-badge-color-red border-badge-border-red',
-			yellow: 'bg-badge-background-yellow hover:bg-badge-hover-yellow text-badge-color-yellow border-badge-border-yellow',
-			green: 'bg-badge-background-green hover:bg-badge-hover-green text-badge-color-green border-badge-border-green',
-			blue: 'bg-badge-background-sky hover:bg-badge-hover-sky text-badge-color-sky border-badge-border-sky',
+				'bg-badge-background-gray text-badge-color-gray border-badge-border-gray',
+			red: 'bg-badge-background-red text-badge-color-red border-badge-border-red',
+			yellow: 'bg-badge-background-yellow text-badge-color-yellow border-badge-border-yellow',
+			green: 'bg-badge-background-green text-badge-color-green border-badge-border-green',
+			blue: 'bg-badge-background-sky text-badge-color-sky border-badge-border-sky',
 			inverse:
-				'bg-background-inverse hover:bg-badge-hover-inverse text-text-inverse border-background-inverse',
+				'bg-background-inverse text-text-inverse border-background-inverse',
 			disabled:
-				'bg-badge-background-disabled hover:bg-badge-hover-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
+				'bg-badge-background-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
 		};
 
 		let filteredClasses = '';
@@ -127,6 +144,7 @@ const Badge = forwardRef<Ref, BadgeProps>(
 					typeClasses[ type ],
 					'gap-0.5',
 					filteredClasses,
+					! disableHover && hoverClasses[ variant ],
 					className
 				) }
 				ref={ ref }

src/components/drawer/drawer-body.tsx

@@ -15,7 +15,7 @@ const DrawerBody = ( { children, className, ...props }: DrawerBodyProps ) => {
 	return (
 		<div
 			className={ cn(
-				'px-5 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
+				'px-5 pb-4 pt-2 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
 				className
 			) }
 			{ ...props }

src/components/drawer/drawer-footer.tsx

@@ -28,9 +28,11 @@ const DrawerFooter = ( { children, className }: DrawerFooterProps ) => {
 	return (
 		<div
 			className={ cn(
-				'p-5 flex justify-end gap-3 mt-auto',
+				'px-5 py-4 flex justify-end gap-3 mt-auto',
 				{
 					'bg-background-secondary': design === 'footer-divided',
+					'border-t border-b-0 border-x-0 border-solid border-border-subtle':
+						design === 'footer-bordered',
 				},
 				className
 			) }

src/components/drawer/drawer-header.tsx

@@ -13,7 +13,7 @@ export interface DrawerHeaderProps {
 // Drawer header wrapper.
 const DrawerHeader = ( { children, className, ...props }: DrawerHeaderProps ) => {
 	return (
-		<div className={ cn( 'space-y-2 px-5 pt-5 pb-1', className ) } { ...props }>
+		<div className={ cn( 'space-y-2 px-5 pt-5 pb-4', className ) } { ...props }>
 			{ children }
 		</div>
 	);

src/components/drawer/drawer-panel.tsx

@@ -49,7 +49,7 @@ const DrawerPanel = ( { children, className }: DrawerPanelProps ) => {
 						<motion.div
 							ref={ drawerRef }
 							className={ cn(
-								'flex flex-col gap-5 w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
+								'flex flex-col w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
 								className
 							) }
 							initial="exit"

src/components/drawer/drawer.tsx

@@ -38,7 +38,7 @@ export interface DrawerProps {
 	/** Close drawer when pressing the escape key. */
 	exitOnEsc?: boolean;
 	/** Design of the drawer. */
-	design?: 'simple' | 'footer-divided';
+	design?: 'simple' | 'footer-divided' | 'footer-bordered';
 	/** Position of the drawer. */
 	position?: 'left' | 'right';
 	/** Duration of the drawer transition. */

src/components/select/select.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import { useEffect, useState } from 'react';
+import { startTransition, useLayoutEffect, useState } from 'react';
 import Select from './select';
 import Label from '../label';
 
@@ -43,22 +43,22 @@ const Template: Story = ( args ) => {
 		setSelected( value as unknown as string | [] );
 	};
 
-	useEffect( () => {
+	// Reset selected value when multiple prop changes.
+	useLayoutEffect( () => {
 		if ( args?.multiple ) {
-			setSelected( [] );
+			startTransition( () => {
+				setSelected( [] );
+			} );
 			return;
 		}
-		setSelected( '' );
+		startTransition( () => {
+			setSelected( '' );
+		} );
 	}, [ args ] );
 
 	return (
 		<div style={ { width: '260px' } }>
-			<Select
-				key={ args?.multiple ? 1 : 0 }
-				{ ...args }
-				onChange={ handleSelect }
-				value={ selected }
-			>
+			<Select { ...args } onChange={ handleSelect } value={ selected }>
 				<Select.Button label="Label" />
 				<Select.Portal>
 					<Select.Options>