From b7c481af573b30e3827188aad1681a0453942625 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 31 Dec 2024 09:10:27 +0600 Subject: [PATCH 1/6] fix: Select story crashes after enabling multiple --- src/components/select/select.stories.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/select/select.stories.tsx b/src/components/select/select.stories.tsx index a3907c05..de2aba34 100644 --- a/src/components/select/select.stories.tsx +++ b/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 (
- From f5ddb33e5eb0cad01290f5ba4f47babf7afdd3ef Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 31 Dec 2024 10:12:28 +0600 Subject: [PATCH 2/6] Added new design variation to the Drawer component --- src/components/drawer/drawer-body.tsx | 2 +- src/components/drawer/drawer-footer.tsx | 4 +++- src/components/drawer/drawer-header.tsx | 2 +- src/components/drawer/drawer-panel.tsx | 2 +- src/components/drawer/drawer.tsx | 2 +- 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/drawer/drawer-body.tsx b/src/components/drawer/drawer-body.tsx index 80a81b77..bdce8586 100644 --- a/src/components/drawer/drawer-body.tsx +++ b/src/components/drawer/drawer-body.tsx @@ -15,7 +15,7 @@ const DrawerBody = ( { children, className, ...props }: DrawerBodyProps ) => { return (
{ return (
{ return ( -
+
{ children }
); diff --git a/src/components/drawer/drawer-panel.tsx b/src/components/drawer/drawer-panel.tsx index 20c70493..e6bdb484 100644 --- a/src/components/drawer/drawer-panel.tsx +++ b/src/components/drawer/drawer-panel.tsx @@ -49,7 +49,7 @@ const DrawerPanel = ( { children, className }: DrawerPanelProps ) => { Date: Tue, 31 Dec 2024 10:26:04 +0600 Subject: [PATCH 3/6] Updated footer border --- src/components/drawer/drawer-footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/drawer/drawer-footer.tsx b/src/components/drawer/drawer-footer.tsx index 800782b5..e7f52e02 100644 --- a/src/components/drawer/drawer-footer.tsx +++ b/src/components/drawer/drawer-footer.tsx @@ -31,7 +31,7 @@ const DrawerFooter = ( { children, className }: DrawerFooterProps ) => { 'px-5 py-4 flex justify-end gap-3 mt-auto', { 'bg-background-secondary': design === 'footer-divided', - 'border-t border-solid border-border-subtle': + 'border-t border-b-0 border-x-0 border-solid border-border-subtle': design === 'footer-bordered', }, className From 3e740a4eb98007437b0fb334070110663d1aa2ff Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 31 Dec 2024 12:57:47 +0600 Subject: [PATCH 4/6] Added a new prop to disable hover color for Badge --- src/components/badge/badge.tsx | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index ccea02b4..fc5a02d3 100644 --- a/src/components/badge/badge.tsx +++ b/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( 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( 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( typeClasses[ type ], 'gap-0.5', filteredClasses, + ! disableHover && hoverClasses[ variant ], className ) } ref={ ref } From 8013fc8bff3214eb71002712bd0db62834f71313 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 31 Dec 2024 12:57:52 +0600 Subject: [PATCH 5/6] Update changelog.txt --- changelog.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/changelog.txt b/changelog.txt index 1654833c..fa2e1032 100644 --- a/changelog.txt +++ b/changelog.txt @@ -3,6 +3,8 @@ Version 1.3.4 - 30th December, 2024 - 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. From dc8064b5e3e34be5eb7b2f629674c6e318ff8bbc Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 31 Dec 2024 12:58:10 +0600 Subject: [PATCH 6/6] Update changelog.txt --- changelog.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.txt b/changelog.txt index fa2e1032..1052b23c 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,4 +1,4 @@ -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.