consta-design-system / uikit

https://consta.design/libs/uikit
MIT License
226 stars 92 forks source link

Popover: странное поведение при позиционировании с выравнивнием #3660

Open ZettZet opened 1 month ago

ZettZet commented 1 month ago

Описание бага Лендинг примерно следующий:

.header {
  width: 100vw;
  height: 40px;
  border-bottom: 1px solid black;
}

.content {
  width: 153px;
  border: 1px solid hotpink;
  margin-inline: 15px;
}
import { Button } from '@consta/uikit/Button';
import { Popover } from '@consta/uikit/Popover';
import { useRef, useState } from 'react';
import './App.css';

function App() {
  const header = useRef(null);
  const [show, setShow] = useState(false);

  return (
    <>
      <header ref={header} className="header">
        Какой-то заголовок
        <Button label="Кнопка" onClick={() => setShow((prev) => !prev)} />
      </header>
      {show && (
        <Popover
          className="content"
          anchorRef={header}
          direction="downStartRight"
          placeholder={undefined}
          onPointerEnterCapture={undefined}
          onPointerLeaveCapture={undefined}
        >
          Я какой-то контент
        </Popover>
      )}
    </>
  );
}

export default App;

image

https://github.com/consta-design-system/uikit/assets/55871784/1e5d8695-123e-4970-830e-135e6f5db9a8

Как воспроизвести баг (опционально)
См. описание

Ожидаемое поведение (опционально)
Судя по пропсам и стилям, Popover:

Версия Consta Kit 5.3.1

Параметры софта на компьютере:

Дополнительная информация Можно решить это, добавив возможность выбирать то, по каким координатам происходит позиционирование: top-bottom, left-right. Визуально не будет отличий, но появится возможность делать отступы с разных сторон в зависимости от позиционирования и выравнивания.