feat: Added 'maxCharacters' prop to TextField

src/molecules/TextField/TextField.docs.mdx

@@ -131,3 +131,7 @@ Compact `TextField` uses `EdsProvider`
 Here is one way to do it using `pattern` and `onChange`
 
 <Canvas of={ComponentStories.Validation} />
+
+### Max characters
+
+<Canvas of={ComponentStories.MaxCharacterCount} />

src/molecules/TextField/TextField.jsdom.test.tsx

@@ -31,3 +31,9 @@ test('Disabled text styling overrides variant', () => {
 
   expect(boxShadow).not.toBe(`inset 0 -2px 0 0 ${VARIANT_COLORS.dirty}`);
 });
+
+test('Throws error when providing maxCharacters and type number', () => {
+  expect(() =>
+    render(<TextField id="text" type="number" maxCharacters={10} />)
+  ).toThrowError();
+});

src/molecules/TextField/TextField.stories.tsx

@@ -10,12 +10,15 @@ import {
   thumbs_up,
   warning_filled,
 } from '@equinor/eds-icons';
-import { Meta, StoryFn } from '@storybook/react-vite';
+import { faker } from '@faker-js/faker';
+import { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 
-import { TextField } from 'src/molecules/TextField/TextField';
+import { TextField, TextFieldProps } from 'src/molecules/TextField/TextField';
 import page from 'src/molecules/TextField/TextField.docs.mdx';
 import { Stack } from 'src/storybook';
 
+import { expect, userEvent } from 'storybook/test';
+
 const icons = {
   thumbs_up,
   warning_filled,
@@ -49,6 +52,9 @@ const meta: Meta<typeof TextField> = {
       control: 'radio',
       options: ['error', 'warning', 'success', 'dirty', undefined],
     },
+    maxCharacters: {
+      control: 'number',
+    },
     inputIcon: {
       options: ['error', 'warning', 'success'],
       mapping: {
@@ -91,6 +97,8 @@ export default meta;
 
 type Story = StoryFn<typeof TextField>;
 
+type StoryObject = StoryObj<typeof TextField>;
+
 export const Introduction: Story = (args) => {
   return <TextField placeholder="Placeholder" {...args} />;
 };
@@ -636,3 +644,120 @@ export const Validation: Story = () => {
     </form>
   );
 };
+
+function MaxCharactersComponent(args: TextFieldProps) {
+  const [internalValue, setInternalValue] = useState<string>('');
+
+  const handleOnChange = (
+    event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setInternalValue(event.target.value);
+  };
+
+  return (
+    <TextField
+      {...args}
+      value={internalValue}
+      onChange={handleOnChange}
+      variant={
+        internalValue.length > (args.maxCharacters ?? Infinity)
+          ? 'error'
+          : undefined
+      }
+    />
+  );
+}
+
+export const MaxCharacterCount: StoryObject = {
+  args: {
+    placeholder: 'Enter product name',
+    label: 'Product Name',
+    helperText: "Start by adding the product's name.",
+    maxCharacters: 10,
+  },
+  render: MaxCharactersComponent,
+  play: async ({ canvas, args }) => {
+    await expect(
+      canvas.getByText(`0 / ${args.maxCharacters}`)
+    ).toBeInTheDocument();
+    const input = canvas.getByLabelText(`${args.label}`) as HTMLInputElement;
+    const value = faker.airline.airport().name;
+    await userEvent.type(input, value);
+    await expect(
+      canvas.getByText(`${value.length} / ${args.maxCharacters}`)
+    ).toBeInTheDocument();
+  },
+};
+
+export const MaxCharacterCountWithoutHelper: StoryObject = {
+  tags: ['test-only'],
+  args: {
+    placeholder: 'Enter product name',
+    label: 'Product Name',
+    maxCharacters: 10,
+    variant: 'error',
+  },
+  play: async ({ canvas, args }) => {
+    await expect(
+      canvas.getByText(`0 / ${args.maxCharacters}`)
+    ).toBeInTheDocument();
+    const input = canvas.getByLabelText(`${args.label}`) as HTMLInputElement;
+    const value = faker.airline.airport().name;
+    await userEvent.type(input, value);
+    await expect(
+      canvas.getByText(`${value.length} / ${args.maxCharacters}`)
+    ).toBeInTheDocument();
+  },
+};
+
+function TestComponent(args: TextFieldProps) {
+  const [internalValue, setInternalValue] = useState<string>('');
+
+  const handleOnChange = (
+    event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setInternalValue(event.target.value);
+  };
+
+  return (
+    <>
+      <TextField
+        {...args}
+        value={internalValue}
+        onChange={handleOnChange}
+        variant={
+          internalValue.length > (args.maxCharacters ?? Infinity)
+            ? 'error'
+            : undefined
+        }
+      />
+      <button onClick={() => setInternalValue('something')}>external</button>
+    </>
+  );
+}
+
+export const MaxCharacterCountExternalUpdate: StoryObject = {
+  tags: ['test-only'],
+  args: {
+    placeholder: 'Enter product name',
+    label: 'Product Name',
+    helperText: "Start by adding the product's name.",
+    value: 'heihei',
+    maxCharacters: 20,
+  },
+  render: TestComponent,
+  play: async ({ canvas, args }) => {
+    await expect(
+      canvas.getByText(`0 / ${args.maxCharacters}`)
+    ).toBeInTheDocument();
+    const newValue = faker.airline.airport().name;
+    await userEvent.type(canvas.getByRole('textbox'), newValue);
+    await expect(
+      canvas.getByText(`${newValue.length} / ${args.maxCharacters}`)
+    ).toBeInTheDocument();
+    await userEvent.click(canvas.getByText('external'));
+    await expect(
+      canvas.getByText(`${'something'.length} / ${args.maxCharacters}`)
+    ).toBeInTheDocument();
+  },
+};

src/molecules/TextField/TextField.tsx

@@ -1,8 +1,18 @@
-import { FC, InputHTMLAttributes, TextareaHTMLAttributes, useRef } from 'react';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  FC,
+  InputHTMLAttributes,
+  TextareaHTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   TextField as Base,
   TextFieldProps as BaseProps,
+  Typography,
 } from '@equinor/eds-core-react';
 
 import { shape, spacings } from 'src/atoms/style';
@@ -17,13 +27,15 @@ import styled, { css } from 'styled-components';
 export type TextFieldProps = Omit<BaseProps, 'variant'> & {
   variant?: Variants;
   loading?: boolean;
+  maxCharacters?: number;
 } & (
     | TextareaHTMLAttributes<HTMLTextAreaElement>
     | InputHTMLAttributes<HTMLInputElement>
   );
 
 interface WrapperProps {
   $variant: TextFieldProps['variant'];
+  $helperRightWidth: number;
   $disabled?: boolean;
 }
 
@@ -51,6 +63,13 @@ const Wrapper = styled.div<WrapperProps>`
     outline: none !important;
   }
 
+  div[class*='HelperText'] {
+    margin-right: ${({ $helperRightWidth }) =>
+      $helperRightWidth
+        ? `calc(${$helperRightWidth}px + ${spacings.medium})`
+        : 0};
+  }
+
   ${({ $variant, $disabled }) => {
     if ($disabled) {
       return css`
@@ -115,7 +134,21 @@ const Loader = styled(SkeletonBase)`
   transform: translateY(${spacings.x_small});
 `;
 
+const MaxCharactersText = styled(Typography)`
+  position: absolute;
+  right: ${spacings.small};
+`;
+
+/**
+ * @param loading - Show loading skeleton on top of the text field.
+ * @param maxCharacters - Maximum number of characters allowed in the text field. Does not enforce the limit, only for display purposes.
+ */
 export const TextField: FC<TextFieldProps> = (props) => {
+  if (props.maxCharacters && 'type' in props && props.type !== 'text') {
+    throw new Error(
+      '`maxCharacters` prop is not supported for input types other than "text".'
+    );
+  }
   const baseProps: BaseProps = {
     ...props,
     variant: props.variant !== 'dirty' ? props.variant : undefined,
@@ -125,13 +158,50 @@ export const TextField: FC<TextFieldProps> = (props) => {
   const skeletonTop = getSkeletonTop(props);
   const skeletonHeight = getSkeletonHeight(props);
   const skeletonWidth = useRef(`${Math.max(20, Math.random() * 80)}%`);
+  const [characterCount, setCharacterCount] = useState<number>(
+    typeof props.value === 'string' ? props.value.length : 0
+  );
+  const [helperRightWidth, setHelperRightWidth] = useState(0);
+
+  const handleRenderHelperTextRight = (element: HTMLDivElement | null) => {
+    if (element) {
+      const width = element.getBoundingClientRect().width;
+      setHelperRightWidth(width);
+    }
+  };
+
+  // Since both textarea and input have event.target.value , we can safely cast here
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (props.onChange) {
+      (props.onChange as ChangeEventHandler<HTMLInputElement>)(event);
+    }
+
+    if (props.maxCharacters) {
+      setCharacterCount(event.target.value.length);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      typeof props.value === 'string' &&
+      props.maxCharacters &&
+      props.value.length !== characterCount
+    ) {
+      setCharacterCount(props.value.length);
+    }
+  }, [characterCount, props.maxCharacters, props.value]);
 
   return (
     <Wrapper
       $variant={usingVariant}
       $disabled={props.loading ? false : props.disabled}
+      $helperRightWidth={helperRightWidth}
     >
-      <Base {...baseProps} disabled={props.loading || props.disabled} />
+      <Base
+        {...baseProps}
+        disabled={props.loading || props.disabled}
+        onChange={handleOnChange as never} // Bypass TS error caused by union of input and textarea attributes
+      />
       {props.loading && (
         <Loader
           className="skeleton"
@@ -143,6 +213,25 @@ export const TextField: FC<TextFieldProps> = (props) => {
           }}
         />
       )}
+      {props.maxCharacters && (
+        <MaxCharactersText
+          ref={handleRenderHelperTextRight}
+          variant="helper"
+          group="input"
+          color={
+            baseProps.variant
+              ? VARIANT_COLORS[baseProps.variant]
+              : colors.text.static_icons__tertiary.rgba
+          }
+          style={{
+            bottom: props.helperText
+              ? '0'
+              : `calc((${spacings.small} + 1rem) * -1)`,
+          }}
+        >
+          {characterCount} / {props.maxCharacters}
+        </MaxCharactersText>
+      )}
     </Wrapper>
   );
 };