docs: Improved new todo input style

reactive · Sep 16, 2024 · 65b5b37 · 65b5b37
1 parent 966341e
commit 65b5b37
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 12 deletions.
diff --git a/docs/core/api/useDebounce.md b/docs/core/api/useDebounce.md
@@ -108,7 +108,7 @@ export default function SearchIssues() {
         onChange={handleChange}
         loading={isPending}
         autoFocus
-        large
+        size="large"
       >
         <SearchIcon />
       </TextInput>

diff --git a/website/src/components/Demo/code/todo-app/rest/NewTodo.tsx b/website/src/components/Demo/code/todo-app/rest/NewTodo.tsx
@@ -15,7 +15,7 @@ export default function NewTodo({ userId }: { userId: number }) {
     <div className="listItem nogap">
       <label>
         <input type="checkbox" name="new" checked={false} disabled />
-        <input type="text" onKeyDown={handleKeyDown} />
+        <TextInput size="small" onKeyDown={handleKeyDown} />
       </label>
       <CancelButton />
     </div>

diff --git a/website/src/components/Playground/DesignSystem/TextInput.tsx b/website/src/components/Playground/DesignSystem/TextInput.tsx
@@ -2,19 +2,25 @@ import classnames from 'clsx';
 import React, { type InputHTMLAttributes } from 'react';
 
 export function TextInput({
-  loading = false,
   label,
   children,
-  large = false,
+  loading = false,
+  size = 'medium',
   ...props
-}: InputHTMLAttributes<HTMLInputElement> & {
+}: Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   children?: React.ReactNode;
   label?: React.ReactNode;
   loading?: boolean;
-  large?: boolean;
+  size?: 'large' | 'medium' | 'small';
 }) {
   return (
-    <div className={classnames('rt-TextFieldRoot', { large })}>
+    <span
+      className={classnames('rt-TextFieldRoot', {
+        large: size === 'large',
+        medium: size === 'medium',
+        small: size === 'small',
+      })}
+    >
       {children}
       <input spellCheck="false" className="rt-TextFieldInput" {...props} />
       {label ?
@@ -25,6 +31,6 @@ export function TextInput({
           <div className="rt-Spinner"></div>
         </div>
       : null}
-    </div>
+    </span>
   );
 }
diff --git a/website/src/components/Playground/DesignSystem/design-system.css b/website/src/components/Playground/DesignSystem/design-system.css
@@ -15,9 +15,10 @@ html[data-theme='dark'] .playground-preview {
   border: 1px solid var(--ifm-color-emphasis-400);
   border-radius: 4px;
   position: relative;
-  font-size: 14px;
 }
-html[data-theme='dark'] .rt-TextFieldRoot {
+html[data-theme='dark'] .rt-TextFieldRoot,
+html[data-theme='dark'] .small.rt-TextFieldRoot:hover,
+html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within {
   background-color: var(--ifm-color-emphasis-100);
 }
 
@@ -35,7 +36,6 @@ html[data-theme='dark'] .rt-TextFieldRoot {
   outline: none;
   color: var(--ifm-color-content);
   background: transparent;
-  font-size: 14px;
 }
 
 /* Spinner container (right side) */
@@ -90,4 +90,38 @@ html[data-theme='dark'] .rt-TextFieldRoot {
 }
 .large .rt-TextFieldInput {
   font-size: 16px;
+}
+.medium.rt-TextFieldRoot {
+  font-size: 14px;
+}
+.medium .rt-TextFieldInput {
+  font-size: 14px;
+}
+.small.rt-TextFieldRoot {
+  display: inline-flex;
+  border: 1px solid transparent;       /* Transparent borders on all sides */
+  border-bottom-color: var(--ifm-color-emphasis-500);           /* Visible bottom border */
+  background: none;
+  outline: none;
+  padding: 5px;                        /* Consistent padding */
+  height: 30px;                        /* Fixed height to prevent shifting */
+  box-sizing: border-box;              /* Include padding and border in element's size */
+  transition: all 0.2s ease-in-out;    /* Quick animation for transitions */
+  border-radius: 0;
+}
+html[data-theme='dark'] .small.rt-TextFieldRoot {
+  background: none;
+}
+.small.rt-TextFieldRoot:hover,
+.small.rt-TextFieldRoot:focus-within {
+  background-color: var(--ifm-color-emphasis-0);
+  border-color: var(--ifm-color-emphasis-400);                  /* Make all borders visible */
+  border-radius: 4px;
+}
+.small.rt-TextFieldRoot:focus-within {
+  border-color: var(--ifm-color-formfield-active);                  /* Make all borders visible */
+}
+
+.listItem .rt-TextFieldRoot {
+  width: calc(100% - 21px);
 }
diff --git a/website/src/components/Playground/monaco-init.ts b/website/src/components/Playground/monaco-init.ts
@@ -266,7 +266,7 @@ if (
         declare function Avatar(props: { src: string }):JSX.Element;
         declare function Formatted({ downColor, formatter, formatterFn, timeout, transition, transitionLength, upColor, value, stylePrefix, }: NumberProps):JSX.Element
         declare function ResetableErrorBoundary(props: { children: React.ReactNode }):JSX.Element;
-        declare function TextInput(props:React.InputHTMLAttributes<HTMLInputElement> & { label?: React.ReactNode; loading?: boolean; large?: boolean; }):JSX.Element;
+        declare function TextInput(props:Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & { label?: React.ReactNode; loading?: boolean; size?: 'large' | 'medium' | 'small'; }):JSX.Element;
         declare function SearchIcon():JSX.Element;
         declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
         declare interface NumberProps {