feat(Textfield): add shorthand sizes (#2018)

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);
   }
 

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) =>

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<typeof Textfield> = () => (
     <Textfield
       prefix='prefix'
       suffix='suffix'
-      size='small'
+      size='sm'
     />
     <Textfield
       prefix='prefix'
       suffix='suffix'
-      size='medium'
+      size='md'
     />
     <Textfield
       prefix='prefix'
       suffix='suffix'
-      size='large'
+      size='lg'
     />
   </div>
 );

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<HTMLInputElement, TextfieldProps>(
       descriptionId,
       hasError,
       errorId,
-      size = 'medium',
+      size = 'md',
       readOnly,
     } = useTextfield(props);
 

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,

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<HTMLAttributes<HTMLElement>, '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,