ui-nucleons

Minor changes

• link: Добавлены возможные цвета по дизайн-гайдам (#252)
• text-button: Добавлены возможные цвета по дизайн-гайдам (#252)

Patch changes

• select: правки отображения переполнения поля текстом (#256)
• switcher-row: для Checkbox/RadioButton расстояние между полем и текстом теперь 8 вместо 12 (#256)
• breakpoints.scss: добавлены миксины с более явными именами, старые помечены как deprecated (#256)

Движение к адаптивному дизайну

Все компоненты были пересмотрены с учетом проблем, предложений и новых дизайн-гайдов.

PATCH CHANGES - COMMON

Исправления и доработки.

• hooks/breakpoint: попытка исправить runtime-ошибку this is undefined с matchMedia (спасибо @next00)
• hooks/intersection: правки тестовых утилит (#239) (спасибо @korniux)
• carousel/draggable: правки обработки перетаскивания (#226) (спасибо @next00)
• Price: правки вывода цен (#212) (спасибо @vatokato)

PATCH CHANGES - DEPRECATED

Следующие компоненты/утилиты помечены как deprecated так как более не нужны (будут удалены в будущем).

• BorderedLayout (теперь следует использовать Layout, отдельный пример есть в Storybook)
• Card: слоты Header, Content и Footer помечены как deprecated (вместо них TopBar, BottomBar и CardContent)
• CheckboxField (теперь следует использовать аналогичный SwitcherRow)
• DesktopLayout (теперь следует использовать Layout в соответствии с новыми дизайн-гайдами)
• FieldGrid (больше не используем "склеивание" полей в дизайне)
• LoadingOverlay (следует использовать Spinner)
• MaskedField (теперь следует использовать MaskedInput)
• MobileLayout (теперь следует использовать Layout)
• Screen (теперь следует использовать Modal)
• TextField (теперь следует использовать Input или Textarea)
• Tooltip (теперь следует использовать Popup)
• TouchSlider (больше не используем в дизайне сложную схему обрезания прокручиваемого контента)
• WithHint (теперь следует использовать новую реализацию Hint)
• WithTooltip (теперь следует использовать Popup)

MINOR CHANGES - COMMON

Новый функционал существующих компонентов/утилит.

Компоненты

• BottomBar: добавлен возможность задавать размер через css (size='unset')
• BottomBar: теперь экспортируется BottomBarSize
• Button: добавлен размер xs в соответствии с гайдами
• Button: добавлен экспорт типов ButtonAppearance, ButtonIconPosition
• Button: добавлена возможность выводить состояние loading в соответствии с дизайн-гайдами
• Button: теперь экспортируются типы ButtonSize, ButtonViewType, ButtonProps
• Card: добавлена возможность выводить TopBar и BottomBar в качестве шапки и футера соответственно
• CleanGroup: добавлена возможность задавать размер через css (size='unset')
• DropdownItem: добавлена возможность задать проп value
• DropdownItem: доработан по новым дизайн-гайдам
• Link: варианты цвета вынесены в тип LinkColor
• Link: добавлен вариант цвета basic-blue (по новым дизайн-гайдам)
• Link: добавлена возможность задать подчеркивание пропом underline
• Panel: добавлен проп style
• Panel: добавлен компонент Panel.UnknownContent для вывода неизвестной html-верстки (#167)
• Plate: теперь можно выводить без тени и скруглений
• Screen: добавлена возможность управлять блокировкой прокрутки
• Screen: теперь использует useViewportHeightUnit
• Spinner: добавлен атрибут data-testid
• Spinner: добавлена возможность выводить любой цвет из токенов дизайн-системы
• Spinner: добавлена возможность задавать размер коротким названием (s, m, l) (старые значения будут удалены в будущем)
• Spinner: svg-элемент вынесен в отдельный компонент для возможности использования без обертки в виде div
• Stepper: добавлен экспорт типов StepperSide и StepperStyle
• Stepper: добавлена возможность предотвращать blur на поле при нажатии кнопок
• Stepper: добавлена возможность управлять состоянием disabled у кнопок
• TopBar: в иконке теперь можно задавать текст вместо иконки (по аналогии с удалённым NavBar)
• TopBar: добавлен data-testid корневому элементу и соответствующий проп
• TopBar: добавлен размер s = 56px (по новым дизайн-гайдам)
• TopBar: добавлена возможность задавать размер через css (size='unset')
• UploadArea: теперь может быть сфокусирован клавиатурой
• UploadArea: теперь может быть disabled

Утилиты (/helpers)

• всем утилитам добавлен именованный экспорт (экспорт по умолчанию будет удален в будущих мажорных релизах)
• fit-element-height: правки для Firefox 106 (подробности)

Хуки (/hooks)

• index: хук useOutsideClick: теперь может принимать undefined в качестве callback'а и список рефов вместо одного
• breakpoint: хук useBreakpoint: теперь не требует наличия BreakpointProvider выше в дереве

MINOR CHANGES - ADDED

Компоненты/утилиты, добавленные в этой версии библиотеки.

• dropdown/utils - хук useFloatingDropdown (SERVICE)
• FieldBlock (SERVICE) (#168)
• helpers/events - утилита triggerInput для вызова onChange у полей вручную (SERVICE)
• helpers/styles: утилита setViewportHeightUnit
• Hint - альтернатива WithHint (#247)
• HintView - альтернатива Hint (#247)
• hooks/styles - хук useViewportHeightUnit (SERVICE)
• Input - альтернатива <TextField /> (#169)
• Layout - альтернатива DesktopLayout и MobileLayout (#236)
• MaskedInput - альтернатива MaskedField (#218)
• ModalOverlay - затемнение для модальных компонентов (SidePage, Modal и тд, SERVICE)
• Popup - альтернатива WithTooltip (#238)
• PopupView - альтернатива Tooltip (#238)
• RadioButton - стилизованный <input type='checkbox' /> по дизайн-гайдам (#171)
• SwitcherRow - альтернатива CheckboxField (#110)
• Textarea - альтернатива <TextField multiline /> (#169)
• TextButton - кнопка, выглядящая как ссылка (Link)
• TopBar: добавлена утилита presetButtons для быстрого формирования иконок "Назад" и "Закрыть"
• types: типы WithTestId, FieldProps
• shadows.scss: миксин box-shadow - для добавления теней по токенам из дизайн-гайдов
• utils.scss: миксин semi-stylized-scrollbars - для ограниченной стилизации полос прокрутки без использования JS
• utils.scss: миксин button-reset для сброса стилей button до состояния, сравнимого с div
• utils.scss: миксин focus-visible (стили по умолчанию для фокусировки клавиатурой по дизайн-гайдам, SERVICE)
• _internal/page-scroll-lock - две реализации блокировки (BSL и внутренняя, для сравнения) (INTERNAL)
• _internal/page-scroll-lock - новый хук блокировки прокрутки страницы с возможностью задавать реализацию (INTERNAL)

BREAKING CHANGES

Следующие компоненты/утилиты имеют изменения, несовместимые с предыдущей версией (ломающие обратную совместимость).

Autocomplete

• обновлённая реализация
• старая реализация перенесена (autocomplete >> autocomplete-deprecated)

BaseInput (SERVICE)

• обновлённая реализация
• старая реализация перенесена (base-input >> base-input-deprecated)

Button

• удалены утилиты resolveAppearance, computeClassName за ненадобностью
• уточнён тип ButtonProps (в зависимости от пропа appearance доступные разные свойства)

Select

• обновлённая реализация
• старая реализация перенесена (select >> select-deprecated)

PhoneInput

• обновлённая реализация
• старая реализация перенесена (phone-input >> phone-input-deprecated но данные и утилиты остались на прежнем месте)

UploadArea

• обновлённая реализация по новым дизайн-гайдам (#203)
• перенесен из upload/area в upload-area

Panel

• обновлённая реализация по новым дизайн-гайдам (#167)
• удалены пропы inline, color, icon, contentColor, html (#167)
• добавлен проп type для формирования цветов по новым дизайн-гайдам (#167)
• добавлены пропы adornmentStart и adornmentEnd для вывода иконок слева и справа (#167)

NavBar

• компонент удалён (теперь следует использовать схожий по функционалу TopBar) (#170)

TopBar

• размер m переименован в xl (по новым дизайн-гайдам) (#170)
• размер s переименован в m (по новым дизайн-гайдам) (#170)
• проп buttonsProps заменен на buttons (для краткости)

Alert

• обновлённая реализация (переход с слот-пропов на компоненты-слоты) (#175)
• переведен на новый механизм блокировки прокрутки страницы (экспериментально)

Modal

• компонент обновлен по новым дизайн-гайдам (#180)
• интерфейс пропсов слота шапки обновлен в соответствии с TopBarProps
• переведен на новый механизм блокировки прокрутки страницы (экспериментально)

SidePage

• обновлен по дизайн-гайдам, добавлена адаптивность (#204)
• переведен на новый механизм блокировки прокрутки страницы (экспериментально)

Screen (deprecated)

• компонент NavBar в составе заменен на TopBar
• теперь по умолчанию блокировка прокрутки не включена
• переведен на новый механизм блокировки прокрутки страницы (экспериментально)

Hint

• обновлённая реализация (по новым дизайн-гайдам + с возможностью "всплытия" с помощью хуков)
• старая реализация перенесена (hint >> hint-deprecated)

Internal

• раздел _internal/body-scroll удален
• утилита allowTouchMove перенесена в _internal/page-scroll-lock/adapters/body-scroll-lock
• константа BSL_IGNORE_ATTR перенесена в _internal/page-scroll-lock/adapters/body-scroll-lock

Прочее

• модуль constants удален (больше нет констант)
• компоненту Checkbox заданы стили для выравнивания по центру строки текста по вертикали (экспериментально)
• компоненту RadioButton заданы стили для выравнивания по центру строки текста по вертикали (экспериментально)
• тип CheckboxProps перенесен из _internal в /types.ts и переименован в CheckboxInputProps

Пояснения

• SERVICE - служебные утилиты, которые не рекомендуется использовать за пределами библиотеки
• INTERNAL - ломающие обратную совместимость изменения этих утилит не влекут мажорный релиз

Patch

• Checkbox: добавлен cursor:pointer при наведении (#165)

Patch

• Autocomplete: автоматическое предзаполнение в Chrome открывало выпадающее меню (#163)

Patch

• Carousel: экспериментальная попытка заменить обработку глобального события resize на использование ResizeObserver для исправления скачков при свайпе на мобильных устройствах (#160, #161)

Patch

• Screen: исправлена блокировка прокрутки вложенных элементов (#158, #159)

Patch

• Range: кнопкам добавлены атрибуты aria-label SEO (#156, #157)

Patch

• Modal: хук прокрутки теперь экспериментально использует layout effect (#124, #155)

Patch

• Checkbox: исправлено поведение при контролируемом состоянии (#153, #154)

Patch

• TextField: обновлены цвета валидации по соглашению с дизайнерами (#151)

Patch

• Expandable: inline-стили перенесены в scss-файл (#145)
• Expandable: правки работы в случае когда все элементы влазят (#146)
• Expandable: ширина открывашки теперь фиксирована (#146)
• Stepper: внешний вид обновлен в соответствии с новыми дизайн-гайдами (#147)
• Stepper: ослаблены типы callback'ов onAdd, onSubtract (#147)

Patch

• Expandable: небольшие правки семантики верстки (#143, #144)
• Expandable: открывашка больше не показывается в SSR (для SEO) (#143, #144)
• Expandable: изменена реализация пересчета видимости (меньше хуков, проще логика, в обход react) (#143, #144)

Minor

• Expandable: добавить возможность выводить "закрывашку" (#138)

Patch

• Modal: исправить блокировку прокрутки (#141)
• Expandable: придумать как реагировать на rerender и другие события (#137)

Minor

• Добавлены компоненты Expandable.Group и Expandable.Item (#134, #136, #135)

Patch

• Chips.Item: при выводе вне Chips теперь нет отступов (#135)

Patch

• Chips: чипсы-ссылкы теперь правильно отображаются в состоянии "checked" (#132, #133)

Major

• удален HOC WithInViewportObserver
• удалены утилиты для работы с IntersectionObserver (/helpers/intersection-observer)

Minor

• useKeyDown: добавлена передача события в callback
• useKeyDown: добавлена проверка поля code для вызова callback'а
• добавлен хук useIntersection
• добавлены утилиты для тестивования компонентов с хуком useIntersection
• Clean.Group: добавлена возможность задавать размер (по гайдам)
• Clean.Group: добавлена возможность задавать размер через специальный контекст
• BottomBar: задействован контекст CleanGroupSizeContext для того чтобы дочерние прозрачные кнопки автоматически брали нужный размер
• SidePage: добавлена возможность отключать отступы в футере (по гайдам для прозрачных кнопок)

Patch

• Clean.Group: правки работы пропа asLink

Patch

• Autocomplete: теперь при потере фокуса на поле меню опций закрывается (#123)

Minor

• добавлен scss-mixin hidden-scrollbars
• ArrowButton: добавлен экспорт типов размера кнопки и направления стрелки

Patch

• TouchSlider: обновлена обрезка контента по гайдам (#120)
• TouchSlider: задействован scss-mixin hidden-scrollbars (#121)
• BaseInput: задействован scss-mixin hidden-scrollbars (#121)
• ArrowButton: мелкие правки stories (#121)
• Avatar: мелкие правки stories (#121)
• MobileLayout: мелкие правки stories (#121)
• DesktopLayout: мелкие правки stories (#121)
• Range: мелкие правки типов (#121)

Patch

• Carousel: правки для использования в NodeJS (При SSR падала ошибка) (#119)

Patch

• Link: правки после обновления цветов, не применялся цвет по умолчанию (#113)