Skip to content

feat(apollo-wind): EditableText, and an editable label in QuickFormField [MST-16146] - #1441

Open
BenGSchulz wants to merge 1 commit into
feat/quick-form-field-value-modesfrom
feat/editable-text
Open

BenGSchulz wants to merge 1 commit into
feat/quick-form-field-value-modesfrom
feat/editable-text

Conversation

@BenGSchulz

@BenGSchulz BenGSchulz commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Summary

A shared EditableText in apollo-wind, and an editable label with an info tooltip in QuickFormField's header (MST-16146, item 3).

EditableText is ported from apollo-react's canvas EditableText, along with its tests and stories. It is a controlled field that enters edit mode on click, submits the trimmed text on Enter or blur, and reverts on Escape, with multiline, error and disabled states. It submits whatever was committed, empty text included, and leaves rules about it to the owner. The apollo-wind version adds:

  • size="label", matching a form field label;
  • editing and onEditingChange, so an owner can hold whether the editor is open, such as to open it for an item just added;
  • truncationTooltip, on by default, which shows the full text on hover while it is cut off. It measures when the tooltip would open, as AttachmentTitle does, with a 700ms delay;
  • a read-trigger width cap of 100% plus its negative margins. A plain max-w-full truncated text that fit whenever the trigger sat in a flex row sized to its text;
  • an editor that hangs out on its leading side only, so what follows it, such as the asterisk, sits outside its box.

QuickFormField's header gains:

  • onLabelChange: a string label is then edited in place, with the required asterisk beside it, so the header's Required switch is the one control for it. Every commit is passed through, empty included; a consumer rejects one by leaving label as it was, and the old label shows again;
  • isEditingLabel and onIsEditingLabelChange, forwarding the controlled editing state. onLabelChange carries the text, the editing callback only whether the editor is open;
  • tooltip: an InfoTooltip after the label and asterisk, as FormFieldHeader places it, for computed, editable and custom labels alike;
  • labelAddon, rendered before any label, such as a drag handle;
  • new strings labelAriaLabel, labelPlaceholder and tooltipAriaLabel.

While the label is edited, it fills the header: the actions and the info icon step aside until the edit is done, so even a narrow header has room to type. The header keeps its 24px height meanwhile.

Decisions worth a look

  • The tooltip is built in, not a render slot. That lets the canvas component in the next PR become a thin wrapper.
  • Empty labels are the consumer's call. Neither EditableText nor QuickFormField has a rule for them, so hitl's row decides, such as to ignore an empty label or keep a new field's editor open.
  • The header actions hide while the label is edited. Without that, a half-width row left the editor about 66px wide. The info icon hides too, since the reference it shows follows the label.

Demo

Screen.Recording.2026-10-21.at.5.32.41.PM.mov

Test plan

  • apollo-wind: 3,044 tests pass, typecheck clean, Biome clean on changed files
  • EditableText: the canvas tests ported, plus controlled editing (opening and closing through the owner, Escape reverting to the text shown when it opened, going disabled mid-edit), the label size, the truncation tooltip, the leading-only editor margin and axe. The tooltip, disabled and later-open revert tests were checked to fail with their fix reverted.
  • QuickFormField: editing, Escape reverting, an empty label passed through and shown again when not applied, isEditingLabel followed, a label changed by the consumer after a revert, the asterisk, disabled, strings, labelAddon placement, and tooltip placement for each kind of label
  • Storybook: in "Editable label", edited and committed a label, checked truncation with the asterisk, hovered the info icon, and checked that editing hides the actions and info icon while the header stays 24px

Stack

  1. fix(apollo-wind): build the field header actions on the 3xs Button [MST-16146] #1456: Field header actions on the 3xs Button
  2. feat(apollo-wind): built-in variable and prompt modes in QuickFormField [MST-16146] #1440: Built-in variable and prompt modes
  3. feat(apollo-wind): EditableText, and an editable label in QuickFormField [MST-16146] #1441: EditableText and an editable label ← this PR
  4. refactor(apollo-react): build the canvas EditableText on apollo-wind's [MST-16146] #1442: Canvas EditableText on apollo-wind's

🤖 Generated with Claude Code

@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 21, 2026 23:52 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 21, 2026 23:52 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 21, 2026 23:52 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 21, 2026 23:52 Destroyed
@BenGSchulz
BenGSchulz added this pull request to stack #1443 October 21, 2026 23:52
@github-actions

Copy link
Copy Markdown
Contributor

Dependency License Review

  • ✅ 1957 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1721
ISC 91
Apache-2.0 57
BSD-3-Clause 28
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
CC0-1.0 4
MIT-0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.3.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package Coverage New-line coverage Packed (gzip) Unpacked vs main
@uipath/apollo-core — — 42.02 MB 50.17 MB ±0
@uipath/apollo-react 58.3% — 8.14 MB 32.16 MB −507 B
@uipath/apollo-ui-icons — — 2.86 MB 6.97 MB ±0
@uipath/apollo-vertex — — — — —
@uipath/apollo-wind 79.8% 100.0% (85/85) 816.5 KB 4.70 MB +5.8 KB
@uipath/ap-chat 85.8% — 40.42 MB 45.71 MB −603 B

"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.

@BenGSchulz
BenGSchulz marked this pull request as ready for review October 22, 2026 00:21
Copilot AI balanced review requested due to automatic review settings October 22, 2026 00:21

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@github-actions github-actions Bot added the size:XXL 1,000+ changed lines. label Oct 22, 2026
@BenGSchulz BenGSchulz added the dev-packages Adds dev package publishing on pushes to this PR label Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

📦 Dev Packages

Package Status Updated (PT)
@uipath/apollo-wind@2.72.2-pr1441.c19898a 🟢 Published Oct 22, 2026, 03:34:32 PM

Copilot AI balanced review requested due to automatic review settings October 22, 2026 18:56

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 22, 2026 18:56 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 22, 2026 18:56 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 22, 2026 18:56 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 22, 2026 18:56 Destroyed
…eld [MST-16146]

EditableText is click-to-edit text for a name or title, ported from
apollo-react's canvas EditableText: a controlled field that enters on
click, submits the trimmed text on Enter or blur, and reverts on Escape,
with multiline, error and disabled states. It submits whatever was
committed, empty text included, and leaves rules about it to the owner.
The wind version adds:

- `size="label"`, matching a form field label;
- `editing` and `onEditingChange`, so an owner can hold whether the
  editor is open, such as to open it for an item just added;
- `truncationTooltip` (on by default), which shows the full text on
  hover while it is cut off, measured when the tooltip would open, as
  AttachmentTitle does;
- a read-trigger cap of 100% plus its negative margins, so text that
  fits a content-sized flex row is not truncated;
- an editor that hangs out on its leading side only, so what follows
  it, such as an asterisk, sits outside its box.

QuickFormField's header gains:

- `onLabelChange`: a string `label` is then edited in place with
  EditableText, with the `required` asterisk beside it, so the header's
  Required switch is what toggles it. Every commit is passed through,
  empty included; a consumer rejects one by leaving `label` as it was;
- `isEditingLabel` and `onIsEditingLabelChange`, forwarding the
  controlled editing state;
- `tooltip`: an InfoTooltip after the label and its asterisk, as
  FormFieldHeader places it, for every kind of label;
- `labelAddon`, rendered before any label, such as a drag handle.

While the label is edited, it fills the header: the actions and the
info icon step aside until the edit is done, so a narrow header still
has room to type.

New strings: `labelAriaLabel`, `labelPlaceholder` and
`tooltipAriaLabel`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch was successfully deployed

4 active deployments
preview/apollo-design — 6b516a10 Deployed Oct 22, 2026 by github-actions[bot]
preview/apollo-docs — 6b516a10 Deployed Oct 22, 2026 by github-actions[bot]
preview/apollo-vertex — 6b516a10 Deployed Oct 22, 2026 by github-actions[bot]
preview/apollo-landing — 6b516a10 Deployed Oct 22, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dev-packages Adds dev package publishing on pushes to this PR pkg:apollo-wind size:XXL 1,000+ changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants