edited generic modal and dropdown

DagsHub · Aug 9, 2023 · 0ebaec8 · 0ebaec8
1 parent a04e65b
commit 0ebaec8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/src/components/dagshub/organization/modals/generic-modal/index.tsx b/src/components/dagshub/organization/modals/generic-modal/index.tsx
@@ -4,7 +4,7 @@ import './generic-modal.scss';
 import { Icon } from '.././../../../icons/index';
 
 export interface ModalProps {
-  title: string;
+  title?: string;
   elements: JSX.Element[];
   onClose: () => void;
   height?: number;
@@ -24,7 +24,7 @@ export function GenericModal({ title, elements, onClose, height, maxHeight }: Mo
           <Icon width={10} height={10} fill="#94A3B8" icon="outline-x" />
         </button>
         <div className="modal-content">
-          <p className="modal-content__title">{title}</p>
+          {!!title&&<p className="modal-content__title">{title}</p>}
           {elements}
         </div>
       </div>

diff --git a/src/components/elements/dropdown/dropdown.scss b/src/components/elements/dropdown/dropdown.scss
@@ -3,6 +3,14 @@
   white-space: pre-wrap;
   font-family: 'Inter', sans-serif;
 
+  .helper-text {
+    color: #64748b;
+    font-weight: 500;
+    font-size: 12px;
+    height: 16px;
+    margin: 0px;
+  }
+
   .dagshub-dropdown__box {
     font-weight: 600;
     font-size: 14px;
@@ -18,6 +26,14 @@
     border: 1px solid var(--secondary-state-300);
     border-radius: 12px;
     cursor: pointer;
+
+    .errored {
+      border-color: #ef4444;
+    }
+
+    .errored .helper-text {
+      color: #ef4444;
+    }
   }
 
   .dagshub-dropdown__dropdown_title {

diff --git a/src/components/elements/dropdown/index.tsx b/src/components/elements/dropdown/index.tsx
@@ -15,18 +15,21 @@ export interface DropdownOption {
 
 export interface DropdownProps {
   kind?: 'basic' | 'radio' | 'checkbox';
-  width: number;
+  width: number|string;
   label: string;
   isCollapsed?: boolean;
   options?: RadioButtonItemProps[];
   initialChecked?: number | string;
   onItemChecked?: (id: any) => void;
   title?: string;
-  optionWidth?: number;
+  optionWidth?: number|string;
   alignOptionsToTheRight?: boolean;
   maxHeight?: number;
   dropdownBoxColor?: string;
   disabled?: boolean;
+  height?:number|string;
+  errored?: boolean;
+  helperText?:string;
 }
 
 export const Dropdown = ({
@@ -42,6 +45,9 @@ export const Dropdown = ({
   maxHeight,
   dropdownBoxColor = '#f8fafc',
   disabled = false,
+  height,
+  errored,
+  helperText,
   ...props
 }: DropdownProps & React.ButtonHTMLAttributes<HTMLDivElement>) => {
   const dropdownRef = useRef(null);
@@ -107,16 +113,17 @@ export const Dropdown = ({
     };
   }, []);
 
+
   return (
     <div
       ref={dropdownRef}
       className="dagshub-dropdown"
-      style={{ width, cursor: disabled ? 'not-allowed' : 'pointer' }}
+      style={{ width: width, height: height, cursor: disabled ? 'not-allowed' : 'pointer' }}
       {...props}
     >
       <div
-        className="dagshub-dropdown__box"
-        style={{ background: dropdownBoxColor, pointerEvents: disabled ? 'none' : 'all' }}
+        className={classNames([`"dagshub-dropdown__box"`], { disabled })}
+        style={{ height: '100%', background: dropdownBoxColor, pointerEvents: disabled ? 'none' : 'all' }}
         onClick={() => setIsCollapsed(!isCollapsed)}
       >
         {(kind != 'checkbox' && checkedOptLabel) || label}
@@ -130,7 +137,7 @@ export const Dropdown = ({
       {kind === 'checkbox' && !isCollapsed && (
         <div
           className={classNames('dagshub-dropdown__options', { right: alignOptionsToTheRight })}
-          style={{ maxHeight: maxHeight }}
+          style={{ maxHeight: maxHeight, width: optionWidth ? optionWidth : '100%' }}
         >
           {checkboxOptions?.map((opt: RadioButtonItemProps) => (
             <Checkbox
@@ -185,6 +192,7 @@ export const Dropdown = ({
           ))}
         </div>
       )}
+      {helperText && <p className="helper-text">{helperText}</p>}
     </div>
   );
 };