Merge pull request #3546 from czwe-01/thulasizwe/en/dropdown-tag

Thulasizwe/en/dropdown tag

Author: James-Baloyi

shesha-reactjs/src/components/dropdown/dropdown.tsx

@@ -30,7 +30,7 @@ export const Dropdown: FC<IDropdownProps> = ({
     style,
     size,
     showIcon,
-    solidColor = true,
+    solidColor,
     showItemName,
     allowClear = true,
     displayStyle,
@@ -79,6 +79,7 @@ export const Dropdown: FC<IDropdownProps> = ({
             color: item?.color,
             icon: item?.icon,
             data: item?.data,
+            description: item?.description,
         };
     }, [incomeValueFunc]);
 
@@ -104,6 +105,7 @@ export const Dropdown: FC<IDropdownProps> = ({
             data: outcomeValueFunc(fetchedItem, args),
             color: fetchedItem?.color,
             icon: fetchedItem?.icon,
+            description: fetchedItem?.description,
         };
     }, [labelCustomJs, outcomeValueFunc, incomeValueFunc]);
 
@@ -198,7 +200,7 @@ export const Dropdown: FC<IDropdownProps> = ({
                 return <ReflistTag
                     key={option?.value}
                     value={option?.value}
-                    tooltip={option?.description}
+                    description={option?.description}
                     color={option?.color}
                     icon={option?.icon}
                     showIcon={showIcon}
@@ -229,7 +231,7 @@ export const Dropdown: FC<IDropdownProps> = ({
                     const option = options.find((o) => o.value === props.value);
                     return <ReflistTag
                         value={option?.value}
-                        tooltip={option?.description}
+                        description={option?.description}
                         color={option?.color}
                         icon={option?.icon}
                         showIcon={showIcon}

shesha-reactjs/src/components/readOnlyDisplayFormItem/index.tsx

@@ -83,7 +83,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
                 icon={value?.icon}
                 showIcon={showIcon}
                 tagStyle={style}
-                tooltip={value?.description}
+                description={value?.description}
                 solidColor={solidColor}
                 showItemName={showItemName}
                 label={displayName}
@@ -107,7 +107,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
                   value={value}
                   color={color}
                   icon={icon}
-                  tooltip={description}
+                  description={description}
                   showIcon={showIcon}
                   tagStyle={style}
                   solidColor={solidColor}

shesha-reactjs/src/components/refListDropDown/genericRefListDropDown.tsx

@@ -166,7 +166,7 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
         return <ReflistTag
           key={option?.value}
           value={option?.value}
-          tooltip={option?.description}
+          description={option?.description}
           color={option?.color}
           icon={option?.icon}
           showIcon={showIcon}
@@ -197,7 +197,7 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
           const option = options.find((o) => o.value === props.value);
           return <ReflistTag
             value={option?.value}
-            tooltip={option?.description}
+            description={option?.description}
             color={option?.color}
             icon={option?.icon}
             showIcon={showIcon}

shesha-reactjs/src/components/refListDropDown/reflistTag.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../readOnlyDisplayFormItem';
 
 interface IReflistTagProps {
     value?: string | number;
-    tooltip?: string;
+    description?: string;
     color?: string;
     icon?: string | React.ReactNode;
     showIcon?: boolean;
@@ -16,7 +16,7 @@ interface IReflistTagProps {
     label?: string | React.ReactNode;
     placement?: TooltipProps['placement'];
 }
-function ReflistTag({ value, tooltip, color, icon, showIcon, tagStyle, solidColor, showItemName, label, placement = 'right' }: IReflistTagProps) {
+function ReflistTag({ value, description, color, icon, showIcon, tagStyle, solidColor, showItemName, label, placement = 'right' }: IReflistTagProps) {
 
     const memoizedColor = !solidColor
         ? color?.toLowerCase()
@@ -25,7 +25,7 @@ function ReflistTag({ value, tooltip, color, icon, showIcon, tagStyle, solidColo
     const labelToRender = typeof label === 'string' ? label.toUpperCase() : label;
 
     return (
-        <Tooltip title={tooltip} placement={placement as TooltipProps['placement']} style={{ cursor: 'pointer' }}>
+        <Tooltip title={showItemName ? description : (description || labelToRender)} placement={placement as TooltipProps['placement']} style={{ cursor: 'pointer', zIndex: 2 }}>
             <Tag
                 key={value}
                 color={memoizedColor}

shesha-reactjs/src/designer-components/iconPicker/iconPickerWrapper.tsx

@@ -68,7 +68,7 @@ export const IconPickerWrapper: FC<IconPickerWrapperProps> = (props) => {
   const iconValue = finalValue ?? defaultValue;
 
   return (
-    <div style={(defaultValue || value) ? { display: 'grid', placeItems: textAlign, width: '100%' } : {}}>
+    <div style={(defaultValue || value) ? { display: 'grid', placeItems: textAlign } : {}}>
       <Tooltip title={props?.description}>
         <div
           style={{

shesha-reactjs/src/designer-components/inputComponent/index.tsx

@@ -132,7 +132,7 @@ export const InputComponent: FC<Omit<ISettingsInputProps, 'hidden'>> = (props) =
         case 'switch':
             /*Handle cases where defaultValue is used in place of defaultChecked*/
             return <Switch disabled={readOnly} size='small'
-                defaultChecked={defaultChecked ?? defaultValue} onChange={onChange} defaultValue={defaultValue} value={value} />;
+                defaultChecked={defaultChecked ?? defaultValue} onChange={onChange} value={value} />;
         case 'numberField':
             return <InputNumber
                 placeholder={placeholder}