Skip to content

Commit

Permalink
Merge pull request #5432 from pat270/clay-5431
Browse files Browse the repository at this point in the history 
docs(clayui.com): Vertical Bar add docs on resize property
  • Loading branch information
@matuzalemsteles
matuzalemsteles committed Mar 22, 2023
2 parents 1044c81 + 02809e3 commit 42a7501
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 34 deletions.
139 changes: 108 additions & 31 deletions packages/clay-core/docs/vertical-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const exampleImports = `import {Provider, TreeView} from '@clayui/core';
import Icon from '@clayui/icon';`;

const exampleCode = `const VerticalBarExample = () => {
const items = [
const items = [
{
icon: 'tag',
title: 'Tag',
Expand All @@ -28,35 +28,35 @@ const exampleCode = `const VerticalBarExample = () => {
},
];
return (
<div style={{height: '400px'}}>
<Provider spritemap={spritemap}>
<VerticalBar absolute defaultActive="Tag">
<VerticalBar.Content
items={items}
>
{(item) => (
<VerticalBar.Panel key={item.title}>
<div className="sidebar-header">
<div className="component-title">{item.title}</div>
</div>
</VerticalBar.Panel>
)}
</VerticalBar.Content>
<VerticalBar.Bar displayType="light" items={items}>
{(item) => (
<VerticalBar.Item divider={item.divider} key={item.title}>
<Button displayType={null}>
<Icon symbol={item.icon} />
</Button>
</VerticalBar.Item>
)}
</VerticalBar.Bar>
</VerticalBar>
</Provider>
</div>
);
return (
<div style={{height: '400px'}}>
<Provider spritemap={spritemap}>
<VerticalBar absolute defaultActive="Tag">
<VerticalBar.Content
items={items}
>
{(item) => (
<VerticalBar.Panel key={item.title}>
<div className="sidebar-header">
<div className="component-title">{item.title}</div>
</div>
</VerticalBar.Panel>
)}
</VerticalBar.Content>
<VerticalBar.Bar displayType="light" items={items}>
{(item) => (
<VerticalBar.Item divider={item.divider} key={item.title}>
<Button aria-label={'Open ' + item.title} displayType={null}>
<Icon symbol={item.icon} />
</Button>
</VerticalBar.Item>
)}
</VerticalBar.Bar>
</VerticalBar>
</Provider>
</div>
);
};
render(<VerticalBarExample />)`;
Expand All @@ -67,4 +67,81 @@ const VerticalBarExample = () => {
return <Editor code={exampleCode} imports={exampleImports} scope={scope} />;
};

export {VerticalBarExample};
const resizeImports = `import {Provider, TreeView} from '@clayui/core';
import Icon from '@clayui/icon';
import React, {useState} from 'react';`;

const resizeCode = `const VerticalBarResize = () => {
const items = [
{
icon: 'tag',
title: 'Tag',
},
{
divider: true,
icon: 'message',
title: 'Message',
},
{
icon: 'effects',
title: 'Effects',
},
];
const [width, setWidth] = useState(320);
return (
<div id="verticalBarResizeContainer1" style={{minHeight: '400px', paddingLeft: '52px'}}>
And aged, cinnamon, redeye dripper, organic and mocha cinnamon qui macchiato. Whipped, cream single origin, coffee eu a brewed macchiato. Instant, whipped barista so ut siphon viennese medium aftertaste steamed.
Cappuccino plunger pot macchiato coffee froth caramelization froth, so id rich cream pumpkin spice. Milk rich, a that cultivar shop saucer a caffeine. French press acerbic qui that cortado plunger pot beans bar cappuccino.
<Provider spritemap={spritemap}>
<VerticalBar
absolute
onPanelWidthChange={(width) => {
setWidth(width);
document.getElementById('verticalBarResizeContainer1').style.paddingLeft = width + 52 + 'px';
}}
panelWidth={width}
panelWidthMax={700}
panelWidthMin={150}
position="left"
resize
>
<VerticalBar.Bar displayType="light" items={items}>
{(item) => (
<VerticalBar.Item divider={item.divider} key={item.title}>
<Button aria-label={'Open ' + item.title} displayType={null}>
<Icon symbol={item.icon} />
</Button>
</VerticalBar.Item>
)}
</VerticalBar.Bar>
<VerticalBar.Content
items={items}
>
{(item) => (
<VerticalBar.Panel key={item.title}>
<div className="sidebar-header">
<div className="component-title">{item.title}</div>
</div>
</VerticalBar.Panel>
)}
</VerticalBar.Content>
</VerticalBar>
</Provider>
</div>
);
};
render(<VerticalBarResize />)`;

const VerticalBarResize = () => {
const scope = {Button, Icon, Provider, TreeView, VerticalBar};

return <Editor code={resizeCode} imports={resizeImports} scope={scope} />;
};

export {VerticalBarExample, VerticalBarResize};
28 changes: 25 additions & 3 deletions packages/clay-core/docs/vertical-bar.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,21 @@ packageStatus: 'Beta'
storybookPath: 'design-system-components-verticalbar'
---

import {VerticalBarExample} from '$packages/clay-core/docs/vertical-bar';
import {
VerticalBarExample,
VerticalBarResize,
} from '$packages/clay-core/docs/vertical-bar';

<div class="nav-toc-absolute">
<div class="nav-toc">

- [Example](#example)
- [Introduction](#introduction)
- [Content](#content)
- [Content](#vertical-bar-content)
- [Static](#static)
- [Dynamic](#dynamic)
- [Position](#position)
- [Resize](#vertical-bar-resize)
- [Load lazy panel](#load-lazy-panel)

</div>
Expand All @@ -32,7 +36,7 @@ VerticalBar allows rendering a vertical navigation bar positioned fixedly on the

Just like the TreeView component, the VerticalBar is considered a middle-level component instead of a low-level or high-level, it guarantees more flexibility and composition and delivers features that would only be available at high-level with the same synthetic form of an API low-level.

## Content
## Content(#vertical-bar-content)

As VerticalBar is middle-level, it allows you to build static or dynamic content if you need to consume data from some service.

Expand Down Expand Up @@ -176,6 +180,24 @@ Positioning the VerticalBar on the right or left side is possible by setting the
</VerticalBar>
```

## Resize(#vertical-bar-resize)

The property `resize` in `<VerticalBar.Bar />` enables the user to increase or decrease the panel width using the mouse or keyboard. The maximum width can be set using the property `panelWidthMax`. It defaults to 500px. The minimum width is set using the property `panelWidthMin` and defaults to 280px. The starting width is set using `panelWidth` with a default value of 320px.

The property `onPanelWidthChange` accepts a callback function that executes when the `panelWidth` is updated. The callback function has the value of the panel width as the parameter. It can be used to make updates to other parts of your application, such as pushing body content over as the user resizes the Vertical Bar Panel.

<div class="clay-site-alert alert alert-warning">
When using the property `onPanelWidthChange`, you must also declare
`panelWidth`. Setting a fixed value for `panelWidth` will result in
`onPanelWidthChange` always returning that value, you must use
`React.useState` to get your callback function to return the correct value.
Please see the code example below.
</div>

<div class="overflow-hidden">
<VerticalBarResize />
</div>

## Load lazy panel

The possibility of lazy loading the panel content is a strategy to reduce the application's bundle and load it only when it is used. Implementing in the Vertical Bar is also simple using the React.js support components, with `<Suspense />` and `React.lazy`.
Expand Down

0 comments on commit 42a7501

Please sign in to comment.