Skip to content

привести размеры ячеек inputotp к макету - #141

Open
khaliulin wants to merge 6 commits into
mainfrom
size.otp
Open

привести размеры ячеек inputotp к макету#141
khaliulin wants to merge 6 commits into
mainfrom
size.otp

Conversation

@khaliulin

@khaliulin khaliulin commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Ячейка OTP была шириной ~304px вместо макетных 40px, высота набиралась паддингами и выходила дробной (43.5px), а выбрать размер через API было нельзя.

Что изменено

Токены (tokens.jsoncomponents.inputotp) приведены к редлайну Figma:

Путь Было Стало px
input.width size.1800 size.1100 304 → 40
input.lg.width size.1900 size.1200 336 → 48
input.sm.width size.1700 size.800 272 → 28
extend.extSm.height size.800 28 (новый)
extend.extLg.height size.1200 48 (новый)
extend.extSm.borderRadius borderRadius.200 8 (новый)

Удалены заглушки inputotp.sm.width и inputotp.lg.width (обе size.none, нигде не применялись и в макете отсутствуют). Без изменений: extend.height = size.1100, extend.borderWidth = borderWidth.100, root.gap = space.200.

Имена ключей extSm / extLg и input.sm.width / input.lg.width оставлены как есть: первые заданы редлайном Figma, на вторые ссылаются базовые стили PrimeUIX (.p-inputotp-input.p-inputtext-sm).

Стили (tokens/components/inputotp.ts): высота применяется по размеру — extend.extSm.height / extend.height / extend.extLg.height. До этого extend.height не использовался вовсе, высота набиралась padding-block и была дробной.

API (inputotp.component.ts): ExtraInputOtpSize = 'small' | 'base' | 'large', @Input() size = 'base', геттер primeSize отдаёт undefined для base и само значение для остальных. Ширину PrimeUIX подхватывает сам — в его базовых стилях уже есть правила .p-inputotp-input.p-inputtext-sm/lg, ссылающиеся на input.sm.width / input.lg.width.

Stories: контрол size с тремя опциями.

Отдельно про радиус small

--p-inputtext-border-radius = 14px один на все размеры. На ячейке 28×28 это ровно половина стороны — четыре скругления смыкались в окружность, ячейки выглядели кружками. Для small заведён свой радиус 8px (borderRadius.200); base и large остались на радиусе inputtext.

Проверено в браузере

size класс на ячейке ширина × высота радиус
base p-inputtext 40 × 40 14px
small p-inputtext-sm 28 × 28 8px
large p-inputtext-lg 48 × 48 14px

Дробных пикселей в размерных свойствах не осталось.

Гейты: check-component.mjs inputotp — было 15 WARN, стало 12 (ушли все три G8 «токен не применён»; оставшиеся — G6-ссылки на inputtext.*, структурные: ячейка OTP и есть inputtext); check-dt-refs — мёртвых ссылок нет; prettier и tsc --noEmit чисто.

Вопросы к дизайну

  1. Радиус base и large — сейчас 14px от inputtext; в макете у inputotp радиус не задан вовсе. Если для ячейки OTP он должен отличаться, нужны значения.
  2. Спецификация docs/components-api/inputotp.md не содержит пропа size — нужно дописать.

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.

1 participant