diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx index 0c5cafe9129..4ce381ec7af 100644 --- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx +++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx @@ -447,6 +447,8 @@ function ComboBoxTray(props: ComboBoxTrayProps) { isLoading={showLoading && loadingState === 'filtering'} loadingIndicator={loadingState != null && loadingCircle} validationState={validationState} + labelAlign="start" + labelPosition="top" wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton} UNSAFE_className={ classNames( diff --git a/packages/@react-spectrum/label/package.json b/packages/@react-spectrum/label/package.json index 2d85421baa2..1b1cd333e52 100644 --- a/packages/@react-spectrum/label/package.json +++ b/packages/@react-spectrum/label/package.json @@ -35,6 +35,7 @@ "@react-aria/i18n": "^3.3.2", "@react-aria/label": "^3.2.0", "@react-aria/utils": "^3.9.0", + "@react-spectrum/form": "^3.2.3", "@react-spectrum/layout": "^3.2.1", "@react-spectrum/utils": "^3.6.2", "@react-types/label": "^3.5.0", diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx index 7087d69de68..0db4a898d21 100644 --- a/packages/@react-spectrum/label/src/Field.tsx +++ b/packages/@react-spectrum/label/src/Field.tsx @@ -19,8 +19,10 @@ import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css import {mergeProps} from '@react-aria/utils'; import React, {RefObject} from 'react'; import {SpectrumFieldProps} from '@react-types/label'; +import {useFormProps} from '@react-spectrum/form'; function Field(props: SpectrumFieldProps, ref: RefObject) { + props = useFormProps(props); let { label, labelPosition = 'top' as LabelPosition, diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json index d7a2d1bfcf6..b670baff6fc 100644 --- a/packages/@react-spectrum/numberfield/package.json +++ b/packages/@react-spectrum/numberfield/package.json @@ -39,7 +39,6 @@ "@react-aria/numberfield": "^3.1.0", "@react-aria/utils": "^3.9.0", "@react-spectrum/button": "^3.6.0", - "@react-spectrum/form": "^3.2.3", "@react-spectrum/label": "^3.4.0", "@react-spectrum/textfield": "^3.2.0", "@react-spectrum/utils": "^3.6.2", diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx index 055ec301a87..183fb18bc0c 100644 --- a/packages/@react-spectrum/numberfield/src/NumberField.tsx +++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx @@ -21,7 +21,6 @@ import {SpectrumNumberFieldProps} from '@react-types/numberfield'; import {StepButton} from './StepButton'; import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; -import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useNumberField} from '@react-aria/numberfield'; @@ -30,7 +29,6 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider'; function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef) { props = useProviderProps(props); - props = useFormProps(props); let provider = useProvider(); let { isQuiet, diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json index d6795bf191f..0032050adc6 100644 --- a/packages/@react-spectrum/picker/package.json +++ b/packages/@react-spectrum/picker/package.json @@ -39,7 +39,6 @@ "@react-aria/select": "^3.5.0", "@react-aria/utils": "^3.9.0", "@react-spectrum/button": "^3.6.0", - "@react-spectrum/form": "^3.2.3", "@react-spectrum/label": "^3.4.0", "@react-spectrum/listbox": "^3.5.3", "@react-spectrum/overlays": "^3.4.4", diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx index 478c559be09..31b51174232 100644 --- a/packages/@react-spectrum/picker/src/Picker.tsx +++ b/packages/@react-spectrum/picker/src/Picker.tsx @@ -39,7 +39,6 @@ import React, {ReactElement, useCallback, useRef, useState} from 'react'; import {SpectrumPickerProps} from '@react-types/select'; import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css'; import {Text} from '@react-spectrum/text'; -import {useFormProps} from '@react-spectrum/form'; import {useMessageFormatter} from '@react-aria/i18n'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; import {useSelectState} from '@react-stately/select'; @@ -47,7 +46,6 @@ import {useSelectState} from '@react-stately/select'; function Picker(props: SpectrumPickerProps, ref: DOMRef) { props = useSlotProps(props, 'picker'); props = useProviderProps(props); - props = useFormProps(props); let formatMessage = useMessageFormatter(intlMessages); let { isDisabled, diff --git a/packages/@react-spectrum/searchwithin/package.json b/packages/@react-spectrum/searchwithin/package.json index 72ef7d62720..e5685ef5ffb 100644 --- a/packages/@react-spectrum/searchwithin/package.json +++ b/packages/@react-spectrum/searchwithin/package.json @@ -35,7 +35,6 @@ "@react-aria/label": "^3.1.3", "@react-aria/utils": "^3.8.2", "@react-spectrum/label": "^3.3.4", - "@react-spectrum/form": "^3.2.3", "@react-spectrum/utils": "^3.6.2", "@react-types/searchwithin": "3.0.0-alpha.0", "@react-types/shared": "^3.8.0" diff --git a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx index b02938eaada..30641ffca93 100644 --- a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx +++ b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx @@ -16,13 +16,11 @@ import {FocusableRef} from '@react-types/shared'; import React, {useCallback, useLayoutEffect, useRef, useState} from 'react'; import {SpectrumSearchWithinProps} from '@react-types/searchwithin'; import styles from '@adobe/spectrum-css-temp/components/searchwithin/vars.css'; -import {useFormProps} from '@react-spectrum/form'; import {useLabel} from '@react-aria/label'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef) { props = useProviderProps(props); - props = useFormProps(props); let {styleProps} = useStyleProps(props); let {labelProps, fieldProps} = useLabel(props); let { diff --git a/packages/@react-spectrum/textfield/package.json b/packages/@react-spectrum/textfield/package.json index ddf5e6e651a..8ee819a441b 100644 --- a/packages/@react-spectrum/textfield/package.json +++ b/packages/@react-spectrum/textfield/package.json @@ -37,7 +37,6 @@ "@react-aria/interactions": "^3.6.0", "@react-aria/textfield": "^3.4.0", "@react-aria/utils": "^3.9.0", - "@react-spectrum/form": "^3.2.3", "@react-spectrum/label": "^3.4.0", "@react-spectrum/utils": "^3.6.2", "@react-stately/utils": "^3.2.2", diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx index 8c0fbc7504e..ee48ec50349 100644 --- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx +++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx @@ -20,9 +20,7 @@ import {PressEvents} from '@react-types/shared'; import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react'; import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield'; import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; -import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; -import {useProviderProps} from '@react-spectrum/provider'; interface TextFieldBaseProps extends Omit, PressEvents { wrapperChildren?: ReactElement | ReactElement[], @@ -39,8 +37,6 @@ interface TextFieldBaseProps extends Omit, P } function TextFieldBase(props: TextFieldBaseProps, ref: Ref) { - props = useProviderProps(props); - props = useFormProps(props); let { label, validationState,