progress

Author: LFDanLu

eslint.config.mjs

@@ -445,29 +445,6 @@ export default [{
         "jsdoc/require-jsdoc": OFF,
         "jsdoc/require-description": OFF,
     },
-}, {
-    files: [
-        "packages/**/*.ts",
-        "packages/**/*.tsx"
-    ],
-
-    rules: {
-        "@typescript-eslint/explicit-module-boundary-types": ERROR,
-    },
-}, {
-    files: [
-        "**/dev/**",
-        "**/test/**",
-        "**/stories/**",
-        "**/docs/**",
-        "**/chromatic/**",
-        "**/chromatic-fc/**",
-        "**/__tests__/**"
-    ],
-
-    rules: {
-        "@typescript-eslint/explicit-module-boundary-types": OFF,
-    },
 }, {
     files: [
         "packages/@react-aria/focus/src/**/*.ts",
@@ -504,4 +481,4 @@ export default [{
     rules: {
         "react/react-in-jsx-scope": OFF,
     },
-}];
+}];

packages/@react-spectrum/s2/src/ColorField.tsx

@@ -23,6 +23,7 @@ import {FormContext, useFormProps} from './Form';
 import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {TextFieldRef} from '@react-types/textfield';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
@@ -75,6 +76,8 @@ export const ColorField = forwardRef(function ColorField(props: ColorFieldProps,
     }
   }));
 
+  usePlaceholderWarning(props.placeholder, 'ColorField', inputRef);
+
   return (
     <AriaColorField
       {...fieldProps}

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -64,6 +64,7 @@ import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {TextFieldRef} from '@react-types/textfield';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useScale} from './utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -580,6 +581,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
     );
   }
   let scale = useScale();
+  usePlaceholderWarning(props.placeholder, 'ComboBox', inputRef);
 
   return (
     <>

packages/@react-spectrum/s2/src/NumberField.tsx

@@ -33,6 +33,7 @@ import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react
 import {pressScale} from './pressScale';
 import {TextFieldRef} from '@react-types/textfield';
 import {useButton, useFocusRing, useHover} from 'react-aria';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
@@ -177,6 +178,7 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
     }
   }));
 
+  usePlaceholderWarning(props.placeholder, 'NumberField', inputRef);
 
   return (
     <AriaNumberField

packages/@react-spectrum/s2/src/SearchField.tsx

@@ -29,6 +29,7 @@ import {IconContext} from './Icon';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import {TextFieldRef} from '@react-types/textfield';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
@@ -81,6 +82,8 @@ export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props:
     }
   }));
 
+  usePlaceholderWarning(props.placeholder, 'SearchField', inputRef);
+
   return (
     <AriaSearchField
       {...searchFieldProps}

packages/@react-spectrum/s2/src/TextField.tsx

@@ -25,11 +25,12 @@ import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHand
 import {createFocusableRef} from '@react-spectrum/utils';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
-import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {mergeRefs} from '@react-aria/utils';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {TextFieldRef} from '@react-types/textfield';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
@@ -39,7 +40,6 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
    * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
-  // TODO: put warning about needing to provide this for cases where the text field is not focused and doesn't have text
   /**
    * Temporary text that occupies the text input when it is empty.
    */
@@ -106,6 +106,8 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
     ...textFieldProps
   } = props;
 
+  usePlaceholderWarning(props.placeholder, 'TextField/Area', inputRef);
+
   // Expose imperative interface for ref
   useImperativeHandle(ref, () => ({
     ...createFocusableRef(domRef, inputRef),
@@ -185,10 +187,11 @@ function TextAreaInput() {
       input.style.alignSelf = prevAlignment;
     }
   };
+  let {ref} = useSlottedContext(InputContext) ?? {};
 
   return (
     <AriaTextArea
-      ref={onHeightChange}
+      ref={mergeRefs(onHeightChange, ref as RefObject<HTMLTextAreaElement | null>)}
       // Workaround for baseline alignment bug in Safari.
       // https://bugs.webkit.org/show_bug.cgi?id=142968
       placeholder={placeholder ?? ' '}

packages/@react-spectrum/s2/src/placeholder-utils.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RefObject, useEffect} from 'react';
+import {useEffectEvent, useEvent} from '@react-aria/utils';
+
+export function usePlaceholderWarning(placeholder: string | undefined, componentType: string, inputRef: RefObject<HTMLInputElement | null>): void {
+  let checkPlaceholder = useEffectEvent((input: HTMLInputElement | null) => {
+    if (!placeholder && input) {
+      if (document.activeElement !== input && (!input.value || input.value === '') && process.env.NODE_ENV !== 'production') {
+        console.warn(`Your ${componentType} is empty and not focused but doesn't have a placeholder. Please add one.`);
+      }
+    }
+  });
+
+  useEffect(() => {
+    checkPlaceholder(inputRef.current);
+  }, [checkPlaceholder, inputRef]);
+
+  useEvent(inputRef, 'blur', (e) => checkPlaceholder(e.target as HTMLInputElement));
+}

packages/@react-spectrum/s2/stories/ColorField.stories.tsx

@@ -43,7 +43,8 @@ type Story = StoryObj<typeof ColorField>;
 export const Example: Story = {
   render: (args) => <ColorField {...args} />,
   args: {
-    label: 'Color'
+    label: 'Color',
+    placeholder: '######'
   }
 };
 

packages/@react-spectrum/s2/stories/TextField.stories.tsx

@@ -28,7 +28,8 @@ const meta: Meta<typeof TextField> = {
     label: {control: {type: 'text'}},
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    placeholder: {control: {type: 'text', defaultValue: 'Enter a name'}}
   },
   title: 'TextField'
 };