UI-компоненты, реализующие правила дизайн-системы
APACHE-2.0 License
Bot releases are visible (Hide)
select
: рефакторинг и обновление логики для Chrome 127 - экспериментально (#470, #475)select
: изменен интерфейс контекста (#470, #475)helpers
: добавлена функция mergeRefs
(#470, #475)input
: добавлена возможность переопределить --base-input-placeholder-color (#476, #477)textarea
: добавлена возможность переопределить --base-input-placeholder-color (#476, #477)phone-input
: обновлено использование Select (#470, #475)textarea
: мелкие правки типов (#476, #477)deps
: обновлен playwright (#470, #475)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.20...45.0.0-alpha.21
Published by krutoo about 2 months ago
Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.19...45.0.0-alpha.20
Published by krutoo 3 months ago
deps
: обновлен пакет @krutoo/input-mask
(#466)deps
: обновлены пакеты Sass (#467, #468)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.18...45.0.0-alpha.19
Published by krutoo 3 months ago
phone-input
: добавлена возможность задавать список масок (#271, #459)phone-input
: добавлена возможность задавать механизм определения маски по умолчанию (#271, #459)phone-input
: добавлены изображения для стран в виде inline base64 (#271, #459)phone-input
: добавлен пресет списка масок использующих inline base64 в качестве картинок (#271, #459)skeleton
: добавлен компонент Skeleton
(#453, #461, #462, #463, #464, #465)phone-input
: теперь по умолчанию не используются импорты изображений, так как они не являются валидными JS-модулями (#271, #460)phone-input
: правки работы функции определения маски и тесты (#271, #460)stroked-svg
: если обводка 0 то копия не выводится (нужно чтобы выключать обводку без необходимости выводить svg вместо StrokedSVG) (#452)docs
: выполнен отказ от Storybook (#455)docs
: Добавлены примеры использования scss-утилит в документацию (#458)docs
: выполнена декомпозиция story-модулей (#454)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.17...45.0.0-alpha.18
Published by krutoo 5 months ago
internal
: добавлен костыль для работы с overlayscrollbars
в CustomScrollbar
(#450)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.16...45.0.0-alpha.17
Published by krutoo 5 months ago
dropdown
: добавлен хук useDismissByWheel
(#447, #448)autocomplete
: теперь портал выводится только если меню показано (#447, #448)hint
: теперь портал выводится только если хинт показан (#447, #448)popup
: теперь портал выводится только если попап показан (#447, #448)select
: теперь портал выводится только если меню показано (#447, #448)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.15...45.0.0-alpha.16
Published by krutoo 6 months ago
carousel
: правки стилей, перенесено из сторибука в компонент (#438, #440)dropdown
: увеличена макс высота по умолчанию (#441, #442)expandable
: добавлена проверка чтобы не вызывать именение состояния после размонтирования (#444, #446)popup
: обновлено позиционирование в соответствии с новыми требованиями (#443, #445)deps
: обновлен пакет @floating-ui/react
(#443, #445)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.14...45.0.0-alpha.15
Published by krutoo 6 months ago
deps
: обновлён пакет @sima-land/ui-quarks
до версии ^5.0.0
(#436, #437)price
: добавлена возможность выводить отрицательные цены (#434, #435)carousel
: добавлены стили для улучшения прокрутки на мобильных устройствах (#438, #439)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.13...45.0.0-alpha.14
Published by krutoo 7 months ago
base-input
: css-переменная --placeholder-color заменена на --base-input-placeholder-color (#424, #430)colors
: добавлен новый токен additional-crimson (#427, #428)popup
: добавлена возможность менять цвет, расположение, отступы, скрывать крестик (#425, #426)portal
: добавлен пропс onMount
сработает когда смонтировано в DOM (для ситуаций когда ref используется сквозь портал) (#425, #426)base-input
: css-переменная --placeholder-color заменена на --base-input-placeholder-color (#424, #430)avatar
: мелкие правки стилей иконки (#427, #428)deps
: выполнен npm audit fix
(#429)input
: заданы цвета для BaseInput явно для правок в safari (#424, #430)field-block
: правки стилей из-за новой реализации base-input из-за Safari (#424, #430)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.12...45.0.0-alpha.13
Published by krutoo 9 months ago
*.m.scss
(#390, #417)hooks
: добавлен экспорт BreakpointProvider
(#421)price
: добавлен экспорт formatPrice (#422)test-utils
: добавлен класс DOMRectReadOnlyMock
(#413, #416)test-utils
: добавлен класс IntersectionObserverMock
(#413, #414)test-utils
: добавлен класс MatchMediaMock
(#413, #416)test-utils
: добавлен класс ResizeObserverMock
(#413, #415)avatar
: исправлено название внутренней константы (#413, #414)context
: мелкие правки комментариев (#413, #415)dropdown
: переписаны unit-тесты (#413, #415)hooks/use-intersection/test-utils
: все утилиты помечены как deprecated (#413, #414)deps
: обновлен пакет date-fns (#418, #419)deps
: обновлен пакет typescript (#413, #414)package.json
: теперь тип модулей задан явно с помощью "type": "commonjs"
(#420)Full Changelog: https://github.com/sima-land/ui-nucleons/compare/45.0.0-alpha.11...45.0.0-alpha.12
Published by krutoo 9 months ago
✅ Всем каталогам компонентов добавлены точки входа (index.js).
Все публичные компоненты и утилиты раздела доступны из точки входа за исключением *.scss
файлов.
При обновлении используйте точку входа так как в будущих релизах все непубличные модули будут недоступны для импорта.
✅ В этом релизе удалена большая часть deprecated- компонентов и утилит.
Для следующих компонентов есть замена:
autocomplete-deprecated
следует заменить на autocomplete
base-input-deprecated
следует заменить на base-input
card
следует заменить на plate
, top-bar
и bottom-bar
checkbox-field
следует заменить на switcher-row
chips
следует заменить на chip
hint-deprecated
следует заменить на hint
masked-field
следует заменить на masked-input
pagination-deprecated
следует заменить на pagination
phone-input-deprecated
следует заменить на phone-input
select-deprecated
следует заменить на select
with-hint
следует заменить на hint
with-tooltip
следует заменить на popup
text-field
следует заменить на input
или textarea
screen
следует заменить на modal
✅ Следующие компоненты удалены без замены:
bordered-layout
(при необходимости layout
позволяет добиться того же эффекта, пример есть в storybook)field-grid
(больше не используем в дизайне "склеивание" но при необходимости input
позволяет добиться того же эффекта)loading-overlay
(следует вручную расположить spinner
так как требуется)✅ Компонент Modal
полностью переписан, из важного:
--vh
Modal.Header, Modal.Footer
- вместо них TopBar
и BottomBar
footerStub
удален, для создания отступа снизу следует использовать ModalBottomGap
size
теперь задает фиксированный размер, для создания отзывчивого модального окна следует использовать getResponsiveModalProps
ModalBody
(в случае с Alert
перенесены на AlertBody
)Данное руководство будет пополняться...
alert
: опции блокировки прокрутки перенесены с Alert
на AlertBody
(#353, #377)alert
: опция scrollableRef
переименована в rootRef
(#353, #377)clean-buttons
: контекст CleanGroupSizeContext
заменен на CleanButtonContext
(#384)dropdown
: теперь абстрагирует работу с OverlayScrollbars
(#355, #369)helpers
: модуль find-child-element
переименован в find-child-index
(#392, #393)helpers
: удален default export
из всех вложенных модулей (#392, #394)helpers
: удалены утилиты rename
, format-number
(#392, #394)hooks
: все публичные хуки перенесены и теперь доступны из ./hooks
(#401, #403)internal/page-scroll-lock
: адаптеры переименованы в соответствии с реализацией (#388, #389)internal/page-scroll-lock
: добавлен контекст конфига (#388, #389)internal/page-scroll-lock
: упрощена реализация контекста адаптера (#388, #389)layout
: теперь не используются css-переменные и как следствие они более недоступны элементам-потомкам (#358, #361)link
: удален проп noIndex
(#392, #399)modal-overlay
: убрана установка css-переменной --vh
(#388, #389)modal
: полный пересмотр всех компонентов (#353, #373)modal
: удалены пропсы onFullScroll
, fullScrollThreshold
(#355, #369)spinner
: константа DIAMETERS
переименована в SPINNER_DIAMETER
(#381)autocomplete-deprecated
: удален (#392, #397)base-input-deprecated
: удален (#392, #398)bordered-layout
: удален (#392, #396)card
: удален (#392, #398)checkbox-field
: удален (#392, #397)chips
: удален (#392, #396)field-grid
: удален (#392, #397)helpers
: модуль get-no-index
удален (#392, #399)helpers
: удалена функция setViewportHeightUnit
(#401, #404)hint-deprecated
: удален (#392, #396)hooks
: удален хук useViewportHeightUnit
(#401, #403)internal/utils
: удален (#392, #398)loading-overlay
: удален (#392, #396)masked-field
: удален (#392, #396)pagination-deprecated
: удален (#392, #397)phone-input-deprecated
: удален (#392, #396)screen
: удален (#392, #395)select-deprecated
: удален (#392, #398)text-field
: удален (#392, #398)tooltip
: удален (#392, #395)with-hint
: удален (#392, #395)with-tooltip
: удален (#392, #395)autocomplete
: добавлена возможность прокинуть dropdownProps
(#368, #370)autocomplete
: добавлена прокрутка списка при переключении стрелками на клавиатуре (#355, #369)autocomplete
: добавлено скрытие меню при прокрутке колесом за пределами меню (#355, #369)autocomplete
: добавлены пропсы onMenuOpen
, onMenuClose
(#368, #371)bottom-bar
: добавлена возможность задавать скругления (#353, #373)carousel
: withControls
теперь можно явно задать как auto
(#290, #387)clean-buttons
: CleanGroup теперь принимает произвольное содержимое (#384)context
: добавлены контексты для упрощения unit-тестирования браузерных API (#391, #406)dropdown
: добавлена возможность прокинуть viewportProps
(#368, #370)file-icon
: учтены исправления косяков в дизайн-гайдах (#359, #360)helpers
: добавлена точка входа, теперь следует использовать ее (#410)helpers
: добавлена утилита getPositionedParentOffset
вместо удаленной утилиты getOriginCorrection
из with-tooltip
(#401, #412)internal/custom-scrollbar
: добавлена возможность прокинуть viewportProps
(#368, #370)internal/dropdown-loading
: перенесен в dropdown
(#355, #369)masked-input
: переписан хук useMaskInput
, теперь у хука нет собственного неконтролируемого состояния (#407, #408)modal
: в интерфейс стилей добавлено поле --modal-min-height
(#401, #405)modal
: добавлен экспорт ModalBodyProps
(#401, #404)no-index
: добавлены утилиты wrapNoIndex
и getNoIndexProps
(#392, #399)phone-input
: добавлена возможность прокинуть dropdownProps
(#368, #370)phone-input
: добавлено скрытие меню при прокрутке колесом за пределами меню (#355, #369)phone-input
: добавлены пропсы onMenuOpen
, onMenuClose
(#368, #371)select
: добавлена возможность прокинуть dropdownProps
(#368, #370)select
: добавлено скрытие меню при прокрутке колесом за пределами меню (#355, #369)select
: добавлены пропсы onMenuOpen
, onMenuClose
(#368, #371)shadows.scss
: добавлена функция get-box-shadow
(#353, #373)stroked-svg
: добавлена возможность задать data-testid
(#392, #393)styling
: добавлена точка входа, теперь следует использовать ее (#410)tabs
: добавлена возможность передавать стили и классы компонентам (#290, #387)text-button
: добавлена возможность задать unset
для size
, color
, iconGutter
(#392, #393)top-bar
: добавлена возможность задавать text-align
и стили (#355, #366)top-bar
: добавлена возможность задавать скругления (#353, #373)arrow-button
: добавлена точка входа index.ts (#378)autocomplete
: теперь обрабатывается пропсы inputRef
и baseInputProps.inputRef
(#290, #387)avatar
: правки импортов (#384)bottom-bar
: правки для CleanGroup
(#384)box
: добавлена точка входа index.ts (#401, #402)breakpoints.scss
: правки для Safari 14 (#353, #373)button
: добавлена точка входа index.ts (#378)carousel
: добавлена точка входа index.ts (#383)carousel
: правки расчета отображения всех элементов (#290, #387)checkbox
: добавлена точка входа index.ts (#378)clean-buttons
: добавлена точка входа index.ts (#384)dot-nav
: добавлена точка входа index.ts (#378)dropdown-item
: мелкие правки раздела (#359, #360)dropdown-item
: правки обработки пропcа value (#290, #387)dropdown
: доработки утилиты useDropdownFloatingStyle
(#391, #406)expandable
: добавлена точка входа index.ts (#378)field-block
: добавлена точка входа index.ts (#378)group-overflow
: добавлена точка входа index.ts (#379)info-text
: добавлена точка входа index.ts (#379)input
: добавлена точка входа index.ts (#379)input
: теперь обрабатывается проп baseInputProps.inputRef
(#290, #387)internal/custom-scrollbar
: теперь абстрагирует работу с OverlayScrollbars
(#355, #369)layout
: мелкие правки типов (#379)link
: добавлена точка входа index.ts (#379)masked-input
: исправлена обработка пропса defaultValue
(#407, #408)masked-input
: исправлена обработка пропса onInput
(#407, #408)modal-overlay
: добавлен хук для установки размеров элемента на основе visualViewport
(#388, #389)modal-overlay
: добавлена точка входа index.ts (#379)modal-overlay
: добавлены пропсы для блокировки прокрутки страницы (для iPad с виртуальной клавиатурой нужна прокрутка) (#388, #389)modal
: правки getResponsiveModalProps
(не применял отступы внутри overlay) (#388, #389)modal
: правки пропа rounds
(#401, #404)modal
: правки стилей modal-util.scss
(#388, #389)modal
: уточнения max-height в modal-util.scss
(#388, #389)no-index-mark
: компонент перенесен в no-index
(#380)no-index
: добавлена точка входа index.ts (#380)pagination
: правки обработки пропа getItems
(#358, #365)panel
: добавлена точка входа index.ts (#380)phone-input
: исправлена обработка пропса defaultValue
(#407, #408)phone-input
: исправлена обработка пропса disabled
(#407, #408)phone-input
: исправлена обработка пропса onInput
(#407, #408)phone-input
: правки внешнего вида опций меню (#407, #409)plate
: добавлена точка входа index.ts (#380)portal
: добавлена точка входа index.ts (#380)price
: добавлена точка входа index.ts (#380)radio-button
: добавлена точка входа index.ts (#381)range
: добавлена точка входа index.ts (#381)rating
: добавлена точка входа index.ts (#381)side-page
: добавлена точка входа index.ts (#381)spinner
: добавлена точка входа index.ts (#381)stepper
: добавлена точка входа index.ts (#382)stroked-svg
: добавлена точка входа index.ts (#382)super-ellipse-clip-path
: добавлена точка входа index.ts (#382)switcher-row
: добавлена точка входа index.ts (#382)tabs
: добавлена точка входа index.ts (#382)text-button
: добавлена точка входа index.ts (#383)text
: добавлена точка входа index.ts (#401, #402)textarea
: добавлена точка входа index.ts (#383)timer
: добавлена точка входа index.ts (#383)timer
: интерфейс Distance переименован в TimeDistance (#383)toggle
: добавлена точка входа index.ts (#383)touch-slider
: добавлена точка входа index.ts (#401, #402)types
: интерфейс CheckboxInputProps
теперь не содержит поля type (#378)unknown-content
: добавлена точка входа index.ts (#383)overlayscrollbars
и overlayscrollbars-react
(#355, #369)lodash
из исходного кода (#362, #385)lodash
и @types/lodash
(#362, #385)Published by krutoo about 1 year ago
chip
: добавлен компонент Chip
по исправленным дизайн-гайдам чипсов (#345)chips
: помечен как deprecated, теперь нужно использовать chip
(#347)carousel
: попытка исправить предотвращение blur на активном поле при клике на карусель (#352)popup
: убран авто-фокус на крестике при открытии (из-за того что в Safari срабатывает :focus-visible
) (#350)Published by krutoo about 1 year ago
deps
: версия peer-зависимости react
теперь ^17.0 || ^18.0
deps
: версия peer-зависимости react-dom
теперь ^17.0 || ^18.0
deps
: обновлен @floating-ui/react
Published by krutoo about 1 year ago
chips
: правки структуры разделаtextarea
: размер по умолчанию теперь 2 строки в соответствии с дизайн-гайдамиupload-area
: пропсы отвечающие за формирование заголовка и описания заменены на title и descriptionavatar
: добавлена возможность задавать размер текста через css-переменнуюfile-icon
: добавлена возможность задавать цвет самостоятельноfile-icon
: добавлена возможность задавать отображение неизвестного типа самостоятельноtabs
: добавлен экспорт типа TabsStyle
tabs
: компонент Tabs
теперь может принимать style
tabs
: компонент Tabs.Item
теперь может принимать children
upload-area
: добавлена функция getFilesDescription
для формирования описания файлов для загрузки по дизайн-гайдамautocomplete
: добавлено переключение состояния при клике на полеavatar
: добавлены e2e-тестыchips
: компонент Chips.Item
помечен как deprecated
expandable
: теоретический фикс для SSRtoggle
: небольшие изменения стилейtop-bar
: расстояние между заголовком и подзаголовком теперь -2px в соответствии с исправлениями в дизайн-гайдахPublished by krutoo about 1 year ago
avatar/user
: удален, теперь следует использовать Avatar c утилитами для формирования (#309)expandable
: удалены утилиты для работы (заменены на новые) (#308)avatar
: добавлены утилиты для отображения аватара пользователя по дизайн-гайдам (#309)button
: добавлена возможность задать viewType='success'
(#304)button
: добавлен экспорт типа ButtonStyle
(#305)button
: добавлены миксины цвета и размера в button-util.scss
(#305)button
: теперь можно задавать произвольные цвета указав viewType='unset'
и нужные стили (#305)colors
: добавлен цвет additional-dark-teal
(#303)colors
: добавлен цвет additional-unlit-blue
(#303)colors
: добавлен экспорт константы COLOR
со всеми цветами дизайн-системы (#309)expandable
: компонент переработан чтобы избегать ненужных отступов снизу когда элементы влезли в n-1 строк где n - лимит строк (#308)Published by krutoo over 1 year ago
pagination
: функция валидации состояния (пропсов total и current) вынесена в validatePaginationState
pagination
: мелкие правки отображения и валидацииPublished by krutoo over 1 year ago
@sima-land/ui-quarks
(#279, #280)pagination
: раздел переименован в pagination-deprecated
(#284, #286)pagination
: реализованы компоненты по новым дизайн-гайдам (#284, #286, #287, #289, #291, #292, #293)phone-input
: Оптимизировать картинки флагов стран (#276, #277)Published by krutoo over 1 year ago
hint
: теперь useTempHintState
принимает опцию timeout
вторым аргументом (#272)hint
: теперь useTempHintState
по умолчанию скрывает хинт через 3сек (#272)arrow-button
: миксины теней вместо классов из ./styling
(#272)avatar
: удалено использование lodash (#272)group-overflow
: правки интерпретации пропа gap
(не работал 0) (#272)text-button
: из стилей удален сброс margin (сложно переопределять) (#272)top-bar
: исправлен экспорт navigationButtons
(был export type
) (#272)_internal
: правки работы CustomScrollbar
(кэшировался onFullScroll
) (#274)Published by krutoo over 1 year ago
group-overflow
: добавлен экспериментальный компонент GroupOverflow
(#266, #267)modal
: добавлена возможность отключать заглушку футера (#265, #269)top-bar
: добавлена возможность выводить ReactNode
в пропсах title
и subtitle
(#265, #269)utils.scss
: миксин focus-visible
декомпозирован - добавлен миксин focus-visible-style
(#263, #264)styling
: утилиты помечены как deprecated, вместо них стоит использовать миксины или обычный css (#263, #264)avatar
: правки для вывода внутри элементов с decoration: underline
(#263, #264)hint
: хук useHintOnHover
больше не содержит задержки но содержит безопасный прямоугольник (#263, #264)Published by krutoo over 1 year ago
SwitcherRow
: теперь по умолчанию не растягивается на всю ширину чтобы область нажатия формировалось текстом ярлыка (#259, #260)DropdownItem
: после обновления не работал dangerouslySetInnerHTML
(#259, #260)modal-overlay
, modal
: попытка исправить отображение на страницах с body { min-width }
(#261, #262)hooks
: хук useOutsideClick
теперь проверят клик на этапе захвата события (спасибо @barabaiiika) (#261, #262)