[Feature] PrizmSplitterComponent - кастомизация splitter-gutter

[digital-plant-guard]

Библиотека

• @prizm-ui/components
• @prizm-ui/install
• @prizm-ui/icons
• @prizm-ui/theme

Компонент

PrizmSplitterComponent

Предложение

Сейчас prizm-splitter-gutter имеет фиксированную ширину. Зачастую в приложениях требуется такой слайдер, где ширина gutter'а нулевая и есть только "слайдер" (класс .slider) за который можно тянуть для изменения ширины панелей. Пробовали переопределять стили через ::ng-deep но это приводит к образованию пустой зоны в контейнере, тк ширина панелей контролируется через flex-basis а при вычислении учитывается ширина gutter'a.

Хотелось бы иметь возможность более гибко стилизовать gutter'ы PrizmSplitterComponent и чтобы их ширина корректно учитывалась при формировании панелей.

Пустая зона при модификации стилей вручную:

[digital-plant-guard]

Возможно тут помогут CSS переменные --custom-properties - их удобно использовать и для стилизации и в геттерах для вычислений

[AleksandrSibiakov]

А что если сделать и заэкспортить директиву, которая будет рисовать в определенном месте элемент, за который можно потянуть? По сути гаттер сплиттера станет частным применением этой директивы (т.е. взять и вынести реализацию оттуда).
Тогда можно будет просто эту директиву применить к меню (или его контейнеру, зависит от разработчика), и тем самым управлять его шириной (т.е. не использовать непосредственно сплиттер). Это, кстати, поможет не решать проблему с расчетами ширины, и не надо убирать border который по умолчанию splitter так же провайдит.
@skkonstantin @digital-plant-guard

[AleksandrSibiakov]

@ZurabDev @skkonstantin Подскажите статус по задаче? Нужна ли помощь? (in_progress стоит давно)

Есть еще идея пофиксить эту задачу через использование flex: 1 1 auto для последней панели (или более генерализованное решение - поддержка auto для размера). Применили такое решение локально на уровне CSS - полет нормальный. Правая панель (у нас их 2) занимает все доступное пространство, ей по сути не нужен calc и не надо учитывать вручную ширину border & gutter.
Если интересно, могу сделать PR.

[skkonstantin]

После обсуждения с дизайнерами было принято решение, что splitter-gutter не кастомизируется

[skkonstantin]

Если это прям сильно нужно, можно провести встречу и обсудить

[AleksandrSibiakov]

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

Сплиттер, выходит, в данном случае не применим - он имеет бордер и гаттер, которые не кастомизируются.

[skkonstantin]

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

[AleksandrSibiakov]

Вот я скриншот скинул - это из Figma дизайн-системы. И у нас в приложении так же. Просто видимо тут не надо использовать сплиттер, а какой то свой drag-n-drop механизм. К сожалению в Prizm на текущий момент кроме splitter ничего похожего нет.