diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx index 8e0fdfda1e6..c31f30f76e0 100644 --- a/.storybook-s2/docs/Migrating.jsx +++ b/.storybook-s2/docs/Migrating.jsx @@ -209,7 +209,6 @@ export function Migrating() {
  • Remove isQuiet (it is no longer supported in Spectrum 2)
  • Change validationState="invalid" to isInvalid
  • Remove validationState="valid" (it is no longer supported in Spectrum 2)
    • -
  • [PENDING] Comment out hideStepper (it has not been implemented yet)

    • Picker

    diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx index 66a90cf79ac..c01fb7cd0ef 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -21,8 +21,7 @@ import { Text, useContextProps } from 'react-aria-components'; -import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'}; -import ChevronIcon from '../ui-icons/Chevron'; +import {baseColor, size, style} from '../style/spectrum-theme' with {type: 'macro'}; import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react'; import {createFocusableRef} from '@react-spectrum/utils'; import Dash from '../ui-icons/Dash'; @@ -38,23 +37,21 @@ import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface NumberFieldProps extends - AriaNumberFieldProps, + Omit, StyleProps, SpectrumLabelableProps, HelpTextProps { /** - * Whether the NumberField step buttons should be collapsed into a single column. - * - * @default "false" + * Whether to hide the increment and decrement buttons. + * @default false */ - isCollapsed?: boolean, + hideStepper?: boolean, /** * The size of the NumberField. * * @default "M" */ - size?: 'S' | 'M' | 'L' | 'XL', - label?: ReactNode + size?: 'S' | 'M' | 'L' | 'XL' } export const NumberFieldContext = createContext>(null); @@ -94,52 +91,22 @@ const inputButton = style({ justifyContent: 'center', width: { size: { - S: { - default: 16, - isCollapsed: 24 - }, - M: { - default: 20, - isCollapsed: 24 - }, - L: { - default: 24, - isCollapsed: 32 - }, - XL: { - default: 32, - isCollapsed: 40 - } - } - }, - height: { - default: 'auto', - isCollapsed: { - size: { - S: 8, - M: 12, - L: 16, - XL: 20 - } + S: 16, + M: 20, + L: 24, + XL: 32 } }, + height: 'auto', marginStart: { default: 'text-to-control', type: { increment: 0 } }, - aspectRatio: { - default: 'square', - isCollapsed: 'auto' - }, - flexShrink: { - default: 0, - isCollapsed: 1 - }, - minHeight: { - isCollapsed: 0 - }, + aspectRatio: 'square', + flexShrink: 0, + minHeight: 0, transition: { default: 'default', forcedColors: 'none' @@ -179,51 +146,25 @@ const iconStyles = style({ const stepperContainerStyles = style({ display: 'flex', - flexDirection: { - default: 'row', - isCollapsed: 'column-reverse' - }, + flexDirection: 'row', gap: { - default: { - size: { - S: 8, - M: 4, - L: 8, - XL: 8 - } - }, - isCollapsed: '[2px]' - }, - maxHeight: { - isCollapsed: { - size: { - S: 16, - M: 24, - L: 32, - XL: 40 // 40 - } + size: { + S: 8, + M: 4, + L: 8, + XL: 8 } }, paddingEnd: { - default: { - size: { - S: '[2px]', - M: '[4px]', - L: '[6px]', - XL: '[6px]' - } - }, - isCollapsed: '[2px]' + size: { + S: size(2), + M: 4, + L: size(6), + XL: size(6) + } } }); -const chevronSize = { - S: 'XS', - M: 'S', - L: 'L', - XL: 'XL' -} as const; - function NumberField(props: NumberFieldProps, ref: Ref) { [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext); let { @@ -231,7 +172,7 @@ function NumberField(props: NumberFieldProps, ref: Ref) { contextualHelp, description: descriptionMessage, errorMessage, - isCollapsed, + hideStepper, isRequired, size = 'M', labelPosition = 'top', @@ -293,9 +234,11 @@ function NumberField(props: NumberFieldProps, ref: Ref) { styles={style({ ...fieldInput(), paddingStart: 'edge-to-text', - paddingEnd: 0, - cursor: 'default' - })({size})}> + paddingEnd: { + default: 0, + isStepperHidden: 'edge-to-text' + } + })({size, isStepperHidden: hideStepper})}> {ctx => ( @@ -304,22 +247,17 @@ function NumberField(props: NumberFieldProps, ref: Ref) { )} {isInvalid && } -
    + {!hideStepper &&
    pressScale(decrementButtonRef)(renderProps)} className={renderProps => inputButton({ ...renderProps, - type: isCollapsed ? 'decrementStep' : 'decrement', - isCollapsed, + type: 'decrement', size })}> - { - isCollapsed - ? - : - } + ) { style={renderProps => pressScale(incrementButtonRef)(renderProps)} className={renderProps => inputButton({ ...renderProps, - type: isCollapsed ? 'incrementStep' : 'increment', - isCollapsed, + type: 'increment', size })}> - { - isCollapsed - ? - : - } + -
    +
    } {descriptionMessage && {descriptionMessage}} ( - - ) -}; - export const Validation = (args: any) => (
    diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap index 682d470e152..490535760c1 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap @@ -4,10 +4,8 @@ exports[`Comments out hideStepper 1`] = ` "import { NumberField } from "@react-spectrum/s2";
    - // TODO(S2-upgrade): hideStepper has not been implemented yet. - - // TODO(S2-upgrade): hideStepper has not been implemented yet. - + +
    " `; diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts index f4cc810b1c8..59404b136e9 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts @@ -666,14 +666,6 @@ export const changes: ChangesJSON = { name: 'removeProp', args: {propToRemove: 'validationState', propValue: 'valid'} } - }, - { - description: 'Comment out hideStepper', - reason: 'It has not been implemented yet', - function: { - name: 'commentOutProp', - args: {propToComment: 'hideStepper'} - } } ] },