From 0d525b64b5f85f375c5477ee78a7287ff9b264f4 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Fri, 17 Sep 2021 15:10:48 -0700 Subject: [PATCH 1/2] fixing combobox to use useFormProps and related component refactors --- packages/@react-spectrum/label/package.json | 1 + packages/@react-spectrum/label/src/Field.tsx | 2 ++ packages/@react-spectrum/numberfield/package.json | 1 - packages/@react-spectrum/numberfield/src/NumberField.tsx | 2 -- packages/@react-spectrum/picker/package.json | 1 - packages/@react-spectrum/picker/src/Picker.tsx | 2 -- packages/@react-spectrum/searchwithin/package.json | 1 - packages/@react-spectrum/searchwithin/src/SearchWithin.tsx | 3 --- packages/@react-spectrum/textfield/package.json | 1 - packages/@react-spectrum/textfield/src/TextFieldBase.tsx | 4 ---- 10 files changed, 3 insertions(+), 15 deletions(-) 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 b0d758281d0..9d2b19998b9 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 670c5e06b55..e011496fc4b 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.2", "@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 7a19a6dfe84..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 { @@ -103,4 +101,3 @@ function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef, 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, From f0cda1cfd722fd7855efb09080a4a2cc8e0670a7 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Thu, 23 Sep 2021 16:50:56 -0700 Subject: [PATCH 2/2] adding props to make sure mobile combobox tray behaves correctly --- packages/@react-spectrum/combobox/src/MobileComboBox.tsx | 2 ++ 1 file changed, 2 insertions(+) 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(