fix(core): align Tokenizer/PowerSearch end content with field padding#3178
Conversation
Closes facebook#2849. The Tokenizer endSection (clear button + endContent, including PowerSearch's resultCount) was positioned at insetInlineEnd of calc(spacing-1 - 1px) = 3px, while the field's content padding (inputWrapperStyles.base) and the restored text/start-icon insets are spacing-2 (8px). This left resultCount ~3px from the edge, misaligned with the text. Use spacing-2 so end content matches the field padding.
durvesh1992
requested review from
cixzhang,
ejhammond,
imdreamrunner,
josephfarina,
marie-lucas,
nynexman4464 and
thedjpetersen
as code owners
|
Someone is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| }, | ||
| endSection: { | ||
| position: 'absolute', | ||
| insetInlineEnd: `calc(${spacingVars['--spacing-1']} - 1px)`, |
There was a problem hiding this comment.
Hmm I think this was probably originally for button edge compensation.
There was a problem hiding this comment.
You're right — good catch. The clear button here is a ghost isIconOnly button, so it carries data-astryx-edge-comp, and the original 3px (spacing-1 - 1px) was compensating for its transparent padding so the X icon optically landed at the ~8px field inset. My blanket move to 8px aligns the text resultCount (the actual bug in #2849) but over-insets the clear-button icon by ~5px.
Proposed proper fix using the existing edge-comp system: keep endSection at insetInlineEnd: spacing-2 (8px, so text aligns) and apply edgeCompSlot.inset(calc(spacing-2 - spacing-1 + 1px)) to it. That way:
- last child = clear button (
data-astryx-edge-comp) → pulls the section out 5px → button box returns to its original 3px position (icon optically at 8px, no regression); - last child =
resultCounttext (no edge-comp) → no margin → text sits at 8px (fixes XDSPowerSearch: resultCount ignores input padding (3px from edge instead of matching padding) #2849).
The 5px amount mirrors the existing startIconWithTokens/inputCompact restoration constant. I can push that — but since I can't launch a browser locally to eyeball it, would you mind confirming on the preview you authorized once I do? Happy to adjust the amount if it's off.
cixzhang
left a comment
cixzhang
left a comment
There was a problem hiding this comment.
I need to rethink edge compensation generally so I think this is fine for now and probably more expected.
2 participants
Summary
Closes #2849.
In
PowerSearch, theresultCount(and the Tokenizer clear button / anyendContent) sat ~3px from the field's right edge instead of matching the field padding.Root cause: the Tokenizer
endSectionusedinsetInlineEnd: calc(spacing-1 - 1px)= 3px, while the field's content padding (inputWrapperStyles.base→paddingInline: spacing-2= 8px) and the restored text/start-icon insets (startIconWithTokens,inputCompact) all resolve to 8px. So end content was misaligned with the text in both the token and non-token states.Fix: set
endSection.insetInlineEndto--spacing-2(8px) so end content lines up with the field's inline padding.Testing
pnpm -F @astryxdesign/core test Tokenizer PowerSearch— 148/148 pass.inputStyles.stylex.ts(basepaddingInline: spacing-2) and the existing start-side restoration styles, which target the same 8px inset.Changeset
Included (
@astryxdesign/corepatch).