@codecademy/styleguide 79.3.0 → 79.3.1-alpha.b86be7.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [79.3.1-alpha.b86be7.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.3.0...@codecademy/styleguide@79.3.1-alpha.b86be7.0) (2026-03-26)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ## [79.3.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.4...@codecademy/styleguide@79.3.0) (2026-03-25)
 
 ### Features

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.3.0",
+  "version": "79.3.1-alpha.b86be7.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "502f9c61b71cb0479cbe5ff3bcd7301041a3c3bd"
+  "gitHead": "aa78e52978cd3015734650b0fca3848081cbd742"
 }

package/src/lib/Atoms/FormInputs/TextArea/TextArea.mdx

@@ -23,6 +23,8 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
+<Canvas sourceState="shown" of={TextAreaStories.AutoGrow} />
+
 ## Usage
 
 Use TextArea to handle long form text entry within forms.
@@ -31,7 +33,6 @@ Use TextArea to handle long form text entry within forms.
 
 ### Disabled
 
-<Canvas of={TextAreaStories.Disabled} />
 
 ### Error
 

package/src/lib/Atoms/FormInputs/TextArea/TextArea.stories.tsx

@@ -1,5 +1,66 @@
-import { TextArea } from '@codecademy/gamut';
+import { Box, TextArea } from '@codecademy/gamut';
+import { css } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+/**
+ * `field-sizing: content` lets the textarea grow with its value in Chromium and Safari.
+ * Firefox does not support it yet; we mirror that behavior by syncing height to scrollHeight.
+ *
+ * Note: A single-line `<input>` cannot expand vertically—use `<textarea>` for multi-line text.
+ */
+const fieldSizingContentSupported =
+  typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
+
+const AutoGrowTextAreaBase = styled(TextArea)(
+  css({
+    resize: 'none',
+    overflow: 'hidden',
+    // Static CSS — not a Gamut system prop; merged by variance `css()` as passthrough.
+    fieldSizing: 'content',
+  })
+);
+
+const AutoGrowTextArea = (props: ComponentProps<typeof TextArea>) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const { onChange, value, ...rest } = props;
+
+  const syncHeight = useCallback(() => {
+    if (fieldSizingContentSupported) return;
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  useLayoutEffect(() => {
+    syncHeight();
+  }, [syncHeight, value]);
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange?.(event);
+    requestAnimationFrame(syncHeight);
+  };
+
+  return (
+    <Box height="1000px">
+      <AutoGrowTextAreaBase
+        {...rest}
+        ref={ref}
+        rows={rest.rows ?? 1}
+        {...(value !== undefined ? { value } : {})}
+        onChange={handleChange}
+      />
+    </Box>
+  );
+};
 
 const meta: Meta<typeof TextArea> = {
   component: TextArea,
@@ -38,3 +99,15 @@ export const Placeholder: Story = {
     defaultValue: undefined,
   },
 };
+
+export const AutoGrow: Story = {
+  args: {
+    htmlFor: 'example-autogrow',
+    name: 'example-autogrow',
+    placeholder: 'Type multiple lines — the field grows vertically',
+    defaultValue:
+      'Line one\nLine two\nLine three\n\nFirefox uses scrollHeight; Chromium/Safari use field-sizing: content.',
+    rows: 1,
+  },
+  render: (args) => <AutoGrowTextArea {...args} />,
+};