@astryxdesign/core 0.3.0 → 0.4.0

package/src/TextArea/TextArea.test.tsx

@@ -673,6 +673,132 @@ describe('TextArea', () => {
     });
   });
 
+  describe('form participation', () => {
+    it('submits the value under htmlName', () => {
+      const {container} = render(
+        <form>
+          <TextArea
+            label="Notes"
+            htmlName="notes"
+            value="hello"
+            onChange={() => {}}
+          />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.get('notes')).toBe('hello');
+    });
+
+    it('is excluded from form data when disabled', () => {
+      const {container} = render(
+        <form>
+          <TextArea
+            label="Notes"
+            htmlName="notes"
+            value="hello"
+            onChange={() => {}}
+            isDisabled
+          />
+        </form>,
+      );
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+
+    // Regression: a disabledMessage swaps the native `disabled` attribute for
+    // aria-disabled + readOnly so the reason stays focus-discoverable, but
+    // read-only fields still submit — the name has to be withheld too.
+    it('is excluded from form data when disabled, even with a disabledMessage', () => {
+      const {container} = render(
+        <form>
+          <TextArea
+            label="Notes"
+            htmlName="notes"
+            value="hello"
+            onChange={() => {}}
+            isDisabled
+            disabledMessage="Notes are locked while the review is open"
+          />
+        </form>,
+      );
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+  });
+
+  describe('isReadOnly', () => {
+    it('marks the textarea read-only', () => {
+      render(
+        <TextArea label="Notes" value="hello" onChange={() => {}} isReadOnly />,
+      );
+      expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+    });
+
+    it('still submits its value with the form', () => {
+      const {container} = render(
+        <form>
+          <TextArea
+            label="Notes"
+            htmlName="notes"
+            value="hello"
+            onChange={() => {}}
+            isReadOnly
+          />
+        </form>,
+      );
+      expect(new FormData(container.querySelector('form')!).get('notes')).toBe(
+        'hello',
+      );
+    });
+
+    it('does not call onChange when the user types', async () => {
+      const user = userEvent.setup();
+      const handleChange = vi.fn();
+      render(
+        <TextArea
+          label="Notes"
+          value="hello"
+          onChange={handleChange}
+          isReadOnly
+        />,
+      );
+      await user.type(screen.getByRole('textbox'), 'xyz');
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('stays focusable and is not disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <TextArea label="Notes" value="hello" onChange={() => {}} isReadOnly />,
+      );
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).not.toBeDisabled();
+      await user.tab();
+      expect(textarea).toHaveFocus();
+    });
+
+    it('lets isDisabled win when both are set', () => {
+      const {container} = render(
+        <form>
+          <TextArea
+            label="Notes"
+            htmlName="notes"
+            value="hello"
+            onChange={() => {}}
+            isReadOnly
+            isDisabled
+          />
+        </form>,
+      );
+      expect(screen.getByRole('textbox')).toBeDisabled();
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+  });
+
   describe('click-to-focus', () => {
     it('focuses textarea when clicking the start icon', () => {
       render(
@@ -863,4 +989,97 @@ describe('TextArea statusVariant forwarding', () => {
       'detached',
     );
   });
+
+  it('reserves trailing space for the on-field icon with the default (attached) status', () => {
+    // Attached renders the on-field status icon, so the textarea must inset its
+    // trailing edge to clear it.
+    render(
+      <TextArea
+        label="Bio"
+        value=""
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+      />,
+    );
+    // The on-field status glyph renders (in the end slot).
+    expect(document.querySelector('.astryx-input-status-icon')).not.toBeNull();
+  });
+
+  it('does not render an on-field icon for statusVariant="detached", and does not reserve trailing space for it', () => {
+    // The detached variant suppresses the on-field icon (its glyph lives in the
+    // message box below), so the textarea must NOT inset its trailing edge —
+    // otherwise the text is pushed in for an icon that never appears.
+    const attached = render(
+      <TextArea
+        label="Bio"
+        value=""
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="attached"
+      />,
+    );
+    const attachedTextarea = attached.getByRole('textbox');
+    const attachedClasses = new Set(attachedTextarea.className.split(/\s+/));
+    attached.unmount();
+
+    const detached = render(
+      <TextArea
+        label="Bio"
+        value=""
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
+    );
+    // No on-field icon is rendered for detached.
+    expect(document.querySelector('.astryx-input-status-icon')).toBeNull();
+
+    const detachedTextarea = detached.getByRole('textbox');
+    const detachedClasses = new Set(detachedTextarea.className.split(/\s+/));
+
+    // The attached textarea carries exactly one extra StyleX class over the
+    // detached one: the trailing-reserve style. Detached must not carry it, so
+    // its class set is a strict subset of attached's.
+    for (const cls of detachedClasses) {
+      expect(attachedClasses.has(cls)).toBe(true);
+    }
+    expect(detachedClasses.size).toBeLessThan(attachedClasses.size);
+  });
+});
+
+describe('TextArea disabled theme state', () => {
+  it('reflects disabled on the root target so themes can gate paint on it', () => {
+    const {container} = render(
+      <TextArea label="Description" value="" onChange={() => {}} isDisabled />,
+    );
+    const root = container.querySelector('.astryx-textarea');
+    expect(root).toHaveAttribute('data-disabled', 'disabled');
+    expect(root).toHaveClass('disabled');
+  });
+
+  it('omits data-disabled when enabled, like status does', () => {
+    const {container} = render(
+      <TextArea label="Description" value="" onChange={() => {}} />,
+    );
+    const root = container.querySelector('.astryx-textarea');
+    expect(root).not.toHaveAttribute('data-disabled');
+  });
+});
+
+describe('TextArea readonly theme state', () => {
+  it('reflects readonly on the root target so themes can gate paint on it', () => {
+    const {container} = render(
+      <TextArea label="Notes" value="" onChange={() => {}} isReadOnly />,
+    );
+    const root = container.querySelector('.astryx-textarea');
+    expect(root).toHaveAttribute('data-readonly', 'readonly');
+  });
+
+  it('omits data-readonly when editable', () => {
+    const {container} = render(
+      <TextArea label="Notes" value="" onChange={() => {}} />,
+    );
+    const root = container.querySelector('.astryx-textarea');
+    expect(root).not.toHaveAttribute('data-readonly');
+  });
 });

package/src/TextArea/TextArea.tsx

@@ -66,7 +66,14 @@ const styles = stylex.create({
   wrapper: {
     zIndex: 1,
     display: 'block',
-    padding: 0,
+    // Zero the shared wrapper inset with matching longhands, not the `padding`
+    // shorthand: StyleX ranks longhands above shorthands regardless of merge
+    // order, so a `padding: 0` shorthand loses to the base's
+    // paddingBlock/paddingInline. The wrapper would keep a duplicate inset that
+    // the <textarea>'s own padding then doubles — insetting the text and
+    // pushing the native resize grip in from the corner.
+    paddingBlock: 0,
+    paddingInline: 0,
     // Internal inline padding for the textarea's text. Defined on the wrapper
     // so the counter (a sibling overlay) inherits the same value and stays
     // aligned with the text edge. Kept as an internal var so it can later be
@@ -236,6 +243,15 @@ export interface TextAreaProps extends Omit<
    * @default false
    */
   isDisabled?: boolean;
+  /**
+   * Whether the textarea is read-only.
+   * The value is shown at full opacity and still submits with the form, but
+   * cannot be edited. Unlike `isDisabled`, a read-only textarea is not dimmed
+   * and stays in the tab order — use it for a value the user should see and
+   * send but not change. `isDisabled` takes precedence when both are set.
+   * @default false
+   */
+  isReadOnly?: boolean;
   /**
    * Explains why the textarea is disabled. When set together with
    * `isDisabled`, the textarea shows a tooltip with this text on hover and
@@ -350,6 +366,7 @@ export function TextArea({
   placeholder,
   rows = 3,
   isDisabled = false,
+  isReadOnly = false,
   disabledMessage,
   status,
   statusVariant = 'attached',
@@ -461,7 +478,7 @@ export function TextArea({
     // Value can't change while showing a disabled message (the field is
     // read-only and non-native-disabled), but guard the handler too so the
     // optimistic value and callbacks never fire.
-    if (isDisabled) {
+    if (isDisabled || isReadOnly) {
       return;
     }
     const newValue = e.target.value;
@@ -518,7 +535,12 @@ export function TextArea({
         onClick={handleWrapperClick}
         onMouseUp={handleWrapperMouseUp}
         {...mergeProps(
-          themeProps('textarea', {size, status: status?.type ?? null}),
+          themeProps('textarea', {
+            size,
+            status: status?.type ?? null,
+            disabled: isDisabled ? 'disabled' : null,
+            readonly: isReadOnly ? 'readonly' : null,
+          }),
           stylex.props(
             inputWrapperStyles.base,
             styles.wrapper,
@@ -540,7 +562,7 @@ export function TextArea({
           {...rest}
           ref={mergeRefs(ref, textareaRef)}
           id={id}
-          name={htmlName}
+          name={isDisabled ? undefined : htmlName}
           value={optimisticValue}
           onChange={handleChange}
           onPaste={onPaste}
@@ -553,7 +575,7 @@ export function TextArea({
           // handleChange guard keep the value from changing.
           disabled={isDisabled && !showsDisabledMessage}
           aria-disabled={showsDisabledMessage ? 'true' : undefined}
-          readOnly={showsDisabledMessage || undefined}
+          readOnly={isReadOnly || showsDisabledMessage || undefined}
           spellCheck={hasSpellCheck}
           autoFocus={hasAutoFocus}
           data-autofocus={hasAutoFocus || undefined}
@@ -571,8 +593,13 @@ export function TextArea({
             textareaSizeStyles[size],
             isDisabled && styles.textareaDisabled,
             Boolean(startIcon) && styles.textareaWithStartIcon,
-            (status || isBusy) && styles.textareaWithStatus,
-            isBusy && !!statusIcon && styles.textareaWithBusyStatus,
+            // Reserve trailing space only when the end slot actually renders
+            // something (spinner or on-field status icon). The `detached`
+            // status variant suppresses the on-field icon — its glyph lives in
+            // the message box below — so reserving here would inset the text
+            // for an icon that never appears.
+            (isBusy || statusIcon != null) && styles.textareaWithStatus,
+            isBusy && statusIcon != null && styles.textareaWithBusyStatus,
             maxLength != null && styles.textareaWithCounter,
           )}
         />

package/src/TextInput/TextInput.doc.mjs

@@ -78,6 +78,13 @@ export const docs = {
         'Disables the input, preventing interaction and dimming the element.',
       default: 'false',
     },
+    {
+      name: 'isReadOnly',
+      type: 'boolean',
+      description:
+        'Makes the input read-only: the value is shown at full opacity and still submits with the form, but cannot be edited. Unlike isDisabled, a read-only input is not dimmed and stays in the tab order. isDisabled takes precedence when both are set.',
+      default: 'false',
+    },
     {
       name: 'disabledMessage',
       type: 'string',
@@ -149,7 +156,7 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-text-input', visualProps: ['size', 'status']},
+      {className: 'astryx-text-input', visualProps: ['size', 'status'], states: ['disabled', 'readonly']},
     ],
   },
   usage: {
@@ -251,6 +258,13 @@ export const docsZh = {
         '禁用输入框，阻止交互并使元素变暗。',
       default: 'false',
     },
+    {
+      name: 'isReadOnly',
+      type: 'boolean',
+      description:
+        '将输入框设为只读：值以完整不透明度显示并仍随表单提交，但无法编辑。与 isDisabled 不同，只读输入框不会变暗，并保留在 Tab 顺序中。同时设置时 isDisabled 优先。',
+      default: 'false',
+    },
     {
       name: 'disabledMessage',
       type: 'string',
@@ -315,7 +329,7 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-text-input', visualProps: ['size', 'status']},
+      {className: 'astryx-text-input', visualProps: ['size', 'status'], states: ['disabled', 'readonly']},
     ],
   },
   usage: {
@@ -381,6 +395,8 @@ export const docsDense = {
     isOptional: 'Shows "Optional" indicator. Mutually exclusive w/ isRequired.',
     isRequired: 'Shows "Required" indicator+sets aria-required. Mutually exclusive w/ isOptional.',
     isDisabled: 'Disables input, prevents interaction, dims element.',
+    isReadOnly:
+      'Read-only: value visible + still submits, but not editable. Unlike isDisabled: not dimmed, stays in tab order.',
     disabledMessage:
       'Explains why input is disabled. With isDisabled, shows tooltip on hover/focus + keeps input focusable via aria-disabled (field becomes read-only). Use instead of wrapping a disabled TextInput in Tooltip.',
     isLoading: 'Loading state w/ spinner+aria-busy.',

package/src/TextInput/TextInput.test.tsx

@@ -371,6 +371,155 @@ describe('TextInput', () => {
     });
   });
 
+  describe('form participation', () => {
+    it('submits the value under htmlName', () => {
+      const {container} = render(
+        <form>
+          <TextInput
+            label="Owner"
+            htmlName="owner"
+            value="alice"
+            onChange={() => {}}
+          />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.get('owner')).toBe('alice');
+    });
+
+    it('is excluded from form data when disabled', () => {
+      const {container} = render(
+        <form>
+          <TextInput
+            label="Owner"
+            htmlName="owner"
+            value="alice"
+            onChange={() => {}}
+            isDisabled
+          />
+        </form>,
+      );
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+
+    // Regression: a disabledMessage swaps the native `disabled` attribute for
+    // aria-disabled + readOnly so the reason stays focus-discoverable, but
+    // read-only fields still submit — the name has to be withheld too.
+    it('is excluded from form data when disabled, even with a disabledMessage', () => {
+      const {container} = render(
+        <form>
+          <TextInput
+            label="Owner"
+            htmlName="owner"
+            value="alice"
+            onChange={() => {}}
+            isDisabled
+            disabledMessage="You need the Editor role to change this"
+          />
+        </form>,
+      );
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+  });
+
+  describe('isReadOnly', () => {
+    it('marks the input read-only', () => {
+      render(
+        <TextInput
+          label="Owner"
+          value="alice"
+          onChange={() => {}}
+          isReadOnly
+        />,
+      );
+      expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+    });
+
+    it('still submits its value with the form', () => {
+      const {container} = render(
+        <form>
+          <TextInput
+            label="Owner"
+            htmlName="owner"
+            value="alice"
+            onChange={() => {}}
+            isReadOnly
+          />
+        </form>,
+      );
+      expect(new FormData(container.querySelector('form')!).get('owner')).toBe(
+        'alice',
+      );
+    });
+
+    it('does not call onChange when the user types', async () => {
+      const user = userEvent.setup();
+      const handleChange = vi.fn();
+      render(
+        <TextInput
+          label="Owner"
+          value="alice"
+          onChange={handleChange}
+          isReadOnly
+        />,
+      );
+      await user.type(screen.getByRole('textbox'), 'xyz');
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('stays focusable and is not disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <TextInput
+          label="Owner"
+          value="alice"
+          onChange={() => {}}
+          isReadOnly
+        />,
+      );
+      const input = screen.getByRole('textbox');
+      expect(input).not.toBeDisabled();
+      await user.tab();
+      expect(input).toHaveFocus();
+    });
+
+    it('hides the clear button', () => {
+      render(
+        <TextInput
+          label="Owner"
+          value="alice"
+          onChange={() => {}}
+          hasClear
+          isReadOnly
+        />,
+      );
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('lets isDisabled win when both are set', () => {
+      const {container} = render(
+        <form>
+          <TextInput
+            label="Owner"
+            htmlName="owner"
+            value="alice"
+            onChange={() => {}}
+            isReadOnly
+            isDisabled
+          />
+        </form>,
+      );
+      expect(screen.getByRole('textbox')).toBeDisabled();
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+  });
+
   describe('onEnter', () => {
     it('calls onEnter when Enter key is pressed', async () => {
       const user = userEvent.setup();
@@ -809,3 +958,43 @@ describe('TextInput statusVariant forwarding', () => {
     expect(statusButton.getAttribute('aria-describedby')).toContain(tooltip.id);
   });
 });
+
+describe('TextInput disabled theme state', () => {
+  // Reflecting isDisabled on the root theming target lets a theme gate its own
+  // hover/border treatment on disabled (data-disabled + a .disabled variant),
+  // mirroring how status is reflected — without structural :has() CSS.
+  it('reflects disabled on the root target so themes can gate paint on it', () => {
+    const {container} = render(
+      <TextInput label="Name" value="" onChange={() => {}} isDisabled />,
+    );
+    const root = container.querySelector('.astryx-text-input');
+    expect(root).toHaveAttribute('data-disabled', 'disabled');
+    expect(root).toHaveClass('disabled');
+  });
+
+  it('omits data-disabled when enabled, like status does', () => {
+    const {container} = render(
+      <TextInput label="Name" value="" onChange={() => {}} />,
+    );
+    const root = container.querySelector('.astryx-text-input');
+    expect(root).not.toHaveAttribute('data-disabled');
+  });
+});
+
+describe('TextInput readonly theme state', () => {
+  it('reflects readonly on the root target so themes can gate paint on it', () => {
+    const {container} = render(
+      <TextInput label="Name" value="" onChange={() => {}} isReadOnly />,
+    );
+    const root = container.querySelector('.astryx-text-input');
+    expect(root).toHaveAttribute('data-readonly', 'readonly');
+  });
+
+  it('omits data-readonly when editable', () => {
+    const {container} = render(
+      <TextInput label="Name" value="" onChange={() => {}} />,
+    );
+    const root = container.querySelector('.astryx-text-input');
+    expect(root).not.toHaveAttribute('data-readonly');
+  });
+});