diff --git a/packages/css/textfield.css b/packages/css/textfield.css index e3f2943b71..b73d2542a5 100644 --- a/packages/css/textfield.css +++ b/packages/css/textfield.css @@ -52,39 +52,39 @@ border-bottom-right-radius: var(--fds-border_radius-medium); } - .fds-textfield--small .fds-textfield__adornment { + .fds-textfield--sm .fds-textfield__adornment { padding: var(--fds-sizing-2) var(--fds-spacing-3); } - .fds-textfield--medium .fds-textfield__adornment { + .fds-textfield--md .fds-textfield__adornment { padding: 0.65rem var(--fds-spacing-4); } - .fds-textfield--large .fds-textfield__adornment { + .fds-textfield--lg .fds-textfield__adornment { padding: 0.85rem var(--fds-spacing-5); } - .fds-textfield--small .fds-textfield__field { + .fds-textfield--sm .fds-textfield__field { height: var(--fds-sizing-10); } - .fds-textfield--medium .fds-textfield__field { + .fds-textfield--md .fds-textfield__field { height: var(--fds-sizing-12); } - .fds-textfield--large .fds-textfield__field { + .fds-textfield--lg .fds-textfield__field { height: var(--fds-sizing-14); } - .fds-textfield--small .fds-textfield__input { + .fds-textfield--sm .fds-textfield__input { padding: 0 var(--fds-spacing-2); } - .fds-textfield--medium .fds-textfield__input { + .fds-textfield--md .fds-textfield__input { padding: 0 var(--fds-spacing-3); } - .fds-textfield--large .fds-textfield__input { + .fds-textfield--lg .fds-textfield__input { padding: 0 var(--fds-spacing-4); } diff --git a/packages/react/src/components/form/CharacterCounter.tsx b/packages/react/src/components/form/CharacterCounter.tsx index 13338efce0..70f86d6ae0 100644 --- a/packages/react/src/components/form/CharacterCounter.tsx +++ b/packages/react/src/components/form/CharacterCounter.tsx @@ -1,5 +1,7 @@ import { ErrorMessage } from '../Typography'; +import type { TextfieldProps } from './Textfield'; + export type CharacterLimitProps = Omit< CharacterCounterProps, 'id' | 'value' | 'size' @@ -17,7 +19,7 @@ type CharacterCounterProps = { /** The ID of the element that describes the maximum character limit for accessibility purposes. */ id: string; /** Text size */ - size?: 'small' | 'medium' | 'large'; + size?: TextfieldProps['size']; }; const defaultLabel: CharacterCounterProps['label'] = (count) => diff --git a/packages/react/src/components/form/Textfield/Textfield.stories.tsx b/packages/react/src/components/form/Textfield/Textfield.stories.tsx index 55eb9f3008..89c2b6dc68 100644 --- a/packages/react/src/components/form/Textfield/Textfield.stories.tsx +++ b/packages/react/src/components/form/Textfield/Textfield.stories.tsx @@ -17,7 +17,7 @@ export const Preview: Story = { label: 'Label', disabled: false, readOnly: false, - size: 'medium', + size: 'md', description: '', error: '', }, @@ -53,17 +53,17 @@ export const Adornments: StoryFn = () => ( ); diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx index d50ab94a32..09138d420b 100644 --- a/packages/react/src/components/form/Textfield/Textfield.tsx +++ b/packages/react/src/components/form/Textfield/Textfield.tsx @@ -11,13 +11,19 @@ import { CharacterCounter } from '../CharacterCounter'; import { useTextfield } from './useTextfield'; +type OldTextfieldSizes = 'small' | 'medium' | 'large'; + export type TextfieldProps = { /** Label */ label?: ReactNode; /** Visually hides `label` and `description` (still available for screen readers) */ hideLabel?: boolean; - /** Changes field size and paddings */ - size?: 'small' | 'medium' | 'large'; + /** + * Changes field size and paddings + * @default md + * @note `small`, `medium`, `large` is deprecated + */ + size?: 'sm' | 'md' | 'lg' | OldTextfieldSizes; /** Prefix for field. */ prefix?: string; /** Suffix for field. */ @@ -82,7 +88,7 @@ export const Textfield = forwardRef( descriptionId, hasError, errorId, - size = 'medium', + size = 'md', readOnly, } = useTextfield(props); diff --git a/packages/react/src/components/form/Textfield/useTextfield.ts b/packages/react/src/components/form/Textfield/useTextfield.ts index bf562a12c4..1bd4ddd005 100644 --- a/packages/react/src/components/form/Textfield/useTextfield.ts +++ b/packages/react/src/components/form/Textfield/useTextfield.ts @@ -4,6 +4,7 @@ import { useContext } from 'react'; import type { FormField } from '../useFormField'; import { useFormField } from '../useFormField'; import { FieldsetContext } from '../Fieldset/FieldsetContext'; +import { getSize } from '../../../utilities/getSize'; import type { TextfieldProps } from './Textfield'; @@ -18,10 +19,14 @@ export const useTextfield: UseTextfield = (props) => { const fieldset = useContext(FieldsetContext); const { inputProps, readOnly, ...rest } = useFormField(props, 'textfield'); + const size = getSize(fieldset?.size ?? props.size ?? 'md') as NonNullable< + TextfieldProps['size'] + >; + return { ...rest, readOnly, - size: fieldset?.size ?? props.size, + size, inputProps: { ...inputProps, readOnly, diff --git a/packages/react/src/components/form/useFormField.ts b/packages/react/src/components/form/useFormField.ts index 22e0f37930..f2170d6eb1 100644 --- a/packages/react/src/components/form/useFormField.ts +++ b/packages/react/src/components/form/useFormField.ts @@ -2,8 +2,12 @@ import { useContext, useId } from 'react'; import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react'; import cl from 'clsx'; +import { getSize } from '../../utilities/getSize'; + import { FieldsetContext } from './Fieldset/FieldsetContext'; +type OldFormFielSize = 'small' | 'medium' | 'large'; + export type FormFieldProps = { /** Error message for form field */ error?: ReactNode; @@ -19,8 +23,12 @@ export type FormFieldProps = { id?: string; /** Toggle `readOnly` */ readOnly?: boolean; - /** Changes field size and paddings */ - size?: 'small' | 'medium' | 'large'; + /** + * Changes field size and paddings + * @default md + * @note `small`, `medium`, `large` is deprecated + */ + size?: 'sm' | 'md' | 'lg' | OldFormFielSize; } & Pick, 'aria-describedby'>; export type FormField = { @@ -56,12 +64,16 @@ export const useFormField = ( const hasError = !disabled && !readOnly && !!(props.error || fieldset?.error); + const size = getSize(props.size || fieldset?.size || 'md') as NonNullable< + FormFieldProps['size'] + >; + return { readOnly, hasError, errorId, descriptionId, - size: props?.size ?? fieldset?.size ?? 'medium', + size, inputProps: { id, disabled,