docs: Make TextInput work in dark mode; use in more places

Author: ntucker

docs/core/api/useDebounce.md

@@ -109,7 +109,10 @@ export default function SearchIssues() {
         onChange={handleChange}
         autoFocus
         loading={isPending}
-      />
+        large
+      >
+        <SearchIcon />
+      </TextInput>
       <AsyncBoundary>
         <IssueList query={debouncedQuery} owner="facebook" repo="react" />
       </AsyncBoundary>

docs/core/shared/_useLoading.mdx

@@ -54,13 +54,8 @@ export default function PostForm({ onSubmit, loading, error }) {
   };
   return (
     <form onSubmit={handleSubmit}>
-      <label>
-        Title:
-        <br />
-        <input type="text" name="title" defaultValue="My New Post"
+      <TextInput label="Title" name="title" defaultValue="My New Post"
           required />
-      </label>
-      <br />
       <label>
         Body:
         <br />

website/src/components/Demo/code/profile-edit/graphql/PostList.tsx

@@ -9,7 +9,6 @@ function PostList() {
     <div>
       <ProfileEdit id={userId} />
       <br />
-      <br />
       {posts.map(post => (
         <PostItem key={post.pk()} post={post} />
       ))}

website/src/components/Demo/code/profile-edit/graphql/ProfileEdit.tsx

@@ -8,9 +8,10 @@ export default function ProfileEdit({ id }: { id: number }) {
     controller.fetch(UserResource.update, { id, name });
 
   return (
-    <label>
-      Name:{' '}
-      <input type="text" value={user.name} onChange={handleChange} />
-    </label>
+    <TextInput
+      label="Name"
+      value={user.name}
+      onChange={handleChange}
+    />
   );
 }

website/src/components/Demo/code/profile-edit/rest/PostList.tsx

@@ -9,7 +9,6 @@ function PostList() {
     <div>
       <ProfileEdit id={userId} />
       <br />
-      <br />
       {posts.map(post => (
         <PostItem key={post.pk()} post={post} />
       ))}

website/src/components/Demo/code/profile-edit/rest/ProfileEdit.tsx

@@ -8,9 +8,10 @@ export default function ProfileEdit({ id }: { id: number }) {
     controller.fetch(UserResource.partialUpdate, { id }, { name });
 
   return (
-    <label>
-      Name:{' '}
-      <input type="text" value={user.name} onChange={handleChange} />
-    </label>
+    <TextInput
+      label="Name"
+      value={user.name}
+      onChange={handleChange}
+    />
   );
 }

website/src/components/Playground/DesignSystem/SearchIcon.tsx

@@ -0,0 +1,20 @@
+export function SearchIcon() {
+  return (
+    <div className="rt-SearchIcon">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </div>
+  );
+}

website/src/components/Playground/DesignSystem/TextInput.tsx

@@ -1,31 +1,21 @@
+import classnames from 'clsx';
 import React, { type InputHTMLAttributes } from 'react';
 
 export function TextInput({
   loading = false,
   label,
+  children,
+  large = false,
   ...props
 }: InputHTMLAttributes<HTMLInputElement> & {
+  children?: React.ReactNode;
   label?: React.ReactNode;
   loading?: boolean;
+  large?: boolean;
 }) {
   return (
-    <div className="rt-TextFieldRoot">
-      <div className="rt-TextFieldSlot">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z"
-            fill="currentColor"
-            fillRule="evenodd"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-      </div>
+    <div className={classnames('rt-TextFieldRoot', { large })}>
+      {children}
       <input spellCheck="false" className="rt-TextFieldInput" {...props} />
       {label ?
         <label className="rt-TextFieldLabel">{label}</label>

website/src/components/Playground/DesignSystem/design-system.css

@@ -4,41 +4,42 @@
   align-items: center;
   width: 100%;
   padding: 0.5em;
-  background-color: white;
-  border: 1px solid #ccc;
+  background-color: var(--ifm-color-emphasis-0);
+  border: 1px solid var(--ifm-color-emphasis-400);
   border-radius: 4px;
   position: relative;
+  font-size: 14px;
 }
 
 /* The slot element (left side) */
-.rt-TextFieldSlot {
+.rt-SearchIcon {
   display: flex;
   align-items: center;
-  color: #666;
+  color: var(--ifm-color-emphasis-700);
 }
 
 /* The input element inside the text field */
 .rt-TextFieldInput {
   flex: 1;
   border: none;
   outline: none;
-  font-size: 1em;
-  color: #333;
+  color: var(--ifm-color-content);
   background: transparent;
+  font-size: 14px;
 }
 
 /* Spinner container (right side) */
 .rt-TextFieldSpinner {
   display: flex;
   align-items: center;
-  color: #666;
+  color: var(--ifm-color-emphasis-700);
 }
 
 /* Spinner styles */
 .rt-Spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid #ccc;
+  border: 2px solid var(--ifm-color-emphasis-400);
   border-top-color: #007AFF;
   border-radius: 50%;
   animation: rt-spin 1s linear infinite;
@@ -56,10 +57,10 @@
   position: absolute;
   top: -0.75em;
   left: 0.75em;
-  background-color: white;
+  background-color: var(--ifm-color-emphasis-0);
   padding: 0 0.25em;
-  font-size: 0.75em;
-  color: #666;
+  font-size: 0.70rem;
+  color: var(--ifm-color-emphasis-700);
   pointer-events: none;
 }
 
@@ -72,3 +73,11 @@
 .rt-TextFieldRoot:focus-within {
   border-color: #007AFF;
 }
+
+
+.large.rt-TextFieldRoot {
+  font-size: 16px;
+}
+.large .rt-TextFieldInput {
+  font-size: 16px;
+}

website/src/components/Playground/DesignSystem/index.ts

@@ -4,3 +4,4 @@ export { Avatar } from './Avatar';
 export { Formatted } from './Formatted';
 import './design-system.css';
 export { TextInput } from './TextInput';
+export { SearchIcon } from './SearchIcon';