feat(ui5-flexible-column-layout): public layoutsConfiguration property

[kineticjs]

Added:

• public layoutsConfiguration property to allow the app customize the column proportions per screen size and layout.
• layout-configuration-change event will be fired whenever the layoutsConfiguration property changes
  Also, the layoutsConfiguration fields are now updated whenever the user interactively changes the column proportions by dragging the columns separator.

[dobrinyonkov]

As synced offline, the layoutsConfiguration is now a public property that is being changed by the component upon user interaction, it would help to fire an event and notify the application about those changes.

[dobrinyonkov]

Overall, it works and looks geat. I've only commented on two concerns of mine that we can discuss offline, if needed.

Also, could we add a test for the layout-configuration-change event?

[dobrinyonkov]

Not sure whether this could cause an issue but it seems that this check returns false whenever we have less than 3 columns because of their 0 width.

[kineticjs]

yes, this issue had popped up earlier, this is why the check for width also contained pxWidth > 0

[kineticjs]

Can we discuss which name for the new event is better:

1. layout-configuration-change
2. layouts-configuration-change
   In this PR i named it layout-configuration-change, in analogy to the existing layout-change event. Also, the event fires when the user resizes the column of the current layout he is viewing i.e. upon config change of a single layout.
   However, given that the corresponding public property is layoutsConfiguration (with "s") would the second option be more consistent?

[Copilot]

Pull Request Overview

This PR introduces a new public layoutsConfiguration property to the FlexibleColumnLayout component, allowing applications to customize column proportions for different screen sizes and layouts. A new layout-configuration-change event notifies when these proportions change through user interaction.

Key changes:

• New public API for custom column layout configuration per screen size and layout type
• Automatic updates to layoutsConfiguration when users drag column separators
• Enhanced validation to ensure custom configurations meet minimum width constraints

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/fiori/src/FlexibleColumnLayout.ts	Adds public layoutsConfiguration property, layout-configuration-change event, validation logic for custom layouts, and updates internal handling to support custom configurations
packages/fiori/src/fcl-utils/FCLLayout.ts	Renames getLayoutsByMedia to getDefaultLayoutsByMedia to distinguish from custom configurations
packages/fiori/test/pages/FCL.html	Adds UI and event listeners to track layout configuration changes
packages/fiori/test/pages/FCLCustom.html	Updates test page to use new public layoutsConfiguration property instead of private _layoutsConfiguration
packages/fiori/cypress/specs/FCL.cy.tsx	Adds comprehensive test coverage for the new layoutsConfiguration feature
packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/*	Adds new sample demonstrating layoutsConfiguration usage
packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx	Integrates new sample into documentation

[dobrinyonkov]

Can we discuss which name for the new event is better:

1. layout-configuration-change
2. layouts-configuration-change
   In this PR i named it layout-configuration-change, in analogy to the existing layout-change event.
   However, given that the corresponding public property is layoutsConfiguration (with "s") would the second option be more consistent?

Honestly, I don't have a strong preference for either. Maybe, layout-configuration-change makes more sense semantically as the event detail only includes the layout that chaged. So I personally prefer layout-configuration-change but still choose whichever you prefer.

[kineticjs]

Can we discuss which name for the new event is better:

1. layout-configuration-change
2. layouts-configuration-change
   In this PR i named it layout-configuration-change, in analogy to the existing layout-change event.
   However, given that the corresponding public property is layoutsConfiguration (with "s") would the second option be more consistent?

Honestly, I don't have a strong preference for either. Maybe, layout-configuration-change makes more sense semantically as the event detail only includes the layout that changed. So I personally prefer layout-configuration-change but still choose whichever you prefer.

OK, the current version seems better indeed. Let us keep it this way then.

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.16.0-rc.3 🎉

The release is available on v2.16.0-rc.3

Your semantic-release bot 📦🚀