From e720aad78e5286a65220dfdeb7091c41c8e4391b Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 10:21:48 +0600 Subject: [PATCH 01/15] Fix: Showing a check mark when no item is selected --- src/components/select/select.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index ca8637d3..d3d6ed02 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -296,7 +296,7 @@ export function SelectOptions( { const initialSelectedValueIndex = useMemo( () => { const currentValue = getValues(); - let indexValue = 0; + let indexValue = -1; if ( currentValue ) { indexValue = Children.toArray( children ).findIndex( @@ -315,7 +315,7 @@ export function SelectOptions( { ); } - return indexValue === -1 ? 0 : indexValue; + return indexValue; }, [ value, selected, children ] ); useLayoutEffect( () => { From 49f12ff3ab38e7a9c25d9703c25fa8ef6d903142 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 10:49:35 +0600 Subject: [PATCH 02/15] fix: Menu component icon size and alignment --- src/components/menu-item/menu-item.tsx | 28 ++++++++++++-------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx index f185a5a2..ca99586b 100644 --- a/src/components/menu-item/menu-item.tsx +++ b/src/components/menu-item/menu-item.tsx @@ -67,8 +67,8 @@ export const MenuList = ( { md: 'text-sm', }?.[ size ?? 'md' ]; const iconSizeClasses = { - sm: '[&>svg]:size-4', - md: '[&>svg]:size-5', + sm: 'size-4', + md: 'size-5', }?.[ size ?? 'md' ]; const handleToggle = () => { @@ -127,23 +127,21 @@ export const MenuList = ( { { arrow && ( - - - + + ) } From 91e90b1c8214e9bf918b9d7454b374fc376c46ee Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 10:57:03 +0600 Subject: [PATCH 03/15] fix: Input ref not working --- src/components/input/input.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index 50974e47..9de9b45d 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -11,6 +11,7 @@ import { nanoid } from 'nanoid'; import { cn } from '@/utilities/functions'; import { Upload, X } from 'lucide-react'; import Label from '../label'; +import { mergeRefs } from '@/components/toaster/utils'; export declare interface InputProps { /** Unique identifier for the input element. */ @@ -275,7 +276,7 @@ export const InputComponent = ( ) } > { getPrefix() } Date: Tue, 17 Dec 2024 11:40:15 +0600 Subject: [PATCH 04/15] fix: Switch component design mismatch --- src/components/switch/switch.stories.tsx | 6 ++--- src/components/switch/switch.tsx | 30 +++++++++++------------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx index 5b350c56..be4d98cb 100644 --- a/src/components/switch/switch.stories.tsx +++ b/src/components/switch/switch.stories.tsx @@ -49,21 +49,21 @@ const Template: StoryFn = ( { defaultValue, size, ...args } ) => { export const Basic = Template.bind( {} ); Basic.args = { defaultValue: false, - size: 'lg', + size: 'sm', disabled: false, }; export const WithLabel = Template.bind( {} ); WithLabel.args = { defaultValue: true, - size: 'lg', + size: 'sm', disabled: false, label: { heading: 'Switch Label', description: 'Switch Description' }, }; export const Disabled = Template.bind( {} ); Disabled.args = { - size: 'lg', + size: 'sm', disabled: true, label: { heading: 'Disabled Switch', diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 38491d7e..9dec578c 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -22,8 +22,11 @@ export interface SwitchProps { /** Initial value of the switch (checked or unchecked) when used as an uncontrolled component. */ defaultValue?: boolean; - /** Defines the size of the switch (e.g., 'sm', 'md', 'lg'). */ - size?: 'sm' | 'md' | 'lg'; + /** + * Defines the size of the switch (e.g., 'sm', 'md'). + * @default 'sm' + */ + size?: 'sm' | 'md'; /** Disables the switch if true. */ disabled?: boolean; @@ -55,12 +58,11 @@ export const SwitchLabel = ( { switchId: string; disabled?: boolean; children: ReactNode; - size: 'sm' | 'md' | 'lg'; + size: 'sm' | 'md'; } ) => { const headingClasses = { sm: 'text-sm leading-4 font-medium', md: 'text-base leading-5 font-medium', - lg: 'text-lg leading-6 font-medium', }; const isLabelAComponent = isValidElement( label ); if ( isLabelAComponent ) { @@ -129,7 +131,7 @@ export const SwitchComponent = ( onChange, value, defaultValue = false, - size = 'lg', + size = 'sm', disabled = false, label = { heading: '', description: '' }, name, @@ -172,17 +174,13 @@ export const SwitchComponent = ( }; const sizeClassNames = { - lg: { - container: 'w-11 h-6', - toggleDial: 'size-4 peer-checked:translate-x-5', - }, md: { - container: 'w-10 h-5', - toggleDial: 'size-3 peer-checked:translate-x-5', + container: 'w-11 h-6', + toggleDial: 'size-4 peer-checked:translate-x-5 group-hover/switch:size-5 group-focus-within/switch:size-5 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5', }, sm: { - container: 'w-8 h-4', - toggleDial: 'size-2.5 peer-checked:translate-x-3.5', + container: 'w-10 h-5', + toggleDial: 'size-3 peer-checked:translate-x-5 group-hover/switch:size-4 group-focus-within/switch:size-4 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5', }, }; @@ -200,7 +198,7 @@ export const SwitchComponent = ( >
Date: Tue, 17 Dec 2024 11:46:29 +0600 Subject: [PATCH 05/15] fix: Size error in Radio button component --- src/components/radio-button/radio-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx index f07a3869..77ebf8e1 100644 --- a/src/components/radio-button/radio-button.tsx +++ b/src/components/radio-button/radio-button.tsx @@ -455,7 +455,7 @@ export const RadioButtonComponent = ( <> { if ( ! multiSelection ) { // Toggle the switch on or off From 802c3e7f614335ef54447f1af49356b1da44fe56 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 12:26:51 +0600 Subject: [PATCH 06/15] wip: Fix date picker component style --- .../datepicker/datepicker-component.tsx | 25 +++++++++++-------- src/components/datepicker/datepicker.tsx | 6 ++--- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/datepicker/datepicker-component.tsx b/src/components/datepicker/datepicker-component.tsx index 7ddc8913..f882a1de 100644 --- a/src/components/datepicker/datepicker-component.tsx +++ b/src/components/datepicker/datepicker-component.tsx @@ -204,9 +204,8 @@ const DatePickerComponent = ( { onClick={ handlePrevButtonClick } className="bg-background-primary border-none cursor-pointer" aria-label="Previous Button" - > - - + icon={ } + /> + icon={ } + />
{ showYearSelect && ( @@ -255,7 +253,9 @@ const DatePickerComponent = ( { yearValue === selectedYear && yearValue !== new Date().getFullYear() && - 'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black' + 'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black', + yearValue === new Date().getFullYear() && + 'font-semibold' ) } > { yearValue } @@ -287,7 +287,10 @@ const DatePickerComponent = ( { customMonthProps.calendarMonth.date.getFullYear() && customMonthProps.calendarMonth.date.getFullYear() !== new Date().getFullYear() && - 'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black' + 'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black', + monthIndex === new Date().getMonth() && + new Date().getFullYear() === selectedYear && + 'font-semibold' ) } > { format( new Date( 0, monthIndex ), 'MMM' ) } @@ -312,7 +315,7 @@ const DatePickerComponent = ( { { weekdays.map( ( weekday, weekdayIndex ) => ( @@ -383,7 +386,7 @@ const DatePickerComponent = ( { return ( @@ -218,7 +218,7 @@ const DatePicker = ( { width="w-auto" numberOfMonths={ 2 } footer={ -
+
@@ -365,7 +365,7 @@ const DatePickerComponent = ( { 'bg-transperant opacity-50 text-text-disabled cursor-auto'; const buttonClasses = cn( - 'h-10 w-10 flex items-center justify-center transition text-text-secondary relative', + 'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm', 'border-none rounded', ( isSelected || isPartOfRange ) && ( ! isOutside || isPreviousMonth ) ? 'bg-background-brand text-text-on-color' @@ -531,7 +531,7 @@ const DatePickerComponent = ( { table: 'w-full border-separate border-spacing-0', head_row: 'flex mb-1', head_cell: - 'text-muted-foreground rounded-md w-10 font-normal text-[0.8rem]', + 'text-muted-foreground rounded-md w-10 font-normal text-sm', row: 'flex w-full mt-2', cell: 'h-10 w-10 text-center text-sm p-0 relative', day: 'h-10 w-10 p-0 font-normal bg-background-primary text-current', From 883ecc0ff497ef987d23bb71df87b6d09cbd4d76 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 12:40:03 +0600 Subject: [PATCH 08/15] fix: Sidebar height is not overridable --- src/components/sidebar/sidebar.tsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index e68c4063..bf696f50 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -36,8 +36,6 @@ export interface SidebarProps extends SidebarCommonProps { onCollapseChange?: ( isCollapsed: boolean ) => void; /** Determines if the Sidebar can be collapsed or not. If true, a collapse button is shown. */ collapsible?: boolean; - /** Determines whether the Sidebar should occupy the full screen height. */ - screenHeight?: boolean; /** Controls whether a border should appear on the right of the Sidebar. */ borderOn?: boolean; } @@ -55,7 +53,6 @@ export const Sidebar = ( { className, onCollapseChange, collapsible = true, - screenHeight = true, borderOn = true, ...props }: SidebarProps ) => { @@ -88,14 +85,6 @@ export const Sidebar = ( { const storedState = safeLocalStorage.get( 'sidebar-collapsed' ); setIsCollapsed( storedState ? storedState : false ); } - - if ( sideBarRef.current ) { - if ( !! screenHeight ) { - sideBarRef.current.style.height = `${ window.innerHeight }px`; - } else { - sideBarRef.current.style.height = 'auto'; - } - } }; window.addEventListener( 'resize', handleScreenResize ); @@ -104,7 +93,7 @@ export const Sidebar = ( { return () => { window.removeEventListener( 'resize', handleScreenResize ); }; - }, [ screenHeight, collapsible ] ); + }, [ collapsible ] ); return ( Date: Tue, 17 Dec 2024 12:52:57 +0600 Subject: [PATCH 09/15] fix: Tabs component underline issue --- src/components/tabs/tabs.tsx | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx index f2261547..2d0e43a6 100644 --- a/src/components/tabs/tabs.tsx +++ b/src/components/tabs/tabs.tsx @@ -7,7 +7,8 @@ import React, { type ReactNode, } from 'react'; import { cn } from '@/utilities/functions'; -import { motion } from 'framer-motion'; +import { LayoutGroup, motion } from 'framer-motion'; +import { nanoid } from 'nanoid'; declare type Ref = HTMLButtonElement; declare type OnChangeValue = { slug: string; text: string }; @@ -88,6 +89,7 @@ export const TabsGroup = ( { iconPosition = 'left', // Position of the icon in the tab ('left' or 'right'). width = 'full', // Width of the tabs ('auto' or 'full'). }: TabsGroupProps ) => { + const tabGroupId = nanoid(); const tabsState = useTabs(); // Determine the active item based on the activeTabSlug prop. @@ -172,12 +174,14 @@ export const TabsGroup = ( { width, } } > - { React.Children.map( children, ( child ) => { - if ( ! isValidElement( child ) ) { - return null; - } - return React.cloneElement( child ); - } ) } + + { React.Children.map( children, ( child ) => { + if ( ! isValidElement( child ) ) { + return null; + } + return React.cloneElement( child ); + } ) } +
); @@ -287,16 +291,18 @@ export const Tab = forwardRef( }; return ( - + ); } ); From 03cebf3975aabffd39a21193a28df037f2eda298 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 12:53:40 +0600 Subject: [PATCH 10/15] chore: Lint --- src/components/datepicker/datepicker-component.tsx | 11 ++++++++--- src/components/menu-item/menu-item.tsx | 4 +++- src/components/switch/switch.tsx | 6 ++++-- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/datepicker/datepicker-component.tsx b/src/components/datepicker/datepicker-component.tsx index 2b45c9e3..4c45f865 100644 --- a/src/components/datepicker/datepicker-component.tsx +++ b/src/components/datepicker/datepicker-component.tsx @@ -204,7 +204,9 @@ const DatePickerComponent = ( { onClick={ handlePrevButtonClick } className="bg-background-primary border-none cursor-pointer" aria-label="Previous Button" - icon={ } + icon={ + + } />
@@ -289,7 +293,8 @@ const DatePickerComponent = ( { new Date().getFullYear() && 'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black', monthIndex === new Date().getMonth() && - new Date().getFullYear() === selectedYear && + new Date().getFullYear() === + selectedYear && 'font-semibold' ) } > diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx index ca99586b..b43570ec 100644 --- a/src/components/menu-item/menu-item.tsx +++ b/src/components/menu-item/menu-item.tsx @@ -140,7 +140,9 @@ export const MenuList = ( { animate={ isOpen ? 'open' : 'closed' } transition={ { duration: 0.15 } } > - + ) } diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 9dec578c..b1d813fd 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -176,11 +176,13 @@ export const SwitchComponent = ( const sizeClassNames = { md: { container: 'w-11 h-6', - toggleDial: 'size-4 peer-checked:translate-x-5 group-hover/switch:size-5 group-focus-within/switch:size-5 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5', + toggleDial: + 'size-4 peer-checked:translate-x-5 group-hover/switch:size-5 group-focus-within/switch:size-5 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5', }, sm: { container: 'w-10 h-5', - toggleDial: 'size-3 peer-checked:translate-x-5 group-hover/switch:size-4 group-focus-within/switch:size-4 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5', + toggleDial: + 'size-3 peer-checked:translate-x-5 group-hover/switch:size-4 group-focus-within/switch:size-4 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5', }, }; From 7f57a08eede1185d1741fabf99be48b8c13c8b95 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 13:05:18 +0600 Subject: [PATCH 11/15] fix: Switch component label and description font styles --- src/components/switch/switch.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index b1d813fd..8261c3e7 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -61,8 +61,12 @@ export const SwitchLabel = ( { size: 'sm' | 'md'; } ) => { const headingClasses = { - sm: 'text-sm leading-4 font-medium', - md: 'text-base leading-5 font-medium', + sm: 'text-sm leading-5 font-medium', + md: 'text-base leading-6 font-medium', + }; + const descriptionClasses = { + sm: 'text-xs leading-4 font-normal', + md: 'text-sm leading-5 font-normal', }; const isLabelAComponent = isValidElement( label ); if ( isLabelAComponent ) { @@ -78,11 +82,11 @@ export const SwitchLabel = ( { const renderLabel = () => { const { heading = '', description = '' } = label || {}; return ( -
+
{ heading && (

{ description } From d14d267e96cc3fc6cd9fbd8b1462ec31950eb54f Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 13:10:36 +0600 Subject: [PATCH 12/15] Removed backdrop blur --- src/components/dialog/dialog.tsx | 2 +- src/components/drawer/drawer-backdrop.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index d16ec404..5a193e3b 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -261,7 +261,7 @@ export const DialogBackdrop = ( { { open && ( { { open && ( Date: Tue, 17 Dec 2024 13:22:14 +0600 Subject: [PATCH 13/15] fix: Error --- .../admin-settings-Spectra.stories.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx index 19f4f61a..b9d628f5 100644 --- a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx +++ b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx @@ -452,7 +452,7 @@ const Template = ( args ) => { @@ -485,7 +485,7 @@ const Template = ( args ) => { @@ -518,7 +518,7 @@ const Template = ( args ) => { @@ -552,7 +552,7 @@ const Template = ( args ) => { @@ -585,7 +585,7 @@ const Template = ( args ) => { From e8ba99a659cd8188b54acede913df915ab477753 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 13:40:21 +0600 Subject: [PATCH 14/15] Added backward compatibility support --- src/components/switch/switch.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 8261c3e7..98cf1524 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -145,6 +145,9 @@ export const SwitchComponent = ( }: SwitchProps, ref: React.ForwardedRef ) => { + // For backwards compatibility. + const normalSize = ( size as 'sm' | 'md' | 'lg' ) === 'lg' ? 'md' : size; + const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] ); const switchId = useMemo( () => ( id ? id : `switch-${ nanoid() }` ), [] ); const [ checked, setChecked ] = useState( defaultValue ); @@ -201,12 +204,12 @@ export const SwitchComponent = ( label={ label } switchId={ switchId } disabled={ disabled } - size={ size } + size={ normalSize } >

@@ -229,7 +232,7 @@ export const SwitchComponent = ( htmlFor={ switchId } className={ cn( "bg-white border rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300 top-2/4 left-1 -translate-y-2/4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4", - sizeClassNames[ size ].toggleDial, + sizeClassNames[ normalSize ].toggleDial, colorClassNames[ color ].toggleDial, disabled && disabledClassNames.toggleDial ) } From 0f574376a820609c6232dbbc4f9aae7d3cbca964 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:03:01 +0600 Subject: [PATCH 15/15] Updated gap between switch label and description --- src/components/switch/switch.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 98cf1524..f969adff 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -68,6 +68,10 @@ export const SwitchLabel = ( { sm: 'text-xs leading-4 font-normal', md: 'text-sm leading-5 font-normal', }; + const gapClassNames = { + sm: 'space-y-0.5', + md: 'space-y-1', + }; const isLabelAComponent = isValidElement( label ); if ( isLabelAComponent ) { return ( @@ -82,7 +86,7 @@ export const SwitchLabel = ( { const renderLabel = () => { const { heading = '', description = '' } = label || {}; return ( -
+
{ heading && (