Skip to content

size.inputtext: высота поля по токенам и размер строки на примитиве sizing - #104

Merged
AxyIX merged 4 commits into
size-updatefrom
size.input
Aug 24, 2026
Merged

size.inputtext: высота поля по токенам и размер строки на примитиве sizing#104
AxyIX merged 4 commits into
size-updatefrom
size.input

Conversation

@khaliulin

Copy link
Copy Markdown
Contributor

Ветка от size-update, процесс тот же, что в #97, #98, #100, #101, #102.

Что сделано

Толщина рамки — токеном. У Aura рамка поля зашита сырым 1px, токена под неё нет. Добавлен inputtext.extend.borderWidth и применён в .p-inputtext — без этого слагаемое 2 × borderWidth в формуле высоты ниже было бы фикцией.

Высота — по токенам, а не по метрикам шрифта. Токена высоты поля в экспорте нет, а <input> в браузере не может быть ниже метрик шрифта: без явной height она диктовалась глифами — 21.5px контента вместо 16px размера строки — и уезжала в дробные пиксели, разъезжаясь с соседями по размерной лестнице. Высота собирается из тех же токенов, что задаёт дизайн:

height = размер строки + 2 × paddingY + 2 × borderWidth

по правилу на каждый размер: root.paddingY, root.sm.paddingY, root.lg.paddingY, extend.extXlg.paddingY.

Отдельный случай — float-label: там вертикальные паддинги задаёт сам плавающий лейбл (24/8), формула по базовым паддингам дала бы неверный результат. Для .p-floatlabel .p-inputtext высота сброшена в auto.

Размер строки — размерным примитивом. Слагаемое «высота строки» и само свойство line-height переведены с типографской шкалы fonts.lineHeight.250 на размерный примитив sizing.8x. Обе ступени дают 1rem, так что переход чисто семантический: геометрия поля больше не зависит от типографской шкалы, которая живёт своей жизнью вместе с fontSize.

Селектор в примерах. В stories поле объявлялось несуществующим селектором — исправлено.

Замеры в браузере

Storybook, components-form-inputtext--default, база 16px. Правило приезжает как line-height: var(--p-sizing-8x), дробных пикселей нет, консоль чистая.

размер высота
sm 34px
base 38px
lg 46px
xlg 58px

До и после перевода на sizing.8x — значения совпадают до пикселя.

Заметка по dt('sizing.*')

До этой ветки прямых ссылок на примитивы sizing в компонентных стилях не было ни одной (403 dt()-ссылки, все на semantic/components). Проверено в рантайме: --p-sizing-8x = 1rem присутствует — PrimeUIX эмитит переменную для каждого токена, включая примитивы, как и описано в gates.md.

Гейты

npm run check:tokens — новых мёртвых ссылок и коллизий нет: в отчёте те же 12 мёртвых (confirm-dialog, dialog, drawer) и 16 коллизий, что и до ветки, inputtext в них не фигурирует.

Не входит в ветку

tokens.json не правил — по договорённости это экспорт из Figma. Остальной кит на fonts.lineHeight.* не переводил: ссылка живёт ещё в 21 файле, и у ступеней .300.700 прямого совпадения со шкалой sizing может не быть — нужна поступенчатая сверка, это отдельная ветка.

@khaliulin khaliulin changed the title Высота поля по токенам и размер строки на примитиве sizing size.inputtext: высота поля по токенам и размер строки на примитиве sizing Aug 24, 2026
@AxyIX
AxyIX merged commit ba96a18 into size-update Aug 24, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants