Merge pull request #313 from dd3tech/fix/adjustment-multiselect-component

Fix: Small adjustments were made to single select and multi select components

Author: arielsrodriguez

src/components/Badge/Badge.tsx

@@ -35,7 +35,7 @@ const Badge = ({ value, variant = 'default' }: IBadge) => {
         'rounded-full text-xs font-medium px-1 text-white',
         badgeColor
       )}
-      style={{ height: 24, width: 24 }}
+      style={{ height: 24, width: 24, minWidth: 24, minHeight: 24 }}
     >
       {value}
     </Flex>

src/components/Form/MultiSelect.tsx

@@ -228,7 +228,7 @@ function MultiSelect({
                     <span>{labelAll || 'All'}</span>
                   </li>
                   {options.map((option) => (
-                    <li key={option.value} className="flex items-center mb-1">
+                    <li key={option.value} className="flex items-center my-2">
                       <input
                         type="checkbox"
                         checked={selectedOptions.some(
@@ -247,15 +247,17 @@ function MultiSelect({
                 </ul>
               </div>
 
-              <Flex justifyContent="around" className="border-t py-2">
+              <Flex justifyContent="between" className="border-t pt-3 pb-2">
                 <Button
+                  className="w-full"
                   variant="ghost"
                   size="small"
                   onClick={buttonClear?.onClick || handleClear}
                 >
                   {buttonClear?.label}
                 </Button>
                 <Button
+                  className="w-full"
                   size="small"
                   onClick={onSubmit}
                   paddingX="6"

src/components/Form/SingleSelect.tsx

@@ -130,8 +130,6 @@ function SingleSelect({
 
   useEffect(() => {
     if (!value) return
-    const selected = optionsList.find((option) => option.value === value)
-    setSelectedOption(selected ?? null)
     setOptions(
       optionsList.map((option) =>
         option.value === value ? { ...option, selected: true } : option
@@ -155,11 +153,11 @@ function SingleSelect({
           <div className="relative">
             <input
               {...otherProps}
-              value={selectedOption?.label ?? optionsList?.[0]?.label}
+              value={selectedOption?.label ?? label}
               className={composeClasses(
                 'outline-none w-full font-medium bg-transparent truncate text-sm'
               )}
-              placeholder=""
+              placeholder="skjfafkhad"
               readOnly
               style={{
                 cursor: 'inherit',

src/components/TableV2/base/Accordion.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { composeClasses } from 'lib/classes'
 import ChevronUpIcon from '@heroicons/react/outline/ChevronUpIcon'
+import Tooltip from 'components/Tooltip'
 
 export interface AccordionProps {
   /**
@@ -13,9 +14,13 @@ export interface AccordionProps {
    * 0 is the position of the first column
    */
   iconPosition?: number
+  /**
+   * Tooltip text
+   */
+  tooltip?: string
 }
 
-const Accordion = ({ children, iconPosition = 0 }: AccordionProps) => {
+const Accordion = ({ children, iconPosition = 0, tooltip }: AccordionProps) => {
   const [toggle, setToggle] = useState(false)
 
   const onClick = () => {
@@ -29,7 +34,19 @@ const Accordion = ({ children, iconPosition = 0 }: AccordionProps) => {
     (cell, index) => {
       if (index === iconPosition) {
         return React.cloneElement(cell, {
-          children: (
+          children: tooltip ? (
+            <Tooltip content={tooltip}>
+              <div className="flex items-center">
+                {cell.props.children}
+                <ChevronUpIcon
+                  className={composeClasses(
+                    'h-4 w-4 duration-300 ease-in ml-3',
+                    !toggle && 'transform rotate-180'
+                  )}
+                />
+              </div>
+            </Tooltip>
+          ) : (
             <div className="flex items-center">
               {cell.props.children}
               <ChevronUpIcon

src/components/TableV2/base/TableCell.tsx

@@ -91,6 +91,10 @@ export interface CellProps
    * Show a shadow when cell is sticky left
    */
   leftStickyShadow?: boolean
+  /**
+   * Is accordion
+   */
+  isAccordion?: boolean
 }
 
 const Cell = ({
@@ -113,6 +117,7 @@ const Cell = ({
   cellColor,
   variant = 'default',
   children,
+  isAccordion,
   to,
   ...props
 }: CellProps) => {
@@ -194,6 +199,7 @@ const Cell = ({
         />
       ) : isSimpleChildren ? (
         <CellText
+          isAccordion={isAccordion}
           type={type}
           align={align}
           defaultValue={defaultValue}

src/components/TableV2/base/TableCellText.tsx

@@ -29,6 +29,10 @@ export interface CellTextProps
    * Show default value
    */
   showDefaultValue?: boolean
+  /**
+   * Is accordion
+   */
+  isAccordion?: boolean
 }
 
 const CellText = ({
@@ -38,6 +42,7 @@ const CellText = ({
   showDefaultValue,
   children,
   to,
+  isAccordion,
   ...props
 }: CellTextProps) => {
   const getTextAlignment = () => {
@@ -80,7 +85,7 @@ const CellText = ({
         getTextAlignment()
       )}
       onClick={(e) => {
-        e.stopPropagation()
+        !isAccordion && e.stopPropagation()
         to?.()
       }}
     >