Add capitalization settings support for useTextField (#5472)

* Add captchralization settings support for useTextField

* fix: link

* Update useTextField.stories.tsx

add auto capitalization story to useTextField

---------

Co-authored-by: Yihui Liao <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: 3 people

packages/@react-aria/textfield/src/useTextField.ts

@@ -79,7 +79,12 @@ export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> exte
    * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
    * @default 'input'
    */
-  inputElementType?: T
+  inputElementType?: T,
+  /**
+   * A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocapitalize).
+   */
+  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
 }
 
 /**
@@ -175,6 +180,7 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
         value,
         onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),
         autoComplete: props.autoComplete,
+        autoCapitalize: props.autoCapitalize,
         maxLength: props.maxLength,
         minLength: props.minLength,
         name: props.name,

packages/@react-aria/textfield/stories/useTextField.stories.tsx

@@ -57,3 +57,17 @@ export const WithHTMLTextAreaElement = {
     value: 'Test value'
   }
 };
+
+export const WithAutoCapitalization = {
+  render: TextInputFieldTemplate,
+  args: {
+    label: 'Test label',
+    autoCapitalize: undefined
+  },
+  argTypes: {
+    autoCapitalize: {
+      options: [undefined, 'off', 'none', 'on', 'sentences', 'words', 'characters']
+    }
+  }
+};
+

packages/@react-aria/textfield/test/useTextField.test.js

@@ -72,6 +72,14 @@ describe('useTextField hook', () => {
       expect(props['aria-invalid']).toBeUndefined();
     });
 
+    it('with appropriate props if autoCapitalize is defined', () => {
+      let props = renderTextFieldHook({autoCapitalize: 'on', 'aria-label': 'mandatory label'});
+      expect(props.autoCapitalize).toBe('on');
+
+      props = renderTextFieldHook({autoCapitalize: 'off', 'aria-label': 'mandatory label'});
+      expect(props.autoCapitalize).toBe('off');
+    });
+
     it('with an onChange that calls user specified onChange with appropriate values', () => {
       let onChange = jest.fn();
       let props = renderTextFieldHook({onChange, 'aria-label': 'mandatory label'});

packages/@react-types/form/src/index.d.ts

@@ -60,7 +60,7 @@ export interface FormProps extends AriaLabelingProps {
    * A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocapitalize).
    */
-  autoCapitalize?: 'off' | 'on',
+  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters',
   /**
    * An ARIA role override to apply to the form element.
    */