From 7b1ca1044d754d45b16f182a8fc6330d871162cf Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Tue, 12 Sep 2023 16:15:39 -0400
Subject: [PATCH 1/4] enhancement: add min-length, max-length, disabled to text
 and text_area

---
 frontend/src/components/ui/input.tsx          |  9 +++-
 frontend/src/components/ui/textarea.tsx       | 28 ++++++++----
 frontend/src/plugins/impl/TextAreaPlugin.tsx  | 16 +++++++
 frontend/src/plugins/impl/TextInputPlugin.tsx | 16 +++++++
 marimo/_plugins/ui/_impl/input.py             | 18 ++++++++
 marimo/_smoke_tests/inputs.py                 | 45 +++++++++++++++++++
 6 files changed, 122 insertions(+), 10 deletions(-)
 create mode 100644 marimo/_smoke_tests/inputs.py

diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index f6cd79cea25..4289cebc3a5 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -5,10 +5,11 @@ import { cn } from "@/lib/utils";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   icon?: React.ReactNode;
+  endAdornment?: React.ReactNode;
 };
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, endAdornment, ...props }, ref) => {
     const icon = props.icon;
 
     return (
@@ -23,11 +24,17 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           className={cn(
             "flex h-6 w-full mb-1 rounded-sm shadow-xsSolid border border-input bg-transparent px-1.5 py-1 text-sm font-code ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground hover:shadow-smSolid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-primary focus-visible:shadow-mdSolid disabled:cursor-not-allowed disabled:opacity-50",
             icon && "pl-7",
+            endAdornment && "pr-10",
             className
           )}
           ref={ref}
           {...props}
         />
+        {endAdornment && (
+          <div className="absolute inset-y-0 right-0 flex items-center pr-[6px] pointer-events-none text-muted-foreground h-6">
+            {endAdornment}
+          </div>
+        )}
       </div>
     );
   }
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index 19a49165be5..aefef2f70e1 100644
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -3,19 +3,29 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  bottomAdornment?: React.ReactNode;
+}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, bottomAdornment, ...props }, ref) => {
     return (
-      <textarea
-        className={cn(
-          "flex h-20 w-full mb-1 rounded-sm shadow-xsSolid border border-input bg-transparent px-3 py-2 text-sm font-code ring-offset-background placeholder:text-muted-foreground hover:shadow-smSolid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-accent focus-visible:shadow-mdSolid disabled:cursor-not-allowed disabled:opacity-50",
-          className
+      <div className="relative">
+        <textarea
+          className={cn(
+            "flex h-20 w-full mb-1 rounded-sm shadow-xsSolid border border-input bg-transparent px-3 py-2 text-sm font-code ring-offset-background placeholder:text-muted-foreground hover:shadow-smSolid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-accent focus-visible:shadow-mdSolid disabled:cursor-not-allowed disabled:opacity-50 min-h-[1.5rem]",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {bottomAdornment && (
+          <div className="absolute right-0 bottom-1 flex items-center pr-[6px] pointer-events-none text-muted-foreground h-6">
+            {bottomAdornment}
+          </div>
         )}
-        ref={ref}
-        {...props}
-      />
+      </div>
     );
   }
 );
diff --git a/frontend/src/plugins/impl/TextAreaPlugin.tsx b/frontend/src/plugins/impl/TextAreaPlugin.tsx
index eb390b1e228..0855f39af8b 100644
--- a/frontend/src/plugins/impl/TextAreaPlugin.tsx
+++ b/frontend/src/plugins/impl/TextAreaPlugin.tsx
@@ -10,6 +10,9 @@ type T = string;
 interface Data {
   placeholder: string;
   label: string | null;
+  maxLength?: number;
+  minLength?: number;
+  disabled?: boolean;
 }
 
 export class TextAreaPlugin implements IPlugin<T, Data> {
@@ -19,6 +22,9 @@ export class TextAreaPlugin implements IPlugin<T, Data> {
     initialValue: z.string(),
     placeholder: z.string(),
     label: z.string().nullable(),
+    maxLength: z.number().optional(),
+    minLength: z.number().optional(),
+    disabled: z.boolean().optional(),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
@@ -38,12 +44,22 @@ interface TextAreaComponentProps extends Data {
 }
 
 const TextAreaComponent = (props: TextAreaComponentProps) => {
+  const bottomAdornment = props.maxLength ? (
+    <span className="text-muted-foreground text-xs font-medium">
+      {props.value.length}/{props.maxLength}
+    </span>
+  ) : null;
+
   return (
     <Labeled label={props.label} align="top">
       <Textarea
         className="font-code"
         rows={5}
         cols={33}
+        maxLength={props.maxLength}
+        minLength={props.minLength}
+        disabled={props.disabled}
+        bottomAdornment={bottomAdornment}
         value={props.value}
         onInput={(event) =>
           props.setValue((event.target as HTMLInputElement).value)
diff --git a/frontend/src/plugins/impl/TextInputPlugin.tsx b/frontend/src/plugins/impl/TextInputPlugin.tsx
index c49de8cabd2..ae7ce488e1b 100644
--- a/frontend/src/plugins/impl/TextInputPlugin.tsx
+++ b/frontend/src/plugins/impl/TextInputPlugin.tsx
@@ -16,6 +16,9 @@ interface Data {
   placeholder: string;
   label: string | null;
   kind: InputType;
+  maxLength?: number;
+  minLength?: number;
+  disabled?: boolean;
 }
 
 export class TextInputPlugin implements IPlugin<T, Data> {
@@ -26,6 +29,9 @@ export class TextInputPlugin implements IPlugin<T, Data> {
     placeholder: z.string(),
     label: z.string().nullable(),
     kind: z.enum(["text", "password", "email", "url"]).default("text"),
+    maxLength: z.number().optional(),
+    minLength: z.number().optional(),
+    disabled: z.boolean().optional(),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
@@ -57,15 +63,25 @@ const TextComponent = (props: TextComponentProps) => {
     url: <GlobeIcon size={16} />,
   };
 
+  const endAdornment = props.maxLength ? (
+    <span className="text-muted-foreground text-xs font-medium">
+      {props.value.length}/{props.maxLength}
+    </span>
+  ) : null;
+
   return (
     <Labeled label={props.label}>
       <Input
         type={props.kind}
         icon={icon[props.kind]}
         placeholder={props.placeholder}
+        maxLength={props.maxLength}
+        minLength={props.minLength}
+        disabled={props.disabled}
         className={cn({
           "border-destructive": !isValid,
         })}
+        endAdornment={endAdornment}
         value={props.value}
         onInput={(event) => props.setValue(event.currentTarget.value)}
         onBlur={(event) => setValueOnBlur(event.currentTarget.value)}
diff --git a/marimo/_plugins/ui/_impl/input.py b/marimo/_plugins/ui/_impl/input.py
index 337cdd62077..e24c46de0e3 100644
--- a/marimo/_plugins/ui/_impl/input.py
+++ b/marimo/_plugins/ui/_impl/input.py
@@ -326,6 +326,9 @@ class text(UIElement[str, str]):
     - `placeholder`: placeholder text to display when the text area is empty
     - `kind`: input kind, one of `"text"`, `"password"`, `"email"`, or `"url"`
         defaults to `"text"`
+    - `max_length`: maximum length of input
+    - `min_length`: minimum length of input
+    - `disabled`: whether the input is disabled
     - `label`: text label for the element
     - `on_change`: optional callback to run when this element's value changes
     """
@@ -337,6 +340,9 @@ def __init__(
         value: str = "",
         placeholder: str = "",
         kind: Literal["text", "password", "email", "url"] = "text",
+        max_length: Optional[int] = None,
+        min_length: Optional[int] = None,
+        disabled: bool = False,
         *,
         label: str = "",
         on_change: Optional[Callable[[str], None]] = None,
@@ -348,6 +354,9 @@ def __init__(
             args={
                 "placeholder": placeholder,
                 "kind": kind,
+                "max-length": max_length,
+                "min-length": min_length,
+                "disabled": disabled,
             },
             on_change=on_change,
         )
@@ -375,6 +384,9 @@ class text_area(UIElement[str, str]):
 
     - `value`: initial value of the text area
     - `placeholder`: placeholder text to display when the text area is empty
+    - `max_length`: maximum length of input
+    - `min_length`: minimum length of input
+    - `disabled`: whether the input is disabled
     - `label`: text label for the element
     - `on_change`: optional callback to run when this element's value changes
     """
@@ -385,6 +397,9 @@ def __init__(
         self,
         value: str = "",
         placeholder: str = "",
+        max_length: Optional[int] = None,
+        min_length: Optional[int] = None,
+        disabled: bool = False,
         *,
         label: str = "",
         on_change: Optional[Callable[[str], None]] = None,
@@ -395,6 +410,9 @@ def __init__(
             label=label,
             args={
                 "placeholder": placeholder,
+                "max-length": max_length,
+                "min-length": min_length,
+                "disabled": disabled,
             },
             on_change=on_change,
         )
diff --git a/marimo/_smoke_tests/inputs.py b/marimo/_smoke_tests/inputs.py
new file mode 100644
index 00000000000..376aca917ee
--- /dev/null
+++ b/marimo/_smoke_tests/inputs.py
@@ -0,0 +1,45 @@
+import marimo
+
+__generated_with = "0.1.8"
+app = marimo.App()
+
+
+@app.cell
+def __():
+    import marimo as mo
+    return mo,
+
+
+@app.cell
+def __(mo):
+    disabled = mo.ui.switch(label="Disabled")
+    mo.hstack([disabled])
+    return disabled,
+
+
+@app.cell
+def __(disabled, mo):
+    mo.vstack(
+        [
+            mo.ui.text(label="Your name", min_length=1, disabled=disabled.value),
+            mo.ui.text(
+                label="Your tagline", max_length=30, disabled=disabled.value
+            ),
+            mo.ui.text_area(
+                label="Your bio", max_length=180, disabled=disabled.value
+            ),
+        ]
+    )
+    return
+
+
+@app.cell
+def __(disabled, mo):
+    mo.ui.text(
+        label="At least 10 characters", min_length=10, disabled=disabled.value
+    ).form()
+    return
+
+
+if __name__ == "__main__":
+    app.run()

From 75f77955fef1df57fb88fbb1ca7eb6a360e9f000 Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Tue, 12 Sep 2023 16:19:14 -0400
Subject: [PATCH 2/4] fix shadow on disabled

---
 frontend/src/components/ui/input.tsx    | 3 ++-
 frontend/src/components/ui/textarea.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 4289cebc3a5..a4879098f70 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -22,7 +22,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <input
           type={type}
           className={cn(
-            "flex h-6 w-full mb-1 rounded-sm shadow-xsSolid border border-input bg-transparent px-1.5 py-1 text-sm font-code ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground hover:shadow-smSolid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-primary focus-visible:shadow-mdSolid disabled:cursor-not-allowed disabled:opacity-50",
+            "shadow-xsSolid hover:shadow-smSolid disabled:shadow-xsSolid focus-visible:shadow-mdSolid",
+            "flex h-6 w-full mb-1 rounded-sm border border-input bg-transparent px-1.5 py-1 text-sm font-code ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50",
             icon && "pl-7",
             endAdornment && "pr-10",
             className
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index aefef2f70e1..5f27f624113 100644
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -14,7 +14,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className="relative">
         <textarea
           className={cn(
-            "flex h-20 w-full mb-1 rounded-sm shadow-xsSolid border border-input bg-transparent px-3 py-2 text-sm font-code ring-offset-background placeholder:text-muted-foreground hover:shadow-smSolid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-accent focus-visible:shadow-mdSolid disabled:cursor-not-allowed disabled:opacity-50 min-h-[1.5rem]",
+            "shadow-xsSolid hover:shadow-smSolid disabled:shadow-xsSolid focus-visible:shadow-mdSolid",
+            "flex h-20 w-full mb-1 rounded-sm border border-input bg-transparent px-3 py-2 text-sm font-code ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-accent disabled:cursor-not-allowed disabled:opacity-50 min-h-[1.5rem]",
             className
           )}
           ref={ref}

From b77fd0715accc0029af59cca12451275202e948e Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Tue, 12 Sep 2023 16:50:21 -0400
Subject: [PATCH 3/4] add required prop

---
 frontend/src/plugins/impl/TextAreaPlugin.tsx  | 1 +
 frontend/src/plugins/impl/TextInputPlugin.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/src/plugins/impl/TextAreaPlugin.tsx b/frontend/src/plugins/impl/TextAreaPlugin.tsx
index 0855f39af8b..b6c50efb820 100644
--- a/frontend/src/plugins/impl/TextAreaPlugin.tsx
+++ b/frontend/src/plugins/impl/TextAreaPlugin.tsx
@@ -58,6 +58,7 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
         cols={33}
         maxLength={props.maxLength}
         minLength={props.minLength}
+        required={props.minLength != null && props.minLength > 0}
         disabled={props.disabled}
         bottomAdornment={bottomAdornment}
         value={props.value}
diff --git a/frontend/src/plugins/impl/TextInputPlugin.tsx b/frontend/src/plugins/impl/TextInputPlugin.tsx
index ae7ce488e1b..dcddb3fc9ff 100644
--- a/frontend/src/plugins/impl/TextInputPlugin.tsx
+++ b/frontend/src/plugins/impl/TextInputPlugin.tsx
@@ -77,6 +77,7 @@ const TextComponent = (props: TextComponentProps) => {
         placeholder={props.placeholder}
         maxLength={props.maxLength}
         minLength={props.minLength}
+        required={props.minLength != null && props.minLength > 0}
         disabled={props.disabled}
         className={cn({
           "border-destructive": !isValid,

From e9b4c9f0a7fc6805882124e0d09d137387c61031 Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Tue, 12 Sep 2023 19:09:50 -0400
Subject: [PATCH 4/4] remove min_length

---
 marimo/_plugins/ui/_impl/input.py |  6 ------
 marimo/_smoke_tests/inputs.py     | 11 +----------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/marimo/_plugins/ui/_impl/input.py b/marimo/_plugins/ui/_impl/input.py
index e24c46de0e3..192f832c6bd 100644
--- a/marimo/_plugins/ui/_impl/input.py
+++ b/marimo/_plugins/ui/_impl/input.py
@@ -327,7 +327,6 @@ class text(UIElement[str, str]):
     - `kind`: input kind, one of `"text"`, `"password"`, `"email"`, or `"url"`
         defaults to `"text"`
     - `max_length`: maximum length of input
-    - `min_length`: minimum length of input
     - `disabled`: whether the input is disabled
     - `label`: text label for the element
     - `on_change`: optional callback to run when this element's value changes
@@ -341,7 +340,6 @@ def __init__(
         placeholder: str = "",
         kind: Literal["text", "password", "email", "url"] = "text",
         max_length: Optional[int] = None,
-        min_length: Optional[int] = None,
         disabled: bool = False,
         *,
         label: str = "",
@@ -355,7 +353,6 @@ def __init__(
                 "placeholder": placeholder,
                 "kind": kind,
                 "max-length": max_length,
-                "min-length": min_length,
                 "disabled": disabled,
             },
             on_change=on_change,
@@ -385,7 +382,6 @@ class text_area(UIElement[str, str]):
     - `value`: initial value of the text area
     - `placeholder`: placeholder text to display when the text area is empty
     - `max_length`: maximum length of input
-    - `min_length`: minimum length of input
     - `disabled`: whether the input is disabled
     - `label`: text label for the element
     - `on_change`: optional callback to run when this element's value changes
@@ -398,7 +394,6 @@ def __init__(
         value: str = "",
         placeholder: str = "",
         max_length: Optional[int] = None,
-        min_length: Optional[int] = None,
         disabled: bool = False,
         *,
         label: str = "",
@@ -411,7 +406,6 @@ def __init__(
             args={
                 "placeholder": placeholder,
                 "max-length": max_length,
-                "min-length": min_length,
                 "disabled": disabled,
             },
             on_change=on_change,
diff --git a/marimo/_smoke_tests/inputs.py b/marimo/_smoke_tests/inputs.py
index 376aca917ee..a2e27d9fc38 100644
--- a/marimo/_smoke_tests/inputs.py
+++ b/marimo/_smoke_tests/inputs.py
@@ -21,7 +21,7 @@ def __(mo):
 def __(disabled, mo):
     mo.vstack(
         [
-            mo.ui.text(label="Your name", min_length=1, disabled=disabled.value),
+            mo.ui.text(label="Your name", disabled=disabled.value),
             mo.ui.text(
                 label="Your tagline", max_length=30, disabled=disabled.value
             ),
@@ -32,14 +32,5 @@ def __(disabled, mo):
     )
     return
 
-
-@app.cell
-def __(disabled, mo):
-    mo.ui.text(
-        label="At least 10 characters", min_length=10, disabled=disabled.value
-    ).form()
-    return
-
-
 if __name__ == "__main__":
     app.run()