Адаптация под дизайн-систему

Driver.js позволяет создавать пошаговые интерактивные подсказки для веб-приложений. Для интеграции в дизайн-систему важно обеспечить единообразие визуальных элементов, соблюдение типографики и корректную работу с компонентами, уже существующими в UI.

1. Настройка стилей подсказок

Driver.js предоставляет возможность полностью кастомизировать внешний вид подсказок через объект options. Основные параметры, влияющие на стиль:

const driver = new Driver({
  opacity: 0.7,           // прозрачность оверлея
  padding: 10,            // внутренний отступ вокруг элемента
  stageBackground: '#fff', // фон подсказки
  nextBtnText: 'Далее',
  prevBtnText: 'Назад',
  doneBtnText: 'Готово',
  className: 'custom-driver' // дополнительный CSS класс
});
  • opacity – позволяет подстроить оверлей под корпоративные цвета, чтобы не нарушать визуальный ритм.
  • className – критично для интеграции с дизайн-системой, так как через этот класс можно подключать глобальные переменные цвета, шрифтов и теней.

2. Интеграция с компонентами дизайн-системы

Каждый элемент интерфейса в дизайн-системе имеет собственные размеры, отступы и состояние (hover, focus). Для корректного позиционирования подсказок:

  • Использовать padding и stageBackground для соответствия визуальным стандартам компонентов.
  • Проверять работу подсказки на компонентах с динамической шириной и высотой, особенно если используется flex или grid.
  • При работе с модальными окнами необходимо установить allowClose: false и вручную контролировать закрытие, чтобы подсказка не терялась при ререндере.
driver.defineSteps([
  {
    element: '#buttonSave',
    popover: {
      title: 'Сохранение изменений',
      description: 'Нажмите для сохранения данных в системе',
      position: 'bottom'
    }
  }
]);

3. Адаптация типографики и цветов

Дизайн-системы задают единую типографику и палитру. В Driver.js это настраивается через CSS:

.custom-driver .driver-popover {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #333333;
  background-color: var(--color-surface);
  border-radius: 8px;
  box-shadow: var(--shadow-level-2);
}
  • Использование CSS-переменных позволяет поддерживать централизованное управление стилями.
  • Тени и радиусы должны соответствовать остальным компонентам для визуальной гармонии.

4. Поддержка адаптивного дизайна

Подсказки должны корректно отображаться на разных разрешениях:

  • Использовать позиции top, bottom, left, right и проверять их на мобильных устройствах.
  • Важно учитывать, что элементы интерфейса могут скрываться или менять размер, поэтому рекомендуется динамически пересчитывать позицию через метод highlight().
window.addEventListener('resize', () => {
  driver.refresh();
});

5. Управление поведением подсказок

Дизайн-системы часто имеют интерактивные компоненты (табы, аккордеоны, выпадающие меню). Для корректной работы:

  • Задавать шаги только для видимых элементов.
  • Использовать события компонента для вызова driver.highlight() после рендера.
  • Для динамических компонентов можно использовать отложенное определение шага через промисы.
const step = {
  element: () => document.querySelector('#dynamicTab'),
  popover: {
    title: 'Вкладка',
    description: 'Здесь можно переключать разделы'
  }
};
driver.defineSteps([step]);

6. Расширение возможностей через кастомные классы

Driver.js позволяет внедрять произвольные элементы управления в подсказку, что упрощает интеграцию с компонентами дизайн-системы:

const customPopover = document.createElement('div');
customPopover.className = 'custom-driver-popover';
customPopover.innerHTML = `
  <h3>Заголовок</h3>
  <p>Описание шага</p>
  <button class="ds-btn ds-btn-primary">Дальше</button>
`;
driver.on('next', () => {
  console.log('Шаг пройден');
});
  • Через такой подход можно использовать существующие кнопки, шрифты и цвета из дизайн-системы без дублирования стилей.
  • Позволяет обеспечить единообразие UX при пошаговой навигации.

7. Рекомендации по совместимости

  • Проверять Driver.js с различными версиями браузеров, используемыми в проекте.
  • Следить, чтобы CSS-переменные дизайн-системы были доступны на всех уровнях документа.
  • Не использовать глобальные стили Driver.js без scoping через className, чтобы избежать конфликтов с другими компонентами.

Эта методология позволяет создать подсказки, которые органично вписываются в визуальный язык приложения, обеспечивают корректное взаимодействие с компонентами и поддерживают адаптивность интерфейса.

Оглавление