This PR is focusd around the addition of the SplitLayout component, a layout component that allows for a resizable split layout that can be horizontal or vertical, and also lets you nest the split layout for more advanced options.
The drag handles allow the second area of the layout to be optionally hideable. The order can also be reversed to place the hideable content pane on the left instead. The minimum width setting will enforce a minimum container size, after which there is a point where continuing to try and shrink it will trigger the hiding mechanism.
This work also includes some minor additions, refactors and fixes as follows:
Added a useLocalStorage hook used for retaining state of split layout. It can also be used moving forward in a project if needed.
A FlexContentPlaceholder was added for convenience in stories and development to fill an area for visibility. This is used in examples and stories.
Due to issues with the background color and gradient not always reaching the bottom of the page, flex rules have been revised down to the html, body and #root CSS selectors with the background being moved for consistent and expected behaviours.
As part of the above, theme colors were split to their own variables/Colors.ts file.
Also, a ThemeHelpers.ts file was created with a BaseStyles styled-components css snippet so it can be easily imported in to the project to ensure the base rules are correctly set.
There is a small fix to dashboard and fullscreen layout's max-width. It is now set to none to allow these to fully span the viewport as intended.
Layouts contains some sample content changes.
I've also moved a styled component out of the React component as it shouldn't have been in there. This may appear in another component to in the PR.
Reviewing/Testing steps
This can be seen in Examples > Split Layouts
And also in Storybooks: Global > Organisms > Split Layout / Split Layout Nested
Future Considerations
There are currently three stories for layouts that are not fully featured. This was due to Storybook freezing in the browser when trying to implement Knobs controls. These should be revisited when upgrading to the newer Storybook Controls.
Description
This PR is focusd around the addition of the
SplitLayoutcomponent, a layout component that allows for a resizable split layout that can be horizontal or vertical, and also lets you nest the split layout for more advanced options.The drag handles allow the second area of the layout to be optionally hideable. The order can also be reversed to place the hideable content pane on the left instead. The minimum width setting will enforce a minimum container size, after which there is a point where continuing to try and shrink it will trigger the hiding mechanism.
https://github.com/user-attachments/assets/ddf64b0e-5bdc-42d8-bf35-3ab6fce5e89a
Other Changes:
This work also includes some minor additions, refactors and fixes as follows:
useLocalStoragehook used for retaining state of split layout. It can also be used moving forward in a project if needed.FlexContentPlaceholderwas added for convenience in stories and development to fill an area for visibility. This is used in examples and stories.html,bodyand#rootCSS selectors with the background being moved for consistent and expected behaviours.variables/Colors.tsfile.ThemeHelpers.tsfile was created with aBaseStylesstyled-componentscsssnippet so it can be easily imported in to the project to ensure the base rules are correctly set.dashboardandfullscreenlayout'smax-width. It is now set tononeto allow these to fully span the viewport as intended.Layoutscontains some sample content changes.I've also moved a styled component out of the React component as it shouldn't have been in there. This may appear in another component to in the PR.
Reviewing/Testing steps
This can be seen in Examples > Split Layouts And also in Storybooks: Global > Organisms > Split Layout / Split Layout Nested
Future Considerations