Skip to content

Progressbar component #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AaronPatterson1 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Progressbar component #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55e4a48
Adding Lozenge element
AaronPatterson1 Nov 16, 2024
56809e7
Adding popover component
AaronPatterson1 Nov 17, 2024
a3ac137
Adding progress bar component
AaronPatterson1 Nov 17, 2024
068f7af
Fixing example descriptions.
AaronPatterson1 Nov 17, 2024
1696e05
Fixing manual install
AaronPatterson1 Nov 17, 2024
f2a378a
Merge branch 'main' into progressbar-component
clearfeld Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/_site/src/pages/components/popover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function PopoverPage() {
>
<ComponentHero
title="Popover"
description="Displays rich content in a portal, triggered by a button."
description="Displays rich content in a portal, triggered by a trigger element (ex. button)."
/>

<div {...stylex.props(styles.threeColumnLayout)}>
Expand Down
62 changes: 56 additions & 6 deletions packages/_site/src/pages/components/progressbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import ContentsSidebar from "../commons/contents_sidebar";
import { styles } from "../_layout/styles";

import { Progress,
// ProgressTypes
ProgressTypes
} from "@controlkit/progress-bar";

export default function ProgressbarPage() {
Expand All @@ -26,7 +26,7 @@ export default function ProgressbarPage() {
>
<ComponentHero
title="Progress Bar"
description=""
description="A bar indicating completion progress."
/>

<div {...stylex.props(styles.threeColumnLayout)}>
Expand All @@ -39,15 +39,15 @@ export default function ProgressbarPage() {
<Tabs defaultValue="tab-1">
<TabsList>
<TabsTrigger value="tab-1">Automatic</TabsTrigger>
{/* <TabsTrigger value="tab-2">Manual</TabsTrigger> */}
<TabsTrigger value="tab-2">Manual</TabsTrigger>
</TabsList>
<TabsContent value="tab-1">
<div {...stylex.props(styles.blockWrapper)}>
<ComponentInfo
install="pnpm add @controlkit/progress-bar"
npmjs="https://www.npmjs.com/package/@controlkit/progress-bar"
npmTitle="@controlkit/progress-bar"
source="https://github.com/clearfeld/control-ui/tree/main/packages/progress-bar"
source="https://github.com/clearfeld/control-ui/tree/main/packages/progress_bar"
/>
</div>
</TabsContent>
Expand All @@ -69,7 +69,7 @@ export default function ProgressbarPage() {

<CodeBlock
language="tsx"
url={"https://raw.githubusercontent.com/clearfeld/control-ui/main/packages/progress-bar/lib/index.tsx"}
url={"https://raw.githubusercontent.com/clearfeld/control-ui/main/packages/progress_bar/lib/index.tsx"}
/>
</div>
</TabsContent>
Expand All @@ -83,7 +83,7 @@ export default function ProgressbarPage() {
<div>
<ExampleBlock
title="Default"
description=""
description="A progress bar that is currently in progress and hasn't completed or encountered an error is blue."
/>
<div {...stylex.props(styles.codeWrapper)}>
<PreviewBlock>
Expand All @@ -101,6 +101,56 @@ export default function PopoverExample() {
<Progress value={66} />
);
}
`}
/>
</div>
</div>
<div>
<ExampleBlock
title="Danger"
description="A progress bar only stops and turns red if there's an error."
Copy link
Owner

@clearfeld clearfeld Nov 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bit of rewording would be good, since the component doesn't automatically change to red / danger if there's an error.

/>
<div {...stylex.props(styles.codeWrapper)}>
<PreviewBlock>
<Progress value={33} variant={ProgressTypes.DANGER} />
</PreviewBlock>

<CodeBlock
language="tsx"
code={`import React from 'react';

import { Progress, ProgressTypes } from "@controlkit/progress-bar";

export default function PopoverExample() {
return (
<Progress value={33} variant={ProgressTypes.DANGER} />
);
}
`}
/>
</div>
</div>
<div>
<ExampleBlock
title="Success"
description="A progress bar is only green when it reaches the success (completed state)."
/>
<div {...stylex.props(styles.codeWrapper)}>
<PreviewBlock>
<Progress value={100} variant={ProgressTypes.SUCCESS} />
</PreviewBlock>

<CodeBlock
language="tsx"
code={`import React from 'react';

import { Progress, ProgressTypes } from "@controlkit/progress-bar";

export default function PopoverExample() {
return (
<Progress value={100} variant={ProgressTypes.SUCCESS} />
);
}
`}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/_site/src/pages/components/routes_list_docs_components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,13 +152,13 @@ export const componentsList: I_ComponentsList[] = [

{
title: "Popover",
description: "Displays rich content in a portal, triggered by a button.",
description: "Displays rich content in a portal, triggered by a trigger element (ex. button).",
link: "/components/popover/examples",
},

{
title: "Progress Bar",
description: "",
description: "A bar indicating completion progress.",
link: "/components/progress-bar/examples",
},

Expand Down