[Feature Request]: FlexibleColumnLayout with draggable separators

[Neeeko]

Feature Request Description

Right now, the FlexibleColumnLayout only allows resizing column through the ">" arrow buttons which are visible in the column separator.

To make experience more modern, it would be great to be able to drag and drop the column separator itself to determine the width of each columns (same as many other softwares such as Slack, Outlook, VSCode, etc.)

For A11y support, users should be able to focus this separator and increase/decrease the column width using keyboard "<" and ">" keys.

Proposed Solution

Add an additional property to use resize handlers to allow drag and drop with the column separator instead of the default arrow button.

Proposed Alternatives

No response

Organization

SuccessFactors

Additional Context

No response

Priority

Medium

Privacy Policy

• [X] I’m not disclosing any internal or sensitive information.

[yanaminkova]

Hello @SAP/ui5-webcomponents-topic-p I am forwarding this feature request regarding FlexibleColumnLayout with draggable separators to you.

Regards, Yana

[dobrinyonkov]

Internal BLI: BGSOFUIPIRIN-6358

[dobrinyonkov]

Closed with https://github.com/SAP/ui5-webcomponents/pull/9160 , a follow up PR for a public API to configure the layouts columns ratio is in review : #9290

[ilhan007]

Hello @Neeeko these PRs are including incompatible changes and the features will be only available in version 2.0. So, you have to upgrade to version 2.0 to consume it.

For more information how to upgrade: See the blog post See the upgrade guide

Ui5 Web Components For React are currently adopting Ui5 Web Components version 2, so if you depend on Ui5 Web Components For React too, it's best to wait for UI Web Components For React to also release version 2 respectively.