445ab83c14
This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7527](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7527). --- ### Description Migrate `feedback/progress-bar` to twenty ui: - CircularProgressBar - ProgressBar ### Demo ProgressBar on Storybook  CircularProgressBar on Storybook  ###### Fixes twentyhq/private-issues#91 Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
73 lines
1.9 KiB
Plaintext
73 lines
1.9 KiB
Plaintext
---
|
|
title: Feedback
|
|
icon: TbLoader2
|
|
image: /images/user-guide/emails/emails_header.png
|
|
---
|
|
|
|
Indicates progress or countdown and moves from right to left.
|
|
|
|
<ArticleTabs label1="Usage" label2="Props">
|
|
|
|
<ArticleTab>
|
|
|
|
<SandpackEditor content={`import { ProgressBar } from "twenty-ui";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<ProgressBar
|
|
duration={6000}
|
|
delay={0}
|
|
easing="easeInOut"
|
|
barHeight={10}
|
|
barColor="#4bb543"
|
|
autoStart={true}
|
|
/>
|
|
);
|
|
};`} />
|
|
|
|
</ArticleTab>
|
|
|
|
<ArticleTab>
|
|
|
|
<ArticlePropsTable options={[
|
|
['duration', 'number', 'The total duration of the progress bar animation in milliseconds', '3'],
|
|
['delay', 'number', 'The delay in starting the progress bar animation in milliseconds', '0'],
|
|
['easing', 'string', 'Easing function for the progress bar animation', 'easeInOut'],
|
|
['barHeight', 'number', 'The height of the bar in pixels', '24'],
|
|
['barColor', 'string', 'The color of the bar', 'gray80'],
|
|
['autoStart', 'boolean', 'If `true`, the progress bar animation starts automatically when the component mounts', '`true`']
|
|
]} />
|
|
|
|
</ArticleTab>
|
|
</ArticleTabs>
|
|
|
|
|
|
## Circular Progress Bar
|
|
|
|
Indicates the progress of a task, often used in loading screens or areas where you want to communicate ongoing processes to the user.
|
|
|
|
<ArticleTabs label1="Usage" label2="Props">
|
|
|
|
<ArticleTab>
|
|
|
|
<SandpackEditor content={`import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
|
|
|
export const MyComponent = () => {
|
|
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
|
};`} />
|
|
|
|
</ArticleTab>
|
|
|
|
<ArticleTab>
|
|
|
|
<ArticlePropsTable options={[
|
|
['size', 'number', 'The size of the circular progress bar', '50'],
|
|
['barWidth', 'number', 'The width of the progress bar line', '5'],
|
|
['barColor', 'string', 'The color of the progress bar', 'currentColor']
|
|
]} />
|
|
|
|
</ArticleTab>
|
|
|
|
</ArticleTabs>
|
|
|
|
<ArticleEditContent></ArticleEditContent> |