Skip to content

size.autocomplete: компенсация высоты чипа и цвет иконок из токенов - #120

Open
khaliulin wants to merge 1 commit into
mainfrom
size.autocomplete
Open

size.autocomplete: компенсация высоты чипа и цвет иконок из токенов#120
khaliulin wants to merge 1 commit into
mainfrom
size.autocomplete

Conversation

@khaliulin

Copy link
Copy Markdown
Contributor

Ветка от main. Третий компонент группы «значения, подогнанные под базу 14» — семь пунктов §6 плана из autocomplete.ts.

Что сделано

Убраны пиксельные подгонки в calc(). Контейнер мультивыбора ужимался на 5px (базовый размер) и на 4.75px (sm, lg, xlg) — так компенсировали высоту, которую добавляет чип: его вертикальный padding плюс граница. Теперь это записано ровно так, как считается: calc(<paddingY> - chip.root.paddingY - chip.extend.borderWidth). При базе 16 получается 14 − 4 − 1 = 9px; замер в браузере совпадает, чип встаёт в поле без прыжка высоты.

Цвет иконок — из токена. Стояла сырая var(--p-form-field-icon-color): имя писалось руками и никем не проверялось. Заменено на dt('autocomplete.dropdown.color').

Применён фон опции. autocomplete.colorScheme.*.extend.option.background не читался нигде — Aura рисует опцию с background: transparent. Токен есть и в светлой, и в тёмной ветке, теперь он применён.

Формат. Файл не проходил prettier --check и на main — прогнал форматирование, раз всё равно правлю.

Проверки

  • check-component autocomplete — было 8 FAIL (7×G2 сырые размеры, G3 сырая var), стало 0 FAIL
  • check-stories-bg autocomplete — подложек нет
  • check-dt-refs — мёртвых ссылок в autocomplete.ts нет
  • рантайм: padding поля 14px, с чипом 9px, дробных пикселей нет, консоль без ошибок
  • prettier --check чист
  • границы ветки: один файл tokens/components/autocomplete.ts

Осознанные WARN

  • G6, ссылки на чужие компонентыinputtext.* (autocomplete повторяет размерную лестницу поля) и chip.* (компенсация высоты чипа). Обе связи содержательные: если поменяется padding поля или чипа, autocomplete должен поехать вместе с ними.
  • G8, autocomplete.extend.checkmarkSize — применить некуда: в отличие от select, у PrimeNG-автокомплита нет элемента галочки (p-select-option-check-icon есть, p-autocomplete-option-check-icon — нет). Либо токен под будущий кастомный шаблон, либо мусор в экспорте — вопрос дизайну.

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