Redesign Components: Text Input (#39941)

.storybook/preview.tsx

@@ -204,6 +204,14 @@ const preview: Preview = {
         </IdentityContext.Provider>
       );
     },
+    (Story, { parameters }) => {
+      useEffect(() => {
+        document.documentElement.dataset.redesign = parameters.redesign
+          ? 'true'
+          : 'false';
+      }, [parameters.redesign]);
+      return <Story />;
+    },
   ],
   loaders: [
     mswLoader,

.storybook/storybook.d.ts

@@ -39,6 +39,8 @@ declare module 'storybook/internal/csf' {
     state?: TypedRootState;
     /** Callback that is run with the story arguments to generate Redux state for the component. */
     stateFn?: (args: any) => TypedRootState;
+    /** True to set the redesign global settings. */
+    redesign?: boolean;
   }
 }
 

app/javascript/mastodon/components/form_fields/redesign.module.scss

@@ -1,5 +1,41 @@
+.inputWrapper {
+  label {
+    font-size: var(--fs-sm);
+  }
+
+  span {
+    color: var(--color-text-tertiary);
+    font-size: var(--fs-2xs);
+    line-height: var(--fs-lg);
+  }
+}
+
+input.input {
+  font-size: var(--fs-lg);
+  background: none;
+  border-radius: var(--space-xs);
+  border: 0.5px solid var(--color-text-tertiary);
+  padding: var(--space-xs);
+  transition: background 200ms;
+
+  &:hover:not(:disabled) {
+    box-shadow: 0 1px var(--space-2xs) 0
+      rgb(from var(--color-text-primary) r g b / 10%);
+    background: var(--color-bg-highlight);
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-border-strong);
+  }
+
+  &:disabled {
+    border-color: var(--color-bg-disabled);
+  }
+}
+
+// Use double class to override original styles.
 .toggle.toggle {
-  background: rgb(from var(--color-bg-inverted) r g b / 70%);
+  background: var(--color-text-tertiary);
 
   &::before {
     box-shadow: none;

app/javascript/mastodon/components/form_fields/redesign.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { ToggleField } from './redesign';
+import { TextInputField, ToggleField } from './redesign';
 
 interface FieldProps {
   label: string;
@@ -19,12 +19,21 @@ const meta = {
     hint: 'This is a description of this form field',
     disabled: false,
   },
+  parameters: {
+    redesign: true,
+  },
 } satisfies Meta<FieldProps>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const TextInput: Story = {
+  render(args) {
+    return <TextInputField {...args} />;
+  },
+};
+
 export const Toggle: Story = {
   render(args) {
     return <ToggleField {...args} />;

app/javascript/mastodon/components/form_fields/redesign.tsx

@@ -3,22 +3,49 @@ import classNames from 'classnames';
 import type { Merge } from 'type-fest';
 
 import classes from './redesign.module.scss';
+import {
+  TextInput as OldTextInput,
+  TextInputField as OldTextInputField,
+} from './text_input_field';
 import {
   Toggle as OldToggle,
   ToggleField as OldToggleField,
 } from './toggle_field';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ToggleComponent<T extends React.JSXElementConstructor<any>> = React.FC<
-  Merge<
-    React.ComponentProps<T>,
-    {
-      size?: 'sm' | 'lg';
-    }
-  >
->;
+type RedesignComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends React.JSXElementConstructor<any>,
+  P = object,
+> = React.FC<Merge<React.ComponentProps<T>, P>>;
 
-export const Toggle: ToggleComponent<typeof OldToggle> = ({
+// Text field
+
+export const TextInputField: RedesignComponent<typeof OldTextInputField> = ({
+  className,
+  wrapperClassName,
+  ...props
+}) => (
+  <OldTextInputField
+    {...props}
+    className={classNames(className, classes.input)}
+    wrapperClassName={classNames(wrapperClassName, classes.inputWrapper)}
+  />
+);
+
+export const TextInput: RedesignComponent<typeof OldTextInput> = ({
+  className,
+  ...props
+}) => (
+  <OldTextInput {...props} className={classNames(className, classes.input)} />
+);
+
+// Toggles
+
+interface ToggleProps {
+  size?: 'sm' | 'lg';
+}
+
+export const Toggle: RedesignComponent<typeof OldToggle, ToggleProps> = ({
   className,
   size,
   ...props
@@ -33,11 +60,10 @@ export const Toggle: ToggleComponent<typeof OldToggle> = ({
   />
 );
 
-export const ToggleField: ToggleComponent<typeof OldToggleField> = ({
-  className,
-  size,
-  ...props
-}) => (
+export const ToggleField: RedesignComponent<
+  typeof OldToggleField,
+  ToggleProps
+> = ({ className, size, ...props }) => (
   <OldToggleField
     {...props}
     className={classNames(