Repository navigation
feat(apollo-wind): EditableText, and an editable label in QuickFormField [MST-16146] - #1441
Open
BenGSchulz wants to merge 1 commit into
Open
BenGSchulz wants to merge 1 commit into
BenGSchulz wants to merge 1 commit into
Conversation
Contributor
Dependency License Review
License distribution
Excluded packages
|
Contributor
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
BenGSchulz
marked this pull request as ready for review
October 22, 2026 00:21
Contributor
📦 Dev Packages
|
BenGSchulz
force-pushed
the
feat/editable-text
branch
from
October 22, 2026 18:56
285a9f3 to
27e12d0
Compare
…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>
3 tasks done
BenGSchulz
removed this pull request from stack #1443
October 22, 2026 22:04
BenGSchulz
force-pushed
the
feat/editable-text
branch
from
October 22, 2026 22:04
27e12d0 to
6b516a1
Compare
BenGSchulz
added this pull request to stack #1457
October 22, 2026 22:04
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A shared
EditableTextin apollo-wind, and an editable label with an info tooltip inQuickFormField's header (MST-16146, item 3).EditableTextis ported from apollo-react's canvasEditableText, 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;editingandonEditingChange, 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, asAttachmentTitledoes, with a 700ms delay;max-w-fulltruncated text that fit whenever the trigger sat in a flex row sized to its text;QuickFormField's header gains:onLabelChange: a stringlabelis then edited in place, with therequiredasterisk 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 leavinglabelas it was, and the old label shows again;isEditingLabelandonIsEditingLabelChange, forwarding the controlled editing state.onLabelChangecarries the text, the editing callback only whether the editor is open;tooltip: anInfoTooltipafter the label and asterisk, asFormFieldHeaderplaces it, for computed, editable and custom labels alike;labelAddon, rendered before any label, such as a drag handle;labelAriaLabel,labelPlaceholderandtooltipAriaLabel.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
EditableTextnorQuickFormFieldhas a rule for them, so hitl's row decides, such as to ignore an empty label or keep a new field's editor open.Demo
Screen.Recording.2026-10-21.at.5.32.41.PM.mov
Test plan
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,isEditingLabelfollowed, a label changed by the consumer after a revert, the asterisk, disabled, strings,labelAddonplacement, and tooltip placement for each kind of labelStack
🤖 Generated with Claude Code