fix(SidePage): update issues with ignoreBackgroundClick and blockBackground props

[SchwJ]

Проблема

Внешне: При динамическом изменении ignoreBackgroundClick и blockBackground, сайдпейдж "зависал", все кнопки оказывались недоступными.

Выяснилось, что проблемы здесь даже две:

1. При прокидывании новых значений ignoreBackgroundClick и blockBackground сайдпейдж не перерендеривался.
2. Вуаль отображалась над сайдпейджем и закрывала его.

Решение

1. При получении нового blockBackground вызывается componentDidUpdate и state.hasBackground присваивается значение blockBackground.

2. Вместо одинакового ZIndex у вуали и у тела сайдпейджа, создала:

• ZIndex всему сайдпейджу (аналогичный тому, что был у тела), чтобы сайдпейдж отображался корректно с другими элементами.
• Отдельные ZIndex'ы вуали и телу сайдпейджа, чтобы они правильно позиционировались между собой
  Просто создать ZIndex'ы вуали и телу сайдпейджа без ZIndex'а для всего сайдпейджа было нельзя, так как при таком сценарии сломалась бы последовательность из нескольких сайдпейджей -- все вуали были бы ниже всех сайдпейджей.

Добавила тест на динамическое переключение ignoreBackgroundClick и blockBackground

Ссылки

IF-2050

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

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

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

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

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

[zhzz]

Обсудили, что этот вариант тоже не соответствует корректной логике накладывания сайдпейджей. Нужно пересчитывать hasBackground для всех открытых сайдпейджей.

В процессе составления тест-кейса была найдена еще одна особенность поведения, похожая на баг. Она состоит в том, что темная вуаль может появиться только у самого нижнего SidePage. Если у этого SidePage нет пропа blockBackground, а какого-то из тех что выше него - есть, то вуаль не появится. Стоит обсудить это с дизайнерами. А также то, что вуаль появляется у самого нижнего, а не верхнего SidePage.

Код воспроизведения в новой доке.

render(() => {
  const [opened_1, setOpened_1] = React.useState(false);
  const [opened_2, setOpened_2] = React.useState(false);
  const [block, setBlock] = React.useState(true);

  function open_1() {
    setOpened_1(true);
  }
  function close_1() {
    setOpened_1(false);
  }
  function open_2() {
    setOpened_2(true);
  }
  function close_2() {
    setOpened_2(false);
  }
  function toggle_block() {
    setBlock(!block);
  }

  return (
    <div>
      <Button onClick={open_1}>Open SidePage 1</Button>

      {opened_1 && (
        <SidePage onClose={close_1} blockBackground={block} width={800}>
          <SidePage.Header>SidePage 1</SidePage.Header>
          <SidePage.Body>
            <SidePage.Container>
              <Button onClick={open_2}>Open SidePage 2</Button>
            </SidePage.Container>
          </SidePage.Body>
        </SidePage>
      )}

      {opened_2 && (
        <SidePage onClose={close_2} blockBackground={true} width={800}>
          <SidePage.Header>SidePage 2</SidePage.Header>
          <SidePage.Body>
            <SidePage.Container>
              <Button onClick={toggle_block}>
                Toggle SidePage 1 blockBackground: {String(block)}
              </Button>
            </SidePage.Container>
          </SidePage.Body>
        </SidePage>
      )}
    </div>
  );
});

[lossir]

Кажется, что достаточно этой доработки + перенести пропы с текущего ZIndex.
Т.е. если обернуть весь компонент в один ZIndex, а остальные заменить на обычные дивы, то всё должно работать так же.

[SchwJ]

Скрины этого теста пришлось обновить, так как в нем блокировка идет на все SidePage, а значит край нижнего тоже должен затемняться