Merge pull request #320 from dd3tech/fix/file-item-button

Fix: change file item button layout

Author: Misael840

src/components/AsideModalV2/AsideModalV2.tsx

@@ -56,6 +56,7 @@ export interface AsideModalProps extends ComponentProps<'aside'> {
   buttons?: ModalButton[]
   search?: FilterSearchProps
   tabs?: ModalTabs
+  hideDivider?: boolean
   tagTitle?: {
     variant: 'primary' | 'secondary' | 'success' | 'warning'
     text: string
@@ -71,6 +72,7 @@ const AsideModalV2: FC<AsideModalProps> = ({
   disableEscapeKeyDown,
   isStickyTitle,
   description,
+  hideDivider = false,
   buttons,
   children,
   search,
@@ -98,7 +100,7 @@ const AsideModalV2: FC<AsideModalProps> = ({
 
   const renderHeaderContent = () => (
     <>
-      <Divider light className="mt-1 bg-gray-50" />
+      {!hideDivider && <Divider light className="mt-1 bg-gray-50" />}
       <Flex gap="4" className="flex-col">
         <Flex gap="2" alignItems="center" justifyContent="between">
           {description && (
@@ -229,7 +231,8 @@ const AsideModalV2: FC<AsideModalProps> = ({
       <Flex
         gap="4"
         className={composeClasses(
-          'bg-gray-50 px-10 pt-6 pb-4 flex-col',
+          'bg-gray-50 px-10 pt-6 flex-col',
+          !hideDivider && 'pb-4',
           isStickyTitle && 'sticky top-0 z-50'
         )}
       >

src/components/Form/File/FileItem.tsx

@@ -93,7 +93,7 @@ export const FileItem = ({
       </Flex>
       <div
         role="file-actions"
-        className="grid items-center gap-3"
+        className="grid items-center gap-2"
         style={{
           gridAutoFlow: 'column',
           gridTemplateColumns: 'repeat(auto-fit, auto)'

src/components/Form/File/FileItemButton.test.tsx

@@ -15,6 +15,7 @@ describe('<FileItemButton>', () => {
     render(<FileItemButton onClick={handleClick}>Click Me</FileItemButton>)
 
     fireEvent.click(screen.getByText('Click Me'))
+
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
 
@@ -24,7 +25,7 @@ describe('<FileItemButton>', () => {
     )
 
     const buttonElement = getByRole('button-file-item').closest('button')
-    expect(buttonElement).toHaveClass('border-gray-500')
+
     expect(buttonElement).toHaveClass('text-red-500')
   })
 })

src/components/Form/File/FileItemButton.tsx

@@ -30,18 +30,16 @@ export interface FileItemButtonProps extends Omit<IButtonProps, 'children'> {
 }
 
 const BUTTON_VARIANTS = {
-  primary:
-    'border-gray-500 text-gray-500 hover:border-blue-500 hover:text-white hover:bg-blue-500',
-  secondary:
-    'border-gray-500 text-red-500 hover:border-red-500 hover:text-white hover:bg-red-500'
+  primary: 'text-gray-500 hover:text-blue-500',
+  secondary: 'text-red-500 hover:text-red-400'
 }
 
 const FileItemButton = ({
   children,
   className,
   onClick,
   isLoading,
-  variant = 'secondary',
+  variant = 'ghost',
   isDanger,
   ...props
 }: FileItemButtonProps) => {
@@ -50,7 +48,7 @@ const FileItemButton = ({
       {...props}
       role="button-file-item"
       className={composeClasses(
-        'w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 transition-all duration-300 ease-linear',
+        'w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 transition-all duration-300 ease-linear',
         BUTTON_VARIANTS[isDanger ? 'secondary' : 'primary'],
         className
       )}

src/stories/AsideModalV2.stories.tsx

@@ -59,7 +59,8 @@ export const Basic = Template.bind({})
 Basic.args = {
   title: 'Basic Aside Modal',
   children: 'This is the basic content of the modal',
-  description: sampleDescription
+  description: sampleDescription,
+  hideDivider: false
 }
 
 export const WithButtons = Template.bind({})