Merge pull request #310 from dd3tech/fix/small-adjustments-components

Fix: Small adjustments were made to several components

Author: arielsrodriguez

src/components/AsideModalV2/AsideModalV2.tsx

@@ -204,7 +204,7 @@ const AsideModalV2: FC<AsideModalProps> = ({
       <Flex
         gap="4"
         className={composeClasses(
-          'bg-gray-50 px-10 py-6 flex-col',
+          'bg-gray-50 px-10 pt-6 pb-4 flex-col',
           isStickyTitle && 'sticky top-0 z-50'
         )}
       >

src/components/Badge/Badge.test.tsx

@@ -16,7 +16,7 @@ describe('<Badge />', () => {
 
     expect(badge.className).toContain('bg-yellow-400')
     expect(badge.className).toContain('text-white')
-    expect(badge.className).toContain('rounded-2xl')
+    expect(badge.className).toContain('rounded-full')
     expect(badge.className).toContain('text-xs')
     expect(badge.className).toContain('font-medium')
   })

src/components/Badge/Badge.tsx

@@ -32,7 +32,7 @@ const Badge = ({ value, variant = 'default' }: IBadge) => {
       justifyContent="center"
       alignItems="center"
       className={composeClasses(
-        'rounded-2xl text-xs font-medium px-1 text-white',
+        'rounded-full text-xs font-medium px-1 text-white',
         badgeColor
       )}
       style={{ height: 24, width: 24 }}

src/components/Buttons/FilterBarButton.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState, useCallback } from 'react'
 import { XIcon } from '@heroicons/react/outline'
 import { composeClasses } from 'lib/classes'
 
@@ -36,11 +36,31 @@ const FilterBarButton = ({
   principalButton
 }: IFilterBarButton) => {
   const [showPopover, setShowPopover] = useState(false)
+  const [isClosing, setIsClosing] = useState(false)
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setShowPopover(!showPopover)
-    principalButton?.onClick?.(e)
-  }
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (showPopover) {
+        setIsClosing(true)
+        setTimeout(() => {
+          setShowPopover(false)
+          setIsClosing(false)
+        }, 200)
+      } else {
+        setShowPopover(true)
+      }
+      principalButton?.onClick?.(e)
+    },
+    [showPopover, principalButton, setShowPopover, setIsClosing]
+  )
+
+  const handleClose = useCallback(() => {
+    setIsClosing(true)
+    setTimeout(() => {
+      setShowPopover(false)
+      setIsClosing(false)
+    }, 200)
+  }, [setIsClosing, setShowPopover])
 
   return (
     <>
@@ -67,12 +87,19 @@ const FilterBarButton = ({
         </Flex>
       </Button>
 
-      {showPopover && (
-        <Transition className="w-full">
+      {(showPopover || isClosing) && (
+        <Transition
+          className="w-full"
+          show={!isClosing}
+          animationStart="fadeIn"
+          animationEnd="fadeOut"
+          duration={200}
+          alwaysRender
+        >
           <div
             className={composeClasses(
               classNamePopover,
-              'bg-white border mt-1 rounded-xl shadow-md transition-all duration-200 ease-out opacity-100 translate-y-0 z-50'
+              'bg-white border mt-1 rounded-xl shadow-md z-50'
             )}
             style={{ width: 468 }}
           >
@@ -81,10 +108,7 @@ const FilterBarButton = ({
               justifyContent="between"
             >
               <Text bold>{titlePopover ?? 'Title'}</Text>
-              <XIcon
-                className="h-5 w-5 cursor-pointer"
-                onClick={() => setShowPopover(false)}
-              />
+              <XIcon className="h-5 w-5 cursor-pointer" onClick={handleClose} />
             </Flex>
             {childrenPopover}
             <Flex

src/components/Form/MultiSelect.test.tsx

@@ -31,6 +31,7 @@ describe('<MultiSelect />', () => {
     expect(getByText('Select options')).toBeInTheDocument()
     expect(selectContainer).toBeInTheDocument()
   })
+
   it('should open dropdown when clicked', () => {
     const { getByTestId } = render(<MultiSelect {...defaultProps} />)
 
@@ -47,7 +48,7 @@ describe('<MultiSelect />', () => {
     const { getByTestId } = render(<MultiSelect {...defaultProps} />)
 
     fireEvent.click(getByTestId('select-container'))
-
+    fireEvent.click(getByTestId('select-all'))
     const checkbox = getByTestId('option-1')
     fireEvent.click(checkbox)
 
@@ -71,6 +72,7 @@ describe('<MultiSelect />', () => {
 
     const allCheckbox = getByTestId('select-all')
     fireEvent.click(allCheckbox)
+    fireEvent.click(allCheckbox)
 
     const option1Checkbox = getByTestId('option-1')
     const option2Checkbox = getByTestId('option-2')
@@ -141,4 +143,25 @@ describe('<MultiSelect />', () => {
     expect(getByTestId('option-4')).toBeInTheDocument()
     expect(getByTestId('option-5')).toBeInTheDocument()
   })
+
+  it('should have all non-disabled options selected by default', () => {
+    const { getByTestId } = render(<MultiSelect {...defaultProps} />)
+
+    fireEvent.click(getByTestId('select-container'))
+    const option1Checkbox = getByTestId('option-1')
+    const option2Checkbox = getByTestId('option-2')
+    const option3Checkbox = getByTestId('option-3')
+
+    expect(option1Checkbox).toBeChecked()
+    expect(option2Checkbox).toBeChecked()
+    expect(option3Checkbox).not.toBeChecked()
+  })
+
+  it('should not show blue background when all options are selected', () => {
+    const { getByTestId } = render(<MultiSelect {...defaultProps} />)
+    const selectContainer = getByTestId('select-container')
+
+    expect(selectContainer).not.toHaveClass('bg-blue-100')
+    expect(selectContainer).not.toHaveClass('border-blue-600')
+  })
 })

src/components/Form/MultiSelect.tsx

@@ -8,8 +8,10 @@ import {
   useEffect,
   useRef,
   useState,
-  useMemo
+  useMemo,
+  useCallback
 } from 'react'
+import { XIcon } from '@heroicons/react/outline'
 import { ChevronDownIcon } from '@heroicons/react/solid'
 import { StyleObject } from 'lib/styles'
 import { composeClasses } from 'lib/classes'
@@ -72,9 +74,8 @@ function MultiSelect({
   const selectRef = useRef<HTMLInputElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [selectedOptions, setSelectedOptions] = useState<IMultiSelectOption[]>(
-    []
+    optionsList.filter((opt) => !opt.disabled)
   )
-
   const [options, setOptions] = useState<IMultiSelectOption[]>(optionsList)
 
   const styles = {
@@ -94,10 +95,10 @@ function MultiSelect({
     )
   }
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     if (isDisabled) return
     setIsOpen(!isOpen)
-  }
+  }, [isDisabled, isOpen, setIsOpen])
 
   const handleOptionToggle = (option: IMultiSelectOption) => {
     if (option.disabled) return
@@ -119,13 +120,20 @@ function MultiSelect({
         .every((opt) => selectedOptions.some((sel) => sel.value === opt.value)),
     [options, selectedOptions]
   )
-  const handleSelectAll = () => {
+  const handleSelectAll = useCallback(() => {
     allSelected
       ? setSelectedOptions([])
       : setSelectedOptions(options.filter((opt) => !opt.disabled))
-  }
+  }, [allSelected, options, setSelectedOptions])
 
-  const handleClear = () => setSelectedOptions([])
+  const handleClear = useCallback(() => {
+    setSelectedOptions([])
+  }, [setSelectedOptions])
+
+  const onSubmit = useCallback(() => {
+    buttonSubmit?.onClick()
+    setIsOpen(false)
+  }, [buttonSubmit, setIsOpen])
 
   useEffect(() => {
     const handleClickOutside = (e: globalThis.MouseEvent) => {
@@ -153,7 +161,9 @@ function MultiSelect({
         role="select-container"
         className={composeClasses(
           styles.container,
-          selectedOptions.length > 0 && 'bg-blue-100 border border-blue-600'
+          selectedOptions.length > 0 &&
+            !allSelected &&
+            'bg-blue-100 border border-blue-600'
         )}
         style={{ zIndex: 2, ...style }}
         onClick={handleClick}
@@ -180,19 +190,23 @@ function MultiSelect({
             )}
           </div>
         </div>
-        <Transition
-          alwaysRender
-          show={isOpen && !isDisabled}
-          animationStart="rotateRight"
-          animationEnd="rotateRightBack"
-          duration={200}
-        >
-          <ChevronDownIcon
-            role="chevron"
-            className="text-gray-400"
-            width={20}
-          />
-        </Transition>
+        {selectedOptions.length > 0 && !allSelected ? (
+          <XIcon onClick={handleClear} className="text-gray-400" width={30} />
+        ) : (
+          <Transition
+            alwaysRender
+            show={isOpen && !isDisabled}
+            animationStart="rotateRight"
+            animationEnd="rotateRightBack"
+            duration={200}
+          >
+            <ChevronDownIcon
+              role="chevron"
+              className="text-gray-400"
+              width={20}
+            />
+          </Transition>
+        )}
       </div>
       {isOpen && !isDisabled && (
         <Transition
@@ -241,7 +255,7 @@ function MultiSelect({
               >
                 {buttonClear?.label}
               </Button>
-              <Button onClick={buttonSubmit?.onClick} className="px-8">
+              <Button onClick={onSubmit} className="px-8">
                 {buttonSubmit?.label}
               </Button>
             </Flex>

src/components/Form/SingleSelect.tsx

@@ -194,7 +194,8 @@ function SingleSelect({
               'absolute left-0 z-10 w-full bg-white overflow-y-auto top-13 rounded-lg shadow-lg'
             )}
             style={{
-              ...getAnimationStyle(isOpen)
+              ...getAnimationStyle(isOpen),
+              border: '1px solid #F9FAFB'
             }}
           >
             <div className="h-8 p-2">
@@ -208,7 +209,7 @@ function SingleSelect({
               return (
                 <Flex
                   className={composeClasses(
-                    'w-full px-2 py-2 hover:bg-blue-100 hover:text-blue-800 hover:font-bold',
+                    'w-full px-2 py-2 hover:bg-blue-50 hover:text-blue-800 hover:font-bold',
                     option.selected && 'text-blue-700'
                   )}
                   justifyContent="between"

src/stories/FilterBarButton.stories.tsx

@@ -19,6 +19,14 @@ export const Default: Story = {
     iconLeft: <XCircleIcon width={20} />,
     iconRight: <XCircleIcon width={20} />,
     titlePopover: 'More Filter',
+    secondaryButton: {
+      label: 'Cancel',
+      onClick: () => alert('Cancel')
+    },
+    primaryButton: {
+      label: 'Submit',
+      onClick: () => alert('Submit')
+    },
     childrenPopover: (
       <Flex
         justifyContent="center"