[FEQ] aum/FEQ-1654/pagelayout-improvements-remove-right-content-flex

[aum-deriv]

Changes

Remove the right section prop

• Remove the right section prop and its corresponding rendering logic as it is decided that the right-hand side of the content will always be the part of the content. This is done to reduce the complexity for rendering the right-hand side as usually the content rendered in the content section has the control to change the behavior of the content on its right-hand side.

Fix: Content flex

• Applying flex: 1 for the content section so that it can stretch to the entire width available to it.

Screen.Recording.2024-01-31.at.5.27.10.PM.mov

[shayan-deriv]

@aum-deriv need your opinion on this. how about instead of limit the layout to only have two columns we have sth more general where the consumer can pass as many columns as they need and control the style with props.

for instance this:

<Layout>
    <Column flex={1} classname="sidebar">...</Column>
    <Column flex={2} classname="content">...</Column>    
</Layout>

<Layout>
    <Column flex={1} classname="sidebar">...</Column>
    <Column flex={2} classname="content">...</Column>    
    <Column flex={1} classname="left-sidebar">...</Column>  
</Layout>

<Layout>
    <Column flex={1} classname="sidebar">...</Column>
    <Column flex={1} classname="content">...</Column>    
    <Column flex={1} classname="sidenote">...</Column>  
</Layout>

then the consumer can decide which one is suitable for their case. for instance maybe the accounts team want to use context to handle the shared data between content and sideNote then they can go with the second example or the cashier decide to use the first one.

what do you think guys?
@ali-hosseini-deriv @markwylde-deriv @aizad-deriv @amina-deriv @wojciech-deriv

[azmib-developer]

@aum-deriv need your opinion on this. how about instead of limit the layout to only have two columns we have sth more general where the consumer can pass as many columns as they need and control the style with props.

for instance this:

<Layout>
    <Column flex={1} classname="sidebar">...</Column>
    <Column flex={2} classname="content">...</Column>    
</Layout>

<Layout>
    <Column flex={1} classname="sidebar">...</Column>
    <Column flex={2} classname="content">...</Column>    
    <Column flex={1} classname="left-sidebar">...</Column>  
</Layout>

<Layout>
    <Column flex={1} classname="sidebar">...</Column>
    <Column flex={1} classname="content">...</Column>    
    <Column flex={1} classname="sidenote">...</Column>  
</Layout>

then the consumer can decide which one is suitable for their case. for instance maybe the accounts team want to use context to handle the shared data between content and sideNote then they can go with the second example or the cashier decide to use the first one.

what do you think guys? @ali-hosseini-deriv @markwylde-deriv @aizad-deriv @amina-deriv @wojciech-deriv

My feeling is, that we shouldn't overly generalise. There are plenty of open-source layouting frameworks and I'm pretty sure we do not want to build another one internally due to overgeneralisation.
So basically - keep it specific to current deriv use cases. If right now we only need 2-column layout of specific widths, then lets keep it that way.
Or even generate two separate components - PageLayout2Col, PageLayout3Col - KISS / YAGNI.
I think its actually desired to not have full flexibility. I think its very desirable for ppl / designers to follow standard / agreed layouts across applications. To increase design consistency across products

[shayan-deriv]

and one more thing. I noticed that we have a component called Layout as well. if we don't need that one then please remove it 🙏

[github-actions]

🎉 This PR is included in version 1.1.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀