Skip to content

Commit

Permalink
feat: improvements for SplitLayout and its stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@soslayando
soslayando committed May 10, 2024
1 parent 97b7205 commit c54a25b
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 59 deletions.
33 changes: 24 additions & 9 deletions packages/core/src/components/SplitLayout/SplitLayout.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,27 +20,42 @@ split vertically or horizontally, depending on the needs of the user interface.

## How to import

<Source
code={`
import { SplitLayout } from '@devoinc/genesys-ui';
`}
/>
<Source code={`import { SplitLayout } from '@devoinc/genesys-ui';`} />

## Basic usage

Add directly the desired blocks as children of the SplitLayout.

<Canvas of={Stories.Base} />

## Cases
## Without minSize

If you don't define a minSize for the blocks, when we resize one to the maximum the other ends in
`width: 0` or `height: 0`, so we recommend adding `overflow: hidden` to the children blocks,
to avoid maintaining visible undesired contents or spaces. In the same way, you should also
add the internal padding to a nested children of the block, instead of directly to it, because of
the box model, which maintains the space of the padding although the width or height is '0'.

This is an example without minSize, but with padding in the children blocks, instead of in a nested one,
and without applying `overflow:hidden`. We can see how the content is not completely hidden
when we resize the other one to the maximum:

<Canvas of={Stories.WithoutMinSizeBad} />

In this example we apply `overflow:hidden` and the padding is defined in nested blocks, so we can see how the content
is completely hidden when we resize the other one to the maximum:

<Canvas of={Stories.WithoutMinSizeGood} />

### Three blocks
## Three blocks

<Canvas of={Stories.Three} />

### Nested
## Nested

<Canvas of={Stories.Nested} />

### Hidden content
## Dynamic content

<Canvas of={Stories.HiddenContent} />

Expand Down
160 changes: 118 additions & 42 deletions packages/core/src/components/SplitLayout/SplitLayout.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { SplitLayout } from './SplitLayout';
import { Button } from '../Button';
import { Typography } from '../Typography';
import { HFlex } from '../HFlex';
import { Divider } from '../Divider';

const meta: Meta<typeof SplitLayout> = {
title: 'Components/Layout/SplitLayout',
Expand All @@ -26,45 +27,102 @@ export const Base: Story = {
((props) => (
<Box height="30rem">
<SplitLayout {...props}>
<div>Block One</div>
<div>Block Two</div>
<Box padding="cmp-md">
<Typography.Paragraph>Block one</Typography.Paragraph>
</Box>
<Box padding="cmp-md">
<Typography.Paragraph>Block two</Typography.Paragraph>
</Box>
</SplitLayout>
</Box>
))(args),
};

export const WithoutMinSizeBad: Story = {
name: 'Without minSize bad',
render: (args) =>
((props) => (
<Box height="30rem">
<SplitLayout {...props} expandToMin={false} minSize={0}>
<Box padding="cmp-md">
<Typography.Paragraph>Block one</Typography.Paragraph>
</Box>
<Box padding="cmp-md">
<Typography.Paragraph>Block two</Typography.Paragraph>
</Box>
</SplitLayout>
</Box>
))(args),
};

export const WithoutMinSizeGood: Story = {
name: 'Without minSize good',
render: (args) =>
((props) => (
<Box height="30rem">
<SplitLayout {...props} expandToMin={false} minSize={0}>
<Box overflow="hidden">
<Box padding="cmp-md">
<Typography.Paragraph>Block one</Typography.Paragraph>
</Box>
</Box>
<Box overflow="hidden">
<Box padding="cmp-md">
<Typography.Paragraph>Block two</Typography.Paragraph>
</Box>
</Box>
</SplitLayout>
</Box>
))(args),
};

export const Three: Story = {
name: 'Three blocks',
args: {
sizes: [25, 50, 25],
},
render: (args) =>
((props) => (
<Box height="30rem">
<SplitLayout {...props}>
<div>Block One</div>
<div>Block Two</div>
<div>Block Three</div>
<Box padding="cmp-md">
<Typography.Paragraph>Block one</Typography.Paragraph>
</Box>
<Box padding="cmp-md">
<Typography.Paragraph>Block two</Typography.Paragraph>
</Box>
<Box padding="cmp-md">
<Typography.Paragraph>Block three</Typography.Paragraph>
</Box>
</SplitLayout>
</Box>
))(args),
};

export const Nested: Story = {
name: 'Nested blocks',
render: (args) =>
((props) => (
<Box height="30rem">
<SplitLayout {...props}>
<SplitLayout direction={'vertical'}>
<div>Block One</div>
<div>Block Two</div>
<Box padding="cmp-md">
<Typography.Paragraph>Block one</Typography.Paragraph>
</Box>
<Box padding="cmp-md">
<Typography.Paragraph>Block two</Typography.Paragraph>
</Box>
</SplitLayout>
<div>Block Three</div>
<Box padding="cmp-md">
<Typography.Paragraph>Block three</Typography.Paragraph>
</Box>
</SplitLayout>
</Box>
))(args),
};

export const HiddenContent: Story = {
name: 'Dynamic content',
render: () =>
(() => {
const [showMenu, setShowMenu] = React.useState(true);
Expand All @@ -79,53 +137,71 @@ export const HiddenContent: Story = {
};

return (
<Box height="30rem">
<HFlex padding="cmp-md">
<>
<HFlex>
<Button onClick={toggleMenu}>
{showMenu ? 'Hide menu' : 'Hide menu'}
{showMenu ? 'Hide menu' : 'Show menu'}
</Button>
<Button onClick={toggleFooter}>
{showFooter ? 'Hide footer' : 'Show footer'}
</Button>
</HFlex>

<SplitLayout
sizes={showMenu ? [25, 75] : [0, 100]}
minSize={0}
expandToMin={false}
gutterSize={showMenu ? 10 : 0}
gutterAlign="center"
snapOffset={30}
dragInterval={1}
direction="horizontal"
cursor="col-resize"
>
<Box padding="cmp-xs">
{showMenu && (
<Typography.Paragraph>Menu content</Typography.Paragraph>
)}
</Box>
<Divider margin="cmp-md 0 0 0" colorScheme="weak" />
<Box height="30rem">
<SplitLayout
direction={'vertical'}
sizes={showFooter ? [75, 25] : [100, 0]}
cursor="col-resize"
gutterSize={showFooter ? 10 : 0}
sizes={showMenu ? [25, 75] : [0, 100]}
minSize={0}
expandToMin={false}
gutterSize={showMenu ? 10 : 0}
gutterAlign="center"
snapOffset={30}
dragInterval={1}
minSize={0}
direction="horizontal"
cursor="col-resize"
>
<Box padding="cmp-xs">
<Typography.Heading>Main area</Typography.Heading>
</Box>
<Box>
{showFooter && (
<Typography.Code>print Hello world!</Typography.Code>
)}
<Box
overflow="hidden"
styles="background-color: rgba(63, 187, 226, 0.2)"
>
<Box padding="cmp-sm">
{showMenu && (
<Typography.Paragraph>Menu</Typography.Paragraph>
)}
</Box>
</Box>
<SplitLayout
direction={'vertical'}
sizes={showFooter ? [75, 25] : [100, 0]}
cursor="col-resize"
gutterSize={showFooter ? 10 : 0}
gutterAlign="center"
snapOffset={30}
dragInterval={1}
minSize={0}
>
<Box
overflow="hidden"
styles="background-color: rgba(182, 23, 226, 0.2)"
>
<Box padding="cmp-sm">
<Typography.Paragraph>Main</Typography.Paragraph>
</Box>
</Box>
<Box
padding="cmp-sm"
overflow="hidden"
styles="background-color: rgba(51, 255, 159, 0.2);"
>
{showFooter && (
<Box padding="cmp-sm">
<Typography.Paragraph>Footer</Typography.Paragraph>
</Box>
)}
</Box>
</SplitLayout>
</SplitLayout>
</SplitLayout>
</Box>
</Box>
</>
);
})(),
};
33 changes: 25 additions & 8 deletions packages/core/src/components/SplitLayout/StyledSplitLayout.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import styled, { css } from 'styled-components';
import Split from 'react-split';
import { pseudoElementMixin } from '../../styled';
import { pseudoElementMixin, pseudoElementOverlayMixin } from '../../styled';

export const StyledSplitLayout = styled(Split)`
overflow: hidden;
height: 100%;
${({ direction }) =>
Expand All @@ -22,11 +23,18 @@ export const StyledSplitLayout = styled(Split)`
// gutter
.gutter {
position: relative;
overflow: hidden;
transition: all ease
${theme.alias.mutation.transitionDuration.opacity.md};
background-color: ${theme.alias.color.background.surface.base.raised};
border-style: solid;
border-color: ${theme.alias.color.border.separator.base.weak};
// to hide borders when the width = 0
&::before {
${pseudoElementOverlayMixin()};
border-style: solid;
border-color: ${theme.alias.color.border.separator.base.weak};
border-width: 0;
}
&::after {
${pseudoElementMixin()};
Expand All @@ -45,22 +53,31 @@ export const StyledSplitLayout = styled(Split)`
&:hover {
background-color: ${theme.alias.color.background.surface.base
.expanded};
border-color: ${theme.alias.color.border.separator.base.base};
&::before {
border-color: ${theme.alias.color.border.separator.base.base};
}
}
// gutter horizontal
&.gutter-horizontal {
cursor: col-resize;
border-right-width: ${theme.alias.shape.borderSize.separator.md};
border-left-width: ${theme.alias.shape.borderSize.separator.md};
&::before {
border-right-width: ${theme.alias.shape.borderSize.separator.md};
border-left-width: ${theme.alias.shape.borderSize.separator.md};
}
}
// gutter vertical
&.gutter-vertical {
border-top-width: ${theme.alias.shape.borderSize.separator.md};
border-bottom-width: ${theme.alias.shape.borderSize.separator.md};
cursor: row-resize;
&::before {
border-top-width: ${theme.alias.shape.borderSize.separator.md};
border-bottom-width: ${theme.alias.shape.borderSize.separator.md};
}
&::after {
transform: translate(-50%, -50%) rotate(90deg);
}
Expand Down

0 comments on commit c54a25b

Please sign in to comment.