feat(ui2): chonky inputs

[TkDodo]

Add chonk to input, select, multi-select and textArea

[linear]

DE-68 Chonky Inputs and Reduced Button Chonk

[cursor]

Bug: Absolute Positioning Disrupts Suffix Alignment

Adding position: absolute to the Suffix component breaks its horizontal alignment. The original design used a HiddenValue span (with visibility: hidden) to create horizontal space, positioning the Suffix immediately after the input text. With position: absolute, Suffix is removed from the normal document flow, ignoring the HiddenValue's spacing and making its margin-left ineffective. This causes the Suffix to appear in the wrong horizontal position, potentially overlapping the input value or appearing at the left edge of its container.

static/app/components/forms/fields/numberField.tsx#L108-L111

sentry/static/app/components/forms/fields/numberField.tsx

Lines 108 to 111 in 0583344

	margin-left: ${space(0.5)};
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

Fix in Cursor • Fix in Web

---

Bug: CSS Template Literal Interpolation Error

The boxShadow CSS property was incorrectly defined using single quotes instead of backticks for template literals, specifically affecting variables like chonk and theme.tokens.border.primary. This prevented proper variable interpolation, causing the literal variable names to appear in the CSS string instead of their intended values.

static/app/components/core/input/index.chonk.tsx#L15-L16

sentry/static/app/components/core/input/index.chonk.tsx

Lines 15 to 16 in 0583344

	background: theme.tokens.background.secondary,
	boxShadow: `0px 2px 0px 0px ${theme.tokens.border.primary} inset`,

static/app/components/core/select/index.chonk.tsx#L70-L71

sentry/static/app/components/core/select/index.chonk.tsx

Lines 70 to 71 in 0583344

	border: `1px solid ${theme.border}`,
	boxShadow: `0px ${chonk} 0px 0px ${theme.tokens.border.primary} inset`,

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎