react-spectrum

07956172 - Implement help text for TextField, TextArea, SearchField, and Picker (#1846)

Implement help text for TextField, TextArea, SearchField, and Picker (#1846) * Update useControlledState for StrictMode The current useControlledState has side effects, this causes an issue StrictMode * remove out of date comment * Add help text interfaces Adapted from GH issue description * Basic setup for useField * Add HelpText to Field when description or errorMessage exist * Start adding desc/err msg to TextField and Combobox * Fix render and aria-describedby logic * More improvements to rendering logic * Only return props for desc/errMsg if they're passed in * Refactor TextFieldBase to use Field * Preserve aria-describedby prop * Remove useField.mdx placeholder doc * Props syntax refactor * Linting and type fixes * Create HelpText stories and chromatic Also rearrange order of aria-describedby elements. Move props['aria-describedby'] from beginning to end, so AT announces help text description first, which makes more sense. * Add Textfield stories * Add styles Used the spectrum-css helptext component styles for reference. https://github.com/adobe/spectrum-css/blob/main/components/vars/css/components/spectrum-helptext.css * Update styles with latest from spectrum-css and support showIcon Updated spectrum-css helptext component: https://github.com/adobe/spectrum-css/tree/DNA-7.0-beta/components/helptext * Support fields with no visible label Refactored return logic in TextFieldBase: always return a `<Field>` and delegate rendering a simple `React.cloneElement` to Field.tsx. In Field.tsx, only return a simple `React.cloneElement` if both a label and help text are missing. Otherwise, conditionally render a `<Label>` and `<HelpText>`. * Make 'description and error message' story interactive * Pass temp Field props in SearchWithin to fix lint * Fix field styles when labelPosition: side Form field and help text components (but not label) are wrapped in a vertical flex container, so that the help text renders below the field while the label is to the side. This flex container shouldn't render when no help text is provided. Modified CSS so that this new wrapper's width defaults to the default form field width, but still respects a user override. * Remove unused styleProps reference from TextFieldBase These styleProps are now always processed in `<Field>`. Follow up fix to a4d479a. * Support labelAlign=end * Add help text to Form stories and fix labelPosition=side styles * Remove unused style * Remove 2nd margin between icon and help text when labelAlign=end * Add more chromatic stories * Refactor labelAlign=side style * Add help text to MobileComboBox * Add help text to Picker * WIP: Add help text to CheckboxGroup Pushing for visibility in the PR and then reverting. Outstanding questions and issues: - Adds .spectrum-Field-field to role="presentation" div: good or bad? - Should help text live outside of role="group"? - Workaround of hardcoding wrapper width to `--spectrum-field-default-width` breaks CheckboxGroup since normally its width expands/shrinks to fit longest checkbox label * Revert "WIP: Add help text to CheckboxGroup" This reverts commit 1bc5a73ca70e3fcc5d838632840a77e8d6e82d1e. * Temporarily remove help text from Combobox Will bring it back once we find a workaround for hardcoding `.spectrum-Field-wrapper` width to 192px. Note that there's a bug in prod where comboboxes with `.spectrum-Field--positionTop` are already hardcoded to 192px width instead of 224px to account for the button. * Make descriptionProps, errorMessageProps opt. on SpectrumFieldProps Not every component that uses <Field> supports help text. * Add help text to SearchField and TextArea * PR comments: Add doc comment block & validationState=valid story * PR comments: rename showIcon to showErrorIcon * Skip failing NumberField test This is related to some breaking behavior for controlled components that use Field. Need more investigation on why calling `useSlotId()` in `useField.ts` interferes with `useControlledState`. * Don't let form fields accept showErrorIcon prop Make SpectrumTextFieldProps and SpectrumPickerProps extend from HelpTextProps instead of SpectrumHelpTextProps. Now only HelpText and Field can accept `showErrorIcon`. When CheckboxGroup and RadioGroup are supported, they'll set it to true while all other components that use Field should set it to false. I'll also add back tests that verify the icon shows. * Remove useField from monorepo for now Co-authored-by: Rob Snow <rsnow@adobe.com> Co-authored-by: Dylan Kario <kario@adobe.com>