core-ds / core-components Goto Github PK

View Code? Open in Web Editor NEW

105.0 105.0 47.0 778.59 MB

License: MIT License

JavaScript 2.36% CSS 13.38% TypeScript 67.22% HTML 0.01% Shell 0.07% Handlebars 0.01% MDX 16.97%

core-components's People

Contributors

Stargazers

Watchers

core-components's Issues

Изменение политики переноса слов в Toast компоненте

Опишите проблему

На данный момент текст в тосте бьется посимвольно. Дизайнер Люда Крылова дала комментарий, что это не по спецификации.

Пример:

Ожидаемое поведение

Бить текст по словам

Ошибка ResizeObserver

На версии 27.13.1 все ок
При обновлении до версии 28.0.0 сборка падает с ошибкой. Используется SSR, React 17.0.2

var ResizeObserver = window.ResizeObserver || _juggle_resize_observer__WEBPACK_IMPORTED_MODULE_5__.ResizeObserver;
                     ^

ReferenceError: window is not defined
    at Module../node_modules/@alfalab/core-components/popover/esm/Component.js (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:10917:22)
    at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
    at Module../node_modules/@alfalab/core-components/popover/esm/index.js (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:11049:71)
    at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
    at Module../node_modules/@alfalab/core-components/select/esm/index.js (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:13641:71)
    at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
    at Module../src/shared/components/card-selector/index.tsx (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:22247:89)
    at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
    at Module../src/shared/pages/dfa-buy-item/index.tsx (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:24687:84)
    at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
^C<i> [webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...
<i> [webpack-dev-server] [HPM] server close signal received: closing proxy server

Уязвимость в зависимости swiper

Опишите проблему

После сканирования SCA, указывает на уязвимость в swiper.
This affects the package swiper before 6.5.1.

Подробное описание
[1] nolimits4web/swiper@9dad273
[2] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARS-1244698
[3] https://snyk.io/vuln/SNYK-JS-SWIPER-1088062
[4] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARSNPM-1244696
[5] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARSBOWER-1244699
[6] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARSBOWERGITHUBNOLIMITS4WEB-1244697

Есть вероятность падения приложения использующего arui-scripts при использовании компонента Select

Опишите проблему

В компоненте Select используется компонент Scrollbar, который использует https://www.npmjs.com/package/simplebar . Если импортировать Select в версии с css-модулями (import { Select } from '@alfalab/core-components/select/cssm'), то хэш начинает генерироваться в момент сборки приложения. В arui-scripts для этого используется https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/getCSSModuleLocalIdent.js который генерирует хэш в формате base64, который включает в себя символы + и /. Либа simplebar в своей работе использует querySelector https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/src/simplebar.js#L181, а querySelector не допускает использования символов + и /, что может привести к падению приложения в случае если для стилей Scrollbar сгенерировался хэш содержащий запрещенные символы

Проблемы с проставление класса у компонента Tab

Указывая компоненту Tab свойство className в dom у элемента класса нет.

Ошибка при использовании компонентов "Global CSS cannot be imported from within node_modules."

Опишите проблему

core-components не работает с NextJS

Шаги для воспроизведения

Установить и настроить библиотеку NextJS и core-components
Сделать импорт любого компонента из core-components

Ожидаемое поведение

Компоненты успешно работают с NextJS

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing `package.json` file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Нелогичное ограничение годов в CalendarInput, если не указан проп maxDate

Опишите проблему

При использовании CalendarInput, если мы не хотим задавать ему максимальную дату maxDate, то при открытии модалки календаря для выбора даты, максимальный год, который там есть - это "текущий год + 1"

Шаги для воспроизведения

у компонента CalendarInput, которому мы не указали проп maxDate, нажать на иконку календаря чтобы открылось модальное окно с выбором даты
Нажать на кнопку выбора года

Ожидаемое поведение

Открывается список годов, в котором нет ограничения по максимальному году

Фактическое поведение

Открывается список годов, в котором максимальный год - это "текущий год + 1"

Добавление класса (пропса className) компонента Plate не к корневому элементу

Компонент Plate имеет над собой некий враппер(в данный враппер добавляется класс rounded например), в свою очередь пропс className компонента Plate добавляется не к этому самому врапперу, а к вложенному в него элементу div, что делает данный пропс в некоторых случаях непригодным для использования (например задать ширину компоненту через css уже не получится).

Modal: disableRestoreFocus

Опишите проблему

Условия: модалка внутри себя имеет контрол (у меня это Link pseudo, который не имеет фокуса, см. #148) вызова другой модалки. Для воспроизведения подойдёт любой контрол без фокуса, например Button который при открытии второй модалки получает прос loading и сохраняет его после закрытия модалки.

Пропсы для второй модалки:

disableRestoreFocus true - восстанавливает фокус к предыдущему активному элементу. допустим это была кнопка, которая вызвала модалку. в базовом кейсе всё работает, когда это именно кнопка с фокусом. Но в кейсе когда это Link pseudo или Button loading, см. результат в конце.

при этом return-focus-with-no-scroll позволяет туда объект для отключения скрола к фокусируемому элементу, у вас нет такой возможности, допустим это потому что поддержка браузеров не очень. но это не решает проблемы

disableRestoreFocus false - не восстанавливает скролл, см. результат ниже.

Результат:
берётся первый фокусируемый элемент на странице(в моём случае предыдущей модалки) и вызывается на нём фокус, и конечно же страница скролится к нему. в моём случае этот элемент - кнопка(крест) закрытия модалки, а он в самом верху. Таким образом после закрытия второй модалки первая всегда проскролена в самый верх, это вообще не круто.

Остальные пропсы модалки для фокуса никак ситуацию не меняют, ну конечно если не отключить этот FocusLock через disableFocusLock у первой модалки. Но это не правильно.

Ожидаемое поведение

При закрытии модалки скролл не должен скролить куда попало если фокус некуда восстановить или мы не хотим его восстанавливать.

P.S. я сомневаюсь что вы что-то с этим сделаете, такое ощущение что это проблема FocusLock при этом в их репе много похожих тем

Button - урезанная зона клика

Опишите проблему

Компонент Button в состоянии :active имеет transform: scale(0.97), который делает невозможным срабатывание клика на краях кнопки.

Шаги для воспроизведения

Перейти на страницу с песочницей
Установить кпоке проп "block" для упрощения
Нажать на кнопку "Нажми на меня" с самого края

Ожидаемое поведение

Событие клика обработано

Дополнительная информация

Нажатие мыши происходит на кнопке, она имеет 100% масштаб, далее срабатывает transform: scale(0.97), который изменяет размер элемента и "mouseUp" происходит уже вне элемента, следовательно, за клик такое поведение не считается.

Core.Components.-.Google.Chrome.2022-07-18.18-36-19_Trim.mp4

Сбивается позиционирование выпадающего списка InputAutocomplete

Опишите проблему

При подключении 2-ух InputAutocomplete к форме происходит смещение привязки позиционирования к нижнему краю Инпута. Происходит промаргивание выпадающего списка в левом верхнем углу экрана, затем список позиционируется корректно. Проблема воспроизводится при размере списков около 100 элементов и при быстром клике на компонент InputAutocomplete (сразу после отрисовки)

Шаги для воспроизведения

Перейти на страницу 'отправил ссылку на ветку Яценко А'
Нажать на 'InputAutocomplete' сразу после появления формы

Ожидаемое поведение

Список из элементов спозиционирован правильно

Чек лист

Внешний вид

Ожидаемый	Фактический
Ожидаемый	Фактический

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

Смартфон (если данных нет оставьте блок пустым):

Дополнительная информация

Длинное слово в PureCell.Text вылезает за пределы контейнера

# Опишите проблему
В компоненте
<PureCell.Text titleColor='primary' view='component'>
{ someLongWord }
</PureCell.Text>
при наличии длинного слова и узкого вьюпорта слово не разбивается, но выходит за рамки контейнера.
Предположительным решением видится добавление стилей word-break: break-word к PureCell.Text или родительскому PureCell.

Шаги для воспроизведения

Открыть песочницу с PureCell.Text и rowLimit={undefined} и положить внутрь очень длинное слово.

Ожидаемое поведение

Слово будет разбито и перенесено на след. строку если оно выходит за рамки контейнера.

Чек лист

Тесты
Документация

Внешний вид

Ожидаемый	Фактический
Ожидаемый	Фактический

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

Смартфон (если данных нет оставьте блок пустым):

Дополнительная информация

Некорректная работа компонента Typography.Text

Опишите проблему

Компонент Typography.Text c переданным пропом view="caps" отображает текст с неверным font-weight: normal, для обхода приходится использовать хак в виде добавления пропа weight="medium"

Шаги для воспроизведения

Убрать проп weight="medium" из компонента

Ожидаемое поведение

Текст должен отображаться с font-weight: 500

Обновить ссылки на дизайн систему

Опишите проблему

В сторибуке не работают ссылки

Шаги для воспроизведения

Перейти на страницу любого компонента, например: Компонент
Нажать на иконку фигмы

Ожидаемое поведение

Ссылки работают

CalendarInput не применяется значение, если присутствует ошибка

Опишите проблему

Если присутствует ошибка, в мобильном виде календаря (при размере экрана <1000пикс.) нельзя выбрать заново корректное значение (отсутствует кнопка "выбрать")

В компонент не передается value, если значение невалидно
https://github.com/core-ds/core-components/blob/master/packages/calendar-input/src/Component.tsx#L376
Т.к. наличие ошибки считает инпут невалидным https://github.com/core-ds/core-components/blob/master/packages/calendar-input/src/Component.tsx#L220

Ожидаемое поведение

Можно применить новое корректное значение, если присутствует ошибка

Бразуер Chrome, v. 105

Не работают некоторые пропсы в компоненте TooltipResponsive

Опишите проблему

В зависимости от размера экрана компонент TooltipResponsive рендерит либо компонент Tooltip, либо компонент BottomSheet с кастомным target. Во втором случае в target не пробрасываются пропсы targetClassName и targetRef.

Ожидаемое поведение

В адаптивном варианте в target пробрасываются те же самые пропсы, что и в десктопном варианте.

Добавить пропс `onBlur` в компоненты RadioGroup и CheckboxGroup

Описание

Предлагаю добавить компонентам RadioGroup и CheckboxGroup пропс onBlur.

При работе с Formik есть необходимость обрабатывать событие blur. Это необходимо для определения состояния touched (было ли посещено поле).

Поведение

Можно отлавливать всплывающее событие blur в компонентах RadioGroup и CheckboxGroup, либо прокидывать пропс onBlur в каждый input внутри группы.

Некорректная работа с SSR

Опишите проблему

Доброго дня! При использовании фреймворка Next JS на одном из проектов, внутри компании, обнаружил вот такую интересную штуку. Намеренно или нет, в компонентах используется useLayoutEffect, что приводит к некорректной отрисовке их на сервере. Видимых результатов не наблюдается, но, возможно, я не так хорошо знаю библиотеку.

Ожидаемое поведение

Кажется, что отрисовка должна происходить корректно в любой среде

Внешний вид

Не рендерится контент CalendarMobile на ios 13 и ниже

Опишите проблему

При открытии моб. календаря на платформе ios 13 или ниже рендерится только шапка и подвал. Контент календаря не рендерится в DOM.

Шаги для воспроизведения

Открыть мобильную версию календаря на платформе ios 13 или ниже(воспроизводится на browserstack.com).
(https://core-ds.github.io/core-components/master/?path=/docs/%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-calendar--calendar)
Нажать на кнопку 'Открыть календарь'.
В появившемся окне не отображается контент календаря.

Ожидаемое поведение

При нажатии на кнопку 'Открыть календарь' должно появится модальное окно с к месяцами и днями календаря

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

Смартфон (если данных нет оставьте блок пустым):

Device: iPhone 8-11
OS: iOS 13 и меньше
Browser: Chrome, Safari

Дополнительная информация

Последний тег в модалке календаря это пустой div с data-test-id="virtuoso-item-list", в котором должны быть месяцы и дни.
При проверки выяснилось, что данные передаются в компонент корректно. При поиске в сети нашел два похожих ишью
petyosi/react-virtuoso#461
petyosi/react-virtuoso#526
где авторы советовали применить в проекте полифил для ResizeObserver.
В проекте уже исп-ся полифил @juggle/resize-observer для ResizeObserver, в частности для компонента BaseModal, который исп-ся для отображения моб. календаря.
Пытался исп-ть другой полифил resize-observer-polyfill, но безрезультатно.

Кастомные инпуты для компонента InputAutocompleteMobile

Описание

У нас есть компонент https://core-ds.github.io/core-components/master/?path=/docs/%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-inputautocomplete--input-autocomplete-mobile
инпут внутри данного компонента текстовый, в проекте есть места где нужен кастомный инпут, например для ввода телефона

Так же в проекте есть места, где инпут, при клике по которому вызывается данные компонент, тоже кастомный (например перевод по номеру тлф)

думаю InputAutocompleteMobile нужно доработать, добавив пропсы для кастомных инпутов

Ошибка сборки компонента таблицы trow

Опишите проблему

В своей сборке использую компонент таблицы trow, но в css файлах есть вложенность, из-за чего сборка крашится, в других компонентах такое не наблюдается.

Шаги для воспроизведения

В готовом пакете перейти в файл стилей компонента trow. Проблемный участок кода
.table__withoutBorder_hjusi { td { border: none; } }

Ожидаемое поведение

Без вложенностей

Исчезающий Alert

Описание

Предлагаю добавить новый пропс компоненту Alert - autoCloseDelay, который бы позволял автоматически скрывать Alert по истечении определенного времени

Поведение

Поведение абсолютно идентично работе компонента Toast вместе с autoCloseDelay

[Collapse] expanded={true} - предложение

Описание

Сейчас, при установленном expanded={true} (песочница), компонент открывается с задержкой. Кажется, что это не совсем корректное поведение, так как это может выглядеть некрасиво. Эдж кейс - скачущая, при загрузке, страница.

Было бы здорово, чтобы компонент, при инициализации с expanded={true}, открывался без анимации

Таймер у Confirmation

Опишите проблему

У компоненты Confirmation когда таймер с экраном временной блокировки заканчивается и ставим в функции onTempBlockFinished переход на начальный экран, то таймер с повторной отправкой кода по смс зависает

Шаги для воспроизведения

У компоненты Confirmation в функции onTempBlockFinished ставить state и screen 'INITIAL'
Подождать окончания таймера у экрана с критической ошибкой ( лучше сделать время ожидание поменьше, чтобы не ждать 24 часа )
3 Смотреть на таймер обратного отсчета

Ожидаемое поведение

Таймер дойдет до нуля. но он зависает

Общие стили Typography

Опишите проблему

Если применить параметр для "weight" для компонента Typography.TitleResponsive, то стиль не применится.
Для компонента Typography.Title решили проблему продублировав общие стили в файл компонента. Думаю что не совсем корректное решение, мне кажется надо поиграться с приоритетами и не дублировать стили.

Шаги для воспроизведения

Добавьте компонент Typography.TitleResponsive и примените к нему свойство "weight='bold'".

Ожидаемое поведение

Стили толжны изменяться при изменении свойст компонента.

Тип children в PureCell.Main не пропускает дочерние элементы внутри условий

Так получается очень неудобно(

            <PureCell.Main> <--- ошибка { children: ("" | Element | undefined)[]; }' is not assignable to type MainElement
                <PureCell.Text titleColor='primary' view='component'>
                    {title}
                </PureCell.Text>
                {subTitle && <PureCell.Text titleColor='secondary' view='primary-small'>
                    {subTitle}
                </PureCell.Text>}
            </PureCell.Main>

Состояние валидации CalendarInput / CalendarRange

Описание

CalendarInput и CalendarRange имеет внутреннюю валидацию на корректное значение, состояние которое нельзя получить в родительском компоненте, для того, чтобы не делать дублирование валидации перед какими-то действиями, например сабмит формы - было бы неплохо получать флаг error к примеру в обработчиках, либо отдельным коллбэком. (новый пропс onError, к примеру)

Поведение

При введении 99.99.9999 в CalendarInput / CalendarRange по внутренним проверкам переходит в состояние error = true. Кроме компонента это состояние больше никому недоступно. Исходя из этого нужно делать дополнительную валидацию на уровне родителя.

Чек лист

Тесты
Документация

SidePanel: элементы из `SidePanelComponent.Content` над `SidePanelComponent.Header`

Опишите проблему

Если SidePanelComponent.Content имеет скролл и там есть элементы с "non-static position", то они находятся над SidePanelComponent.Header.

Шаги для воспроизведения

Добавить вверху компонента SidePanelComponent.Content элемент с position: relative и проскролить.

Ожидаемое поведение

Элементы из SidePanelComponent.Content не должны быть выше по Z-оси, чем SidePanelComponent.Header.

Чек лист

Фикс
Тесты

Анимация компонента Skeleton в Safari дёргается

Опишите проблему

Анимация компонента Skeleton в Safari работает не так, как задумано

Шаги для воспроизведения

Использовать компонент Skeleton
или, в сторибуке
Заменить в packages/skeleton/src/docs/description.mdx обёртку на <React.Fragment>

Ожидаемое поведение

Анимация работает также, как в Chrome - плавно, без миганий

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):
• OS: MacOS 12.4
• Browser: Safari
• Version: 15.5

Видео

Screen.Recording.2022-07-07.at.11.19.54.AM.mov

Modal: окно закрывается при скроле

Опишите проблему

Модалка закрывается при скроле полосы прокрутки мышкой, даже при нажатии.
v27.9.0 - ок
v28.2.6 - баг

Шаги для воспроизведения

открыть модалку (мобайл\декстоп не важно)
добавить контента чтобы появился скрол
потянуть мышкой за полосу скрола (при скроле колесом всё ок)
модалка закроется

Ожидаемое поведение

Модалка не закрывается

React 18 migration

Описание

Предлагаю подготовить компоненты для использования с React 18. По большей части это правки в типах, т.к. начиная с 18-й версии FC больше не содержит в себе children

Список изменений

https://ru.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

Список компонентов

Не работает Modal в IE

Опишите проблему

При открытии модального окна возникает ошибка в IE 7-11 после обновления core до актуальной версии

Ожидаемое поведение

При нажатии на кнопку должно появится модальное окно в IE 7-11

Чек лист

Тесты
Документация

Внешний вид

Ожидаемый	Фактический

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

OS: Windows
Browser: IE
Version: 7-11

Смартфон (если данных нет оставьте блок пустым):

Дополнительная информация

Доработать dev окружение для работы на windows

С недавних пор зачастую новым сотрудникам дают windows компы

Я и сам попробовал поработать с проектом на windows из под powershell, но натнулся на вот проблемные эти места

https://github.com/core-ds/core-components/blob/master/package.json#L42
Сеттинг переменной окружения - https://github.com/core-ds/core-components/blob/master/package.json#L40

Вероятно есть еще не одно место с такими windows-проблемками

предлагаю добавить полноценную поддержку windows в core-components!

Vars: Добавить новый цвет в палитру для унификации

Описание

Предлагаю добавить новый цвет в палитру цветов - #e5ecf3

Поведение

В мобильной теме клика есть новый цвет #e5ecf3, для предотвращения деунификации в кодобазе

Чек лист

Тесты (не нужны)
Документация (не нужна)

Внешний вид

Технические требования

Десктоп (если данных нет оставьте блок пустым):

Смартфон (если данных нет оставьте блок пустым):

Дополнительная информация

Сейчас (27.12.2022) в проекте клика встречается 16 появлений этого цвета (можете проверить сами), который никак не задекларирован во внутренней палитре core-components

Изменение несрочное, но зато добавило бы больше единообразия кодобазе и помогло бы избежать деунификации в будущем (когда будет много кастомных цветов не из палитры)

Используется только для тачевых компонентов/лейаутов

Как понимаю изменить надо где-то здесь, если подскажете как именно в контексте миксинов, могу и сам PR-чик закинуть 👀
https://github.com/core-ds/core-components/blob/master/packages/themes/src/mixins/mobile.css

UPD: Со своим дизайнером (Ю.Кудрявцевой) согласовывал этот момент - действительно нужен отдельный цвет, существующие не подходят под макет проекта

Stage - 0

Неккоректный тип пропса currency в AmountInput

Опишите проблему

core-components v29.0.0
в типе AmountInputProps свойство currency имеет тип CurrencyCodes, а в пропсах AmountInput свойство currency -- union литерал : "ALL" | "AFN" | "ARS"...

Из-за различия в типах, не всегда получается использовать проп currency без костылей с приведением типов

Ожидаемое поведение

Типы пропсов компонента соответствуют AmountInputProps

Дополнительная информация

Пример ошибки
TS2345: Argument of type '"ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | ... 95 more ... | "A33"' is not assignable to parameter of type '"ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | ... 91 more ... | "ZWD"'.
Type '"A98"' is not assignable to type '"ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | ... 91 more ... | "ZWD"'.

[SliderInput] - Ошибка верстки

Опишите проблему

При передаче пропса error едет верстка. А именно исчезают pips и между инпутом и ошибкой появляется огромный отступ.

Шаги для воспроизведения

Перейти на страницу SliderInput в Storybook
Передать в первый пример проп error='Какая нибудь ошибка' или hint='Какая нибудь подсказка'

Ожидаемое поведение

Pips остаются + появляется ошибка либо pips исчезают и на их месте появляется ошибка

Внешний вид

Фактический вид без ошибки	Фактический вид с ошибкой

Десктоп:

OS: MacOS
Browser: Chrome
Version: 104

ModalResponsive при переходе breakpoint сбрасывает состояние внутри ModalResponsive.Content

Опишите проблему

При переходе через breakpoint для компонента ModalResponsive состояние его содержимого сбрасывается, при использовании форм и прочего.

Шаги для воспроизведения

Открыть модалку
выбрать чекбокс (или изменить любой активный элемент)
изменить размер для перехода через breakpoint

Ожидаемое поведение

Состояние активных элементов должно сохраниться

Внешний вид

Ожидаемый	Фактический
состояние чекбокса сохранено	состояние чекбокса сброшено

Тестовый стенд

любой

Дополнительная информация

Видео https://disk.yandex.ru/i/Hnx-2x9khdtvEg

Пример для песочницы

function Example() {
   
    const [checked, setChecked] = React.useState(false);
    const handleChange = () => setChecked(!checked);

    return (
        <Checkbox
            onChange={handleChange}
            checked={checked}
            label='Согласен с условиями'
            hint='Соглашайтесь, будьте любезны'
        />
      )
}

render(() => {
    const [open, setOpen] = React.useState(false);
    const handleModalOpen = () => setOpen(!open);
    
    return (
        <React.Fragment>
            <Button type='button' size='xs' onClick={handleModalOpen}>
                Открыть модалку
            </Button>
            <ModalResponsive open={open} onClose={handleModalOpen} size='m'>
                <ModalResponsive.Header hasCloser={true} />
                <ModalResponsive.Content>
                    <Typography.Title tag='div' view='small'>
                        Пример модалки с чекбоксом
                    </Typography.Title>
                    <br />
                    <Example />
                </ModalResponsive.Content>
                <ModalResponsive.Footer>
                    <Button view='primary' size='s' onClick={handleModalOpen}>
                        Понятно
                    </Button>
                </ModalResponsive.Footer>
            </ModalResponsive>
        </React.Fragment>
    );
});

Ширина селектора стран в Сафари

Опишите проблему

Неверная ширина селектора в Сафари

Шаги для воспроизведения

Перейти на страницу из webtest с селектором стран из Сафари
Увидеть что ширина селектора меньше чем ширина инпута

Ожидаемое поведение

Ширина селектора равна ширине инпута

Смартфон (если данных нет оставьте блок пустым):

Browser: Safari

Улучшения и исправления для PureCell

Проблема

При использовании PureCell в веб-версии приложения были найдены некоторые недочеты. Предлагаю их исправить

PureCell.AmountTitle

ошибка: обязательно надо указывать оба параметра minorUnits: 100, minority: 100. Исправить: сделать оба параметра необязательными
ошибка: в параметр amount попадают все свойства Amount, в том числе и класс. Исправить: объединить тип компонента с AmountProps
требование от клика: для минорной части(в целом для суммы в заголовке) надо --amount-minor-part-font-weight: 500 (https://www.figma.com/file/OiFlIdSpmFYZ5zsFGWA3TD/Web-%3A%3A-Alfa-Online-Components?node-id=43968%3A229857). Исправить: исправить css переменную в самом компоненте или добавить пропсу. Ждет подтверждения от дизайнера

PureCell.Addon

дополнение: добавились значения для выравнивания по вертикали 'top' | 'center' | 'bottom'. Исправить: добавить значения
ошибка: не хватает выравнивания текста по правому краю. Исправить: добавить стили выравнивания текста

PureCell.Text

ошибка: у части title есть отступ справа, даже если не использовать value (из-за него выравнивание при direction='vertical' не четко по центру), сохраняется span для value. Исправить: если не указан value, не добавлять отступ и не выводить теги
улучшение: при добавлении свойства word-break: break-all; текста отображается больше. Исправление: добавить свойство для обрезания текста в одну строчку

PureCell.Category

дополнение: добавилась иконка чека (опционально withReceipt). Исправление: добавить опцию, другое вариант -- сделать отдельный компонент. Ждет подтверждения дизайнера
улучшение: при добавлении свойства word-break: break-all; текста отображается больше. Исправление: добавить свойство для обрезания текста в одну строчку

PureCell.Amount

вопрос от клика: можно ли включить по дефолту view: 'withZeroMinorPart', transparentMinor: true. Решение: кажется, что никак. Не стоит указывать дефолтные значения для опциональных параметров. Но может появится идея?
ошибка: обязательно надо указывать оба параметра minorUnits: 100, minority: 100. Исправить: сделать оба параметра необязательными
ошибка: в параметр amount попадают все свойства Amount, в том числе и класс. Исправить: объединить тип компонента с AmountProps, параметр view переименовать в textView

PureCell.Comment -> Comment

ошибка: нельзя передать строку в children. Исправление: исправить тип
дополнение: добавилось опциональное ограничение по строкам rowLimit?: 2 | 5; Исправление: добавить опцию, по-умолчанию ставить 2

base-modal: Server Error - window is not defined

Опишите проблему

v27.9.0 работает ок
v28.0.0 ошибка

Server Error
ReferenceError: window is not defined

Call Stack
eval
node_modules\@alfalab\core-components\base-modal\esm\Component.js (56:21)

Дополнительная информация

next.js

file-upload-item: Не работает подсказка по умолчанию при ошибке

Не работает подсказка по умолчанию, если пропс uploadStatus = ERROR, и нет пропса error.
Вы добавили исключающие друг друга условия.

core-components/packages/file-upload-item/src/Component.tsx

Line 181 in 3d23f9d

 uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error; 

Сдейте выбор Календаря независимо от экрана

Надо что-то придумать с этой строчкой. При уменьшения экрана, Calendar превращается в CalendarMobile. И никак этим нельзя управлять

core-components/packages/date-range-input/src/Component.tsx

Line 196 in 43b6be9

 const CalendarComponent = view === 'desktop' ? Calendar : DefaultCalendarMobile; 

Скачки контента и скролла при закрытии сайд-панели

Опишите проблему

на интеграции альфа-онлайн в браузере сафари при закрытии сайд-панели наблюдаются скачки скролла и контента

Тестовый стенд

https://web-test.moscow.alfaintra.net/dashboard

Десктоп (если данных нет оставьте блок пустым):

OS: MacOS
Browser: Safari
Version: 15.5

2022-11-21.12-23-58.mp4

overflow: hidden не удаляется компонентом base-modal и производными от него

Привет! Обнаружили такую историю.

Дано:
Компонент: base-modal
Cостояние: { open: true }

Суть проблемы:
Если изменинть пропс open на false , а затем, до того как отработает handleExited, на true , то получим, что у container (коим будет document.body, если не передавать его явно) будет зафиксирован overflow: hidden .
Происходит это из-за этого момента.

Кейсы когда такое можно споймать:
При подписании у нас отображается модалка с ошибкой и кнопкой повторить, если, например, мы получим 500 ошибку (таймаут и прочее) на одном из этапов. Однако, мы можем продолжить подпись и запросить информацию повторно нажав кнопку "повторить", и вот тут, если мы при повторном вызове получим очередную ошибку быстрее чем модалка закроется, то мы получим вечный overflow: hidden на body.

Неудобно скроллить табы (Tabs)

Компонент Tabs устроен таким образом, что если табы не помещаются в область видимости, то появляется возможность скроллить их внутри контейнера.

Для красоты полоса прокрутки скрыта, поэтому пользователь может прокручивать табы только с помощью жестов (на трекпаде или сенсорном экране) либо с помощью колесика мыши при зажатой клавише shift. Это очень неудобно, к тому же совсем неочевидно, что эти табы можно скроллить.

Я бы предложил добавить кнопки, которые должны появляться автоматически, если есть возможность скроллить табы. Нажатие на кнопку будет прокручивать контейнер на несколько табов вперед или назад. За эталон можно взять MUI Tabs.

Проблема с анимацией переключения месяцев в календаре

Опишите проблему

Если в компоненте использующем Calendar с пропсой selectorView='month-only' по событию onMonthChange происходит больше одного ререндера, то анимация переключения месяцев всегда перематывает вправо

Screen.Recording.2022-12-15.at.16.50.56.mov

Шаги для воспроизведения

Подготовил демку

Ожидаемое поведение

Переключение месяцев анимируется правильно

Чек лист

Тесты
Документация

Внешний вид

Ожидаемый	Фактический
Ожидаемый	Фактический

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

OS: MacOS
Browser: Safari
Version: 10

Смартфон (если данных нет оставьте блок пустым):

Device: iPhone 6
OS: iOS 10
Browser: Chrome
Version: 65

Дополнительная информация

Link: pseudo

Описание

Предлагаю доработать пропс pseudo.
Как сейчас: красивая картинка, но без возможности выбора через таб + проблемы с линтом.

Поведение

По хорошему в режиме pseudo ссылка не может быть тегом a и должна быть button. Да, сейчас можно прокинуть Component='button', тогда у кнопки вылезают стили дефолтной кнопки

, которые нужно вручную убирать. Но это ладно ещё.
Но также срабатывает алерт от линта на правило anchor-is-valid, а это уже исправить можно только отключением правила в строке. Тут видимо нужно пофиксить типы.
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/1c06306ede29bab6b0cdc1915dd6dcd6e847356b/docs/rules/anchor-is-valid.md
и что хуже, и уже затрагивает пользователей, когда ссылка pseudo в ней обычно нет href, потому что он не надо, но тогда такой элемент не получает фокус, и его нельзя выбрать через таб. Что в принципе хотелось бы видеть для интерактивного элемента. Как и outline, который тут тоже не предусмотрен

в компоненте sidepanel в header при скролле карта перекрывает title

#в компоненте sidepanel в header при скролле карта перекрывает title

Шаги для воспроизведения

Перейти в сторибук виджетов NewclickOperationsFilters '...'
проскролить

Confirmation: Выделение последний цифры

Опишите проблему

При ошибке после ввод смс выделяется последняя цифра

Шаги для воспроизведения

Неправильно ввести код от смс в Confirmation

Ожидаемое поведение

Показывает ошибку, код становиться красным, placeholder на последнюю цифру
Реальный - выделяется последняя цифра

core-ds / core-components Goto Github PK

core-components's People

Contributors

Stargazers

Watchers

Forkers

core-components's Issues

Опишите проблему

Ожидаемое поведение

Опишите проблему

Опишите проблему

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

🚨 The automated release from the master branch failed. 🚨

Missing package.json file.

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Фактическое поведение

Опишите проблему

Ожидаемое поведение

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Дополнительная информация

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Чек лист

Внешний вид

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

Смартфон (если данных нет оставьте блок пустым):

Дополнительная информация

Шаги для воспроизведения

Ожидаемое поведение

Чек лист

Внешний вид

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

Смартфон (если данных нет оставьте блок пустым):

Дополнительная информация

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Опишите проблему

Ожидаемое поведение

Опишите проблему

Ожидаемое поведение

Описание

Поведение

Опишите проблему

Ожидаемое поведение

Внешний вид

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Тестовый стенд

Десктоп (если данных нет оставьте блок пустым):

Смартфон (если данных нет оставьте блок пустым):

Дополнительная информация

Описание

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Описание

Поведение

Описание

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Опишите проблему

Шаги для воспроизведения

Ожидаемое поведение

Описание

Поведение

🚨 The automated release from the `master` branch failed. 🚨

Missing `package.json` file.