Skip to content

Instantly share code, notes, and snippets.

@xnimorz
Created April 17, 2019 14:11
Show Gist options
  • Select an option

  • Save xnimorz/dda0c183b6d00489f4a3bf082faaa32f to your computer and use it in GitHub Desktop.

Select an option

Save xnimorz/dda0c183b6d00489f4a3bf082faaa32f to your computer and use it in GitHub Desktop.
  1. Убрали 100vw (потому что не на xs он ведет себя неправильно):
  2. Вынесли базовую реализацию DropBase и отдельные специфичные Menu, Info, Down в jsx
  3. Удалили lastMetrics
  4. Menu, Info и Down внутри себя работают через общий Base компонент, отличия в поведении описаны или в существующих параметрах, либо в behavior. behavior — это набор пресетов, таких как "размер стрелочки", "выравнивание", "оффсет для компонента" — т.е. мелкие стилевые и поведенческие отличия компонентов друг от друга
  5. Позиционирование между Menu, Down, Info стало более похожим, отличается только по behavior
  6. Избавились от customDistance — теперь за него также отвечает behavior
  7. Сделали правильное выравнивание для Menu и Down
  8. Починили анимашку у варинильных выпадающих элементов
  9. Ресетим позицию при ресайзе на ванильных реализациях
  10. Вынесли базовую реализацию и отдельные специфичные в классическом варианте
  11. Клик на кнопку слушается в нативных компонентах всегда — снимает \ ставит closeByClick метку
  12. Пример в доке с отложенным show компонента
  13. Класс, по которому при клике делаем hide для ванильных компонентов
  • Menu разделен на два компонента Menu и Down
  • Over переименован в Info
  • Уницифированы API компонентов: Tip, Menu, Info, Down. Сейчас таблица выглядит вот так: Native:
Функция Down Info Menu Tip
host body body body parent
layer aboveContent aboveContent aboveContent aboveContent
placement bottomStart bottomStart bottomStart top
html + + + +
closeByClickOutside - true - -
dataQa bloko-drop-down bloko-drop-info bloko-drop-menu bloko-drop-tip
onShow () => {} () => {} () => {} -
onClose () => {} () => {} () => {} -
flexible false false false -
onlySetPlacement false - false -
theme - dark - dark
showCloseButton - true - -
onExternalClose - - - () => {}

React:

Функция Down Info Menu Tip
host body body body parent
show false false false false (отличается поведение)
children + + + +
layer aboveContent aboveContent aboveContent aboveContent
placement bottomStart bottomStart bottomStart top
render + + + +
closeByClickOutside - true - -
dataQa bloko-drop-down bloko-drop-info bloko-drop-menu bloko-drop-tip
onClose () => {} () => {} () => {} -
flexible false false false -
onlySetPlacement false - false -
theme - dark - dark
showCloseButton - true - -
onExternalClose - - - () => {}
  • onExternalClose добавлен для классической реализации Tip
  • Параметр content удален из Tip
  • closeByClickOutside удален у Menu и Down (всегда true)
  • Добавлен dataQa для Info
  • Поправлены data-qa у компонентов
  • closeButtonDataQa удален
  • closeByClickOutside параметр удален у Tip (всегда false)
  • Ко всем миксинам, переменным, так или иначе в стилях завязанные на дроп элементы добавлен префикс bloko-drop
  • Добавили крестик для Down компонента
  • Заменили tooltip на tip в jsx tags
  • Создали setupTests для lux тестов. jest тесты при появлении warnings будут падать.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment