Merge pull request #1 from tableflowhq/feature/dropdown-fixes

Added mark for required options. Updated placeholder to enable selection

Author: alotropico

src/Input/Input.stories.tsx

@@ -135,5 +135,6 @@ Dropdown.args = {
         "Option III": { value: "3" },
         "Option IV": { value: "4" },
         "Option V": { value: "5" },
+        "Option V": { value: "required", required: true },
     },
 };

src/Input/index.tsx

@@ -60,7 +60,7 @@ export default function Input({ as = "input", label, icon, iconAfter, error, opt
     );
 }
 
-function Select({ options = {}, ...props }: InputProps) {
+function Select({ options = {}, placeholder, ...props }: InputProps) {
     const [open, setOpen] = useState(false);
 
     const onChangeOption = (e: any) => {
@@ -101,14 +101,26 @@ function Select({ options = {}, ...props }: InputProps) {
 
     return (
         <>
-            <input {...props} value={selectedKey} className={classes([style.select, open && style.open])} readOnly onFocus={onFocus} />
+            <input
+                {...props}
+                value={selectedKey && `${selectedKey} ${options[selectedKey]?.required ? "*" : ""}`}
+                className={classes([style.select, open && style.open])}
+                readOnly
+                onFocus={onFocus}
+                placeholder={placeholder}
+            />
 
             <div className={style.optionsRef} ref={setRef} />
 
             {open && (
                 <Portal>
                     <div className={style.options} style={optionsPosition} ref={setRefPortal}>
                         <div className={style.inner} ref={ref}>
+                            {placeholder && (
+                                <button key={-1} className={classes([style.option, style.placeholder])} onClick={onChangeOption}>
+                                    {placeholder}
+                                </button>
+                            )}
                             {Object.keys(options).map((k, i) => (
                                 <button
                                     key={k}
@@ -117,7 +129,7 @@ function Select({ options = {}, ...props }: InputProps) {
                                     {...options[k]}
                                     onClick={onChangeOption}
                                     autoFocus={i === 0}>
-                                    {k}
+                                    {k} {options[k].required && <span className={style.requiredMark}>*</span>}
                                 </button>
                             ))}
                         </div>

src/Input/style/Input.module.scss

@@ -196,6 +196,12 @@
             &.selected {
                 background-color: var(--color-background-menu-hover);
             }
+            &.placeholder {
+                color: var(--color-text-soft);
+            }
+        }
+        .requiredMark {
+            color: var(--color-text-error);
         }
     }
 }

src/Input/types/index.ts

@@ -2,31 +2,32 @@ import { ButtonHTMLAttributes, InputHTMLAttributes, ReactElement } from "react";
 import { IconType } from "../../Icon/types";
 
 export type inputTypes =
-  | "date"
-  | "datetime-local"
-  | "email"
-  | "file"
-  | "month"
-  | "number"
-  | "password"
-  | "search"
-  | "tel"
-  | "text"
-  | "time"
-  | "url"
-  | "week";
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "file"
+    | "month"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week";
 
 export type InputVariants = "fluid" | "small";
+export type InputOption = ButtonHTMLAttributes<HTMLButtonElement> & { required: boolean };
 
 export type InputProps = InputHTMLAttributes<HTMLInputElement> &
-  InputHTMLAttributes<HTMLSelectElement> &
-  InputHTMLAttributes<HTMLTextAreaElement> & {
-    as?: "input" | "textarea";
-    label?: string | ReactElement;
-    icon?: IconType;
-    iconAfter?: IconType | ReactElement;
-    error?: string;
-    options?: { [key: string]: ButtonHTMLAttributes<HTMLButtonElement> };
-    variants?: InputVariants[];
-    type?: inputTypes;
-  };
+    InputHTMLAttributes<HTMLSelectElement> &
+    InputHTMLAttributes<HTMLTextAreaElement> & {
+        as?: "input" | "textarea";
+        label?: string | ReactElement;
+        icon?: IconType;
+        iconAfter?: IconType | ReactElement;
+        error?: string;
+        options?: { [key: string]: InputOption };
+        variants?: InputVariants[];
+        type?: inputTypes;
+    };