Skip to content

Commit 85bc0c1

Browse files
easylogiceasylogic
committed
- modify checkbox group component
1 parent 6677b02 commit 85bc0c1

25 files changed

Lines changed: 459 additions & 296 deletions

‎apps/docs/CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
# @react-elf/docs
22

3+
## 0.0.83
4+
5+
### Patch Changes
6+
7+
- modify checkbox group component
8+
9+
- Updated dependencies []:
10+
- @react-elf/ui@0.0.83
11+
312
## 0.0.82
413

514
### Patch Changes

‎apps/docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-elf/docs",
3-
"version": "0.0.82",
3+
"version": "0.0.83",
44
"private": true,
55
"scripts": {
66
"npm-check": "npx npm-check-updates -u",

‎apps/docs/src/components/Inputs/Checkbox.stories.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import type { Meta, StoryObj } from "@storybook/react";
32
import { Checkbox } from "@react-elf/ui";
43

@@ -12,7 +11,7 @@ export default meta;
1211
type Story = StoryObj<typeof meta>;
1312

1413
/**
15-
* Preview Tooltip Story
14+
* Preview Checkbox Story
1615
*/
1716
export const Default: Story = {
1817
args: {

‎apps/docs/src/components/Inputs/CheckboxGroup.mdx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Controls, Canvas, Meta, Unstyled, Source } from "@storybook/blocks";
2+
import * as CheckboxGroupStories from "./CheckboxGroup.stories";
3+
4+
import { MainView } from "./checkbox-group/MainView";
5+
import { SizeView } from "./checkbox-group/SizeView";
6+
import { DisabledView } from "./checkbox-group/DisabledView";
7+
import { ErrorView } from "./checkbox-group/ErrorView";
8+
9+
<Meta of={CheckboxGroupStories} />
10+
11+
# Checkbox Group
12+
13+
A checkbox group is a grouping of checkboxes that are related to each other.
14+
15+
## Usage
16+
17+
<Unstyled>
18+
<MainView />
19+
</Unstyled>
20+
21+
<Canvas of={CheckboxGroupStories.Default} sourceState="shown" />
22+
23+
## Options
24+
25+
### Size
26+
27+
Checkboxes come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
28+
29+
<Unstyled>
30+
<SizeView />
31+
</Unstyled>
32+
33+
<Canvas of={CheckboxGroupStories.Size} sourceState="shown" />
34+
35+
### Disabled
36+
37+
A checkbox group in a disabled state shows that a selection exists,
38+
but is not available in that circumstance. This can be used to
39+
maintain layout continuity and communicate that an action may become
40+
available later. The field label, checkboxes, and help text are all
41+
displayed in a disabled state when the checkbox group is disabled.
42+
43+
<Unstyled>
44+
<DisabledView />
45+
</Unstyled>
46+
47+
<Canvas of={CheckboxGroupStories.Disabled} sourceState="shown" />
48+
49+
### Error
50+
51+
Checkboxes can be marked as having an error to show that a selection
52+
needs to be made in order to move forward, or that a selection that
53+
was made is invalid. For example, in a form that requires a user to
54+
acknowledge legal terms before proceeding, the checkbox would show an
55+
unchecked error to communicate that it needs to be selected.
56+
57+
<Unstyled>
58+
<ErrorView />
59+
</Unstyled>
60+
61+
<Canvas of={CheckboxGroupStories.Error} sourceState="shown" />

‎apps/docs/src/components/Inputs/CheckboxGroup.stories.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from "react";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import { Checkbox, CheckboxGroup } from "@react-elf/ui";
4+
5+
const meta = {
6+
title: "Components/Inputs/Checkbox Group",
7+
component: CheckboxGroup,
8+
tags: ["autodocs"],
9+
} satisfies Meta<typeof CheckboxGroup>;
10+
11+
export default meta;
12+
type Story = StoryObj<typeof meta>;
13+
14+
/**
15+
* Preview CheckboxGroup Story
16+
*/
17+
export const Default: Story = {
18+
args: {
19+
values: ["1", "2"],
20+
children: (
21+
<>
22+
<Checkbox value="1">Checkbox 1</Checkbox>
23+
<Checkbox value="2">Checkbox 2</Checkbox>
24+
<Checkbox value="3">Checkbox 3</Checkbox>
25+
</>
26+
),
27+
},
28+
};
29+
30+
export const Size: Story = {
31+
args: {
32+
size: "large",
33+
values: ["1", "2"],
34+
children: (
35+
<>
36+
<Checkbox value="1">Checkbox 1</Checkbox>
37+
<Checkbox value="2">Checkbox 2</Checkbox>
38+
<Checkbox value="3">Checkbox 3</Checkbox>
39+
</>
40+
),
41+
},
42+
};
43+
44+
export const Disabled: Story = {
45+
args: {
46+
disabled: true,
47+
values: ["1", "2"],
48+
children: (
49+
<>
50+
<Checkbox value="1">Checkbox 1</Checkbox>
51+
<Checkbox value="2">Checkbox 2</Checkbox>
52+
<Checkbox value="3">Checkbox 3</Checkbox>
53+
</>
54+
),
55+
},
56+
};
57+
58+
export const Error: Story = {
59+
args: {
60+
variant: "danger",
61+
values: ["1", "2"],
62+
children: (
63+
<>
64+
<Checkbox value="1">Checkbox 1</Checkbox>
65+
<Checkbox value="2">Checkbox 2</Checkbox>
66+
<Checkbox value="3">Checkbox 3</Checkbox>
67+
</>
68+
),
69+
},
70+
};

apps/docs/src/components/Inputs/checkbox-group/DisabledView.jsx renamed to apps/docs/src/components/Inputs/checkbox-group/DisabledView.tsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { CheckboxGroup, Grid, VBox } from "@elf-framework/ui";
1+
import React from "react";
2+
import { Checkbox, CheckboxGroup, Grid, VBox } from "@react-elf/ui";
23

34
export function DisabledView() {
45
return (
@@ -14,16 +15,14 @@ export function DisabledView() {
1415
<div style={{ display: "flex", flexDirection: "column", padding: 20 }}>
1516
<div>&nbsp;</div>
1617
<CheckboxGroup
17-
direction="vertical"
18-
value={[10]}
18+
values={[10, 20]}
1919
disabled
20-
options={[
21-
{ value: 10, label: "Travel" },
22-
{ value: 20, label: "Music" },
23-
{ value: 30, label: "Shopping" },
24-
]}
25-
onChange={(e, values) => console.log(values)}
26-
/>
20+
onChange={(values) => console.log(values)}
21+
>
22+
<Checkbox value={10}>Travel</Checkbox>
23+
<Checkbox value={20}>Music</Checkbox>
24+
<Checkbox value={30}>Shopping</Checkbox>
25+
</CheckboxGroup>
2726
</div>
2827
</Grid>
2928
</VBox>

‎apps/docs/src/components/Inputs/checkbox-group/EmphasisView.jsx‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

apps/docs/src/components/Inputs/checkbox-group/ErrorView.jsx renamed to apps/docs/src/components/Inputs/checkbox-group/ErrorView.tsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { CheckboxGroup, Grid, VBox } from "@elf-framework/ui";
1+
import React from "react";
2+
import { CheckboxGroup, Checkbox, Grid, VBox } from "@react-elf/ui";
23

34
export function ErrorView() {
45
return (
@@ -14,16 +15,14 @@ export function ErrorView() {
1415
<div style={{ display: "flex", flexDirection: "column", padding: 20 }}>
1516
<div>&nbsp;</div>
1617
<CheckboxGroup
17-
direction="vertical"
18-
value={[10]}
18+
values={[10, 20]}
1919
variant="danger"
20-
options={[
21-
{ value: 10, label: "Travel" },
22-
{ value: 20, label: "Music" },
23-
{ value: 30, label: "Shopping" },
24-
]}
25-
onChange={(e, values) => console.log(values)}
26-
/>
20+
onChange={(values) => console.log(values)}
21+
>
22+
<Checkbox value={10}>Travel</Checkbox>
23+
<Checkbox value={20}>Music</Checkbox>
24+
<Checkbox value={30}>Shopping</Checkbox>
25+
</CheckboxGroup>
2726
</div>
2827
</Grid>
2928
</VBox>

apps/docs/src/components/Inputs/checkbox-group/MainView.jsx renamed to apps/docs/src/components/Inputs/checkbox-group/MainView.tsx

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import { CheckboxGroup, Grid, VBox } from "@elf-framework/ui";
1+
import React from "react";
2+
import { Checkbox, CheckboxGroup, Grid, VBox } from "@react-elf/ui";
23

34
export function MainView() {
45
return (
56
<VBox
67
style={{
78
gap: 30,
89
backgroundColor: "var(--color-gray-0)",
9-
padding: [60, 200],
10+
padding: [100, 100],
1011
position: "relative",
12+
height: 300,
13+
justifyContent: "center",
14+
alignItems: "center",
1115
}}
1216
>
13-
<Grid columns={2}>
17+
<Grid columns={2} gap={100}>
1418
<div
1519
style={{
1620
display: "flex",
@@ -23,14 +27,15 @@ export function MainView() {
2327

2428
<CheckboxGroup
2529
direction="vertical"
26-
value={[10]}
27-
options={[
28-
{ value: 10, label: "Travel" },
29-
{ value: 20, label: "Music" },
30-
{ value: 30, label: "Shopping" },
31-
]}
32-
onChange={(e, values) => console.log(values)}
33-
/>
30+
values={[10, 20]}
31+
disabled
32+
variant="danger"
33+
onChange={(values) => console.log(values)}
34+
>
35+
<Checkbox value={10}>Travel</Checkbox>
36+
<Checkbox value={20}>Music</Checkbox>
37+
<Checkbox value={30}>Shopping</Checkbox>
38+
</CheckboxGroup>
3439
</div>
3540
<div
3641
style={{
@@ -44,14 +49,13 @@ export function MainView() {
4449
<CheckboxGroup
4550
direction="vertical"
4651
variant="dark"
47-
value={[10]}
48-
options={[
49-
{ value: 10, label: "Travel" },
50-
{ value: 20, label: "Music" },
51-
{ value: 30, label: "Shopping" },
52-
]}
53-
onChange={(e, values) => console.log(values)}
54-
/>
52+
values={[10]}
53+
onChange={(values) => console.log(values)}
54+
>
55+
<Checkbox value={10}>Travel</Checkbox>
56+
<Checkbox value={20}>Music</Checkbox>
57+
<Checkbox value={30}>Shopping</Checkbox>
58+
</CheckboxGroup>
5559
</div>
5660
</Grid>
5761
</VBox>

0 commit comments

Comments
 (0)