Skip to content

fix: remove unnecessary z-index - #3597

Draft
lossir wants to merge 3 commits into
nextfrom
IF-2157-weird-z-index
Draft

fix: remove unnecessary z-index#3597
lossir wants to merge 3 commits into
nextfrom
IF-2157-weird-z-index

Conversation

@lossir

@lossir lossir commented Feb 11, 2025

Copy link
Copy Markdown
Member

Проблема

У Инпута с пропом error меняется z-index. Из-за чего компонент может начать перекрывать элементы, которые не перекрывал до получения ошибки.
image

Решение

При попытки избавить от смены z-index у Инпута, обнаружилось много подобных z-индексов в других компонентах.
И по иронии, именно в Инпуте нельзя просто так убрать z-index без рефакторинга — падают тесты c Group.

Тесты в других компонентах проблем не выявили.

✅ - надо оставить
❌ - можно удалить
🟡 - надо подумать

🤔 class z-index пояснение
MonthView (Calendar)
headerSticky 2 Перекрывает дивы (месяцы), отрендеренные ниже по вёрстке
Checkbox
input -1 Следующий див и без этого перекрывает нативный инпут
Radio
input -1 Следующий див и без этого перекрывает нативный инпут
Textarea
textarea&focus 2 Не понял зачем
placeholder 3 Используется для полифила, чтобы оставаться сверху, когда компонент в фокусе
counter 3 Тоже нужен, чтобы перекрывать компонент в фокусе
Input
🟡 focus 2 Широкая обводка перекрывает элементы, отрендеренные ниже. Заметно при использовании Group, когда соседние элементы стоят впритык. Так просто не удалить
🟡 warning 2 ☝️
🟡 error 2 ☝️
Button
focus 2 Вероятно причина похожа на Инпут, т.к. компонент тоже используется в Group
loading 10 Не понял зачем
Modal
centerContainer 10 Не понял зачем
🟡 fixedHeader&:after -1 Кажется это старая вёрстка разделителя, которая в теме22 переехала в ModalSeparator. Можно удалить в мажоре вместе с другими стилями и переменными
🟡 fixedFooter&:before -1 Кажется это старая вёрстка разделителя, которая в теме22 переехала в ModalSeparator. Можно удалить в мажоре вместе с другими стилями и переменными
Menu
🟡 wrapper 1 Не понял зачем. Но там и к другим css-правилам есть вопросы, поэтому не стал удалять, т.к. мало тестов
DatePicker
calendarWrapper 1000 Не понял зачем + правило не применяется, т.к. дефолтный position static
PasswordInput
capsLockDetector 9 Не понял зачем
ScrollContainer
🟡 scrollBar 200 Перекрывает контент, т.к. рендерится выше. Значение будто с потолка, вероятно можно вместо рендерить скроллбар после списка
SidePage
body 0 Быть ниже футера
🟡 headerFixed -1 Кажется это старая вёрстка разделителя, а в теме22 здесь тоже используется ModalSeparator. Можно удалить в мажоре вместе с другими стилями и переменными
footer 10 Быть выше разного содержимого в body. Не стал удалять, т.к. мало тестов
🟡 footerFixed -1 Кажется это старая вёрстка разделителя, а в теме22 здесь тоже используется ModalSeparator. Можно удалить в мажоре вместе с другими стилями и переменными
InternalMaskedInput
inputMask 5 Это старый Input с маской, который планируем удалить в мажоре. Лучше не трогать до этого
MobilePopup
container 100000 Перекрывает фон (bg)
bg 9999 Должен быть под контейнером. Можно удалить и просто поменять местами с контейнером

Ссылки

Чек-лист перед запросом ревью

  1. Добавлены тесты на все изменения
    ⬜ unit-тесты для логики
    ⬜ скриншоты для верстки и кросс-браузерности
    ⬜ нерелевантно

  2. Добавлена (обновлена) документация
    ⬜ styleguidist для пропов и примеров использования компонентов
    ⬜ jsdoc для утилит и хелперов
    ⬜ комментарии для неочевидных мест в коде
    ⬜ прочие инструкции (README.md, contributing.md и др.)
    ⬜ нерелевантно

  3. Изменения корректно типизированы
    ⬜ без использования any (см. PR 2856)
    ⬜ нерелевантно

  4. Прочее
    ⬜ все тесты и линтеры на CI проходят
    ⬜ в коде нет лишних изменений
    ⬜ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant