Skip to content

Commit 3c9d3ce

Browse files
hualf1995hualf1995
authored
[Checkbox-v2][Switch]Add new components (#5387)
* [Checkbox-v2][Switch]Add new components * 16.1.0
1 parent 35154ef commit 3c9d3ce

65 files changed

Lines changed: 3893 additions & 162 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎documentation-site/components/yard/config/checkbox-v2.ts‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/*
2+
Copyright (c) Uber Technologies, Inc.
3+
4+
This source code is licensed under the MIT license found in the
5+
LICENSE file in the root directory of this source tree.
6+
*/
7+
import pick from "just-pick";
8+
import { Checkbox, LABEL_PLACEMENT } from "baseui/checkbox-v2";
9+
import { PropTypes } from "react-view";
10+
import type { TConfig } from "../types";
11+
import { changeHandlers } from "./common/common";
12+
13+
const CheckboxConfig: TConfig = {
14+
componentName: "Checkbox",
15+
imports: {
16+
"baseui/checkbox-v2": {
17+
named: ["Checkbox"],
18+
},
19+
},
20+
scope: {
21+
Checkbox,
22+
LABEL_PLACEMENT,
23+
},
24+
theme: [
25+
"contentStateDisabled",
26+
"tagRedContentSecondary",
27+
"borderSelected",
28+
"contentTertiary",
29+
"contentPrimary",
30+
"hoverNegativeAlpha",
31+
"hoverOverlayAlpha",
32+
"pressedNegativeAlpha",
33+
"pressedOverlayAlpha",
34+
"contentInversePrimary",
35+
],
36+
props: {
37+
checked: {
38+
value: false,
39+
type: PropTypes.Boolean,
40+
description: "Renders component in checked state.",
41+
stateful: true,
42+
},
43+
children: {
44+
value: `Sign up for the newsletter`,
45+
type: PropTypes.ReactNode,
46+
description: `The React Nodes displayed next to the checkbox.`,
47+
},
48+
disabled: {
49+
value: false,
50+
type: PropTypes.Boolean,
51+
description: "Renders component in disabled state.",
52+
},
53+
onChange: {
54+
value: "e => setChecked(e.target.checked)",
55+
type: PropTypes.Function,
56+
description: "Called when checkbox value is changed.",
57+
propHook: {
58+
what: "e.target.checked",
59+
into: "checked",
60+
},
61+
},
62+
error: {
63+
value: false,
64+
type: PropTypes.Boolean,
65+
description: "Renders component in error state.",
66+
},
67+
isIndeterminate: {
68+
value: false,
69+
type: PropTypes.Boolean,
70+
description:
71+
"Indicates indeterminate state for the checkbox. Checked property is ignored.",
72+
},
73+
labelPlacement: {
74+
value: "LABEL_PLACEMENT.right",
75+
options: LABEL_PLACEMENT,
76+
type: PropTypes.Enum,
77+
enumName: "LABEL_PLACEMENT",
78+
description:
79+
"Determines how to position the label relative to the checkbox.",
80+
imports: {
81+
"baseui/checkbox-v2": {
82+
named: ["LABEL_PLACEMENT"],
83+
},
84+
},
85+
},
86+
required: {
87+
value: false,
88+
type: PropTypes.Boolean,
89+
description: "Renders component in required state.",
90+
hidden: true,
91+
},
92+
inputRef: {
93+
value: undefined,
94+
type: PropTypes.Ref,
95+
description: "A ref to access an input element.",
96+
hidden: true,
97+
},
98+
autoFocus: {
99+
value: false,
100+
type: PropTypes.Boolean,
101+
description: "If true the component will be focused on the first mount.",
102+
hidden: true,
103+
},
104+
containsInteractiveElement: {
105+
value: false,
106+
type: PropTypes.Boolean,
107+
description:
108+
"Indicates the checkbox label contains an interactive element, and the default label behavior should be prevented for child elements.",
109+
hidden: true,
110+
},
111+
name: {
112+
value: undefined,
113+
type: PropTypes.String,
114+
description: "Name attribute.",
115+
hidden: true,
116+
},
117+
title: {
118+
value: undefined,
119+
type: PropTypes.String,
120+
description: "Title attribute.",
121+
hidden: true,
122+
},
123+
"aria-label": {
124+
value: undefined,
125+
type: PropTypes.String,
126+
description: "Aria-label attribute",
127+
hidden: true,
128+
},
129+
...pick(changeHandlers, [
130+
"onBlur",
131+
"onFocus",
132+
"onMouseDown",
133+
"onMouseEnter",
134+
"onMouseLeave",
135+
]),
136+
overrides: {
137+
value: undefined,
138+
type: PropTypes.Custom,
139+
description: "Lets you customize all aspects of the component.",
140+
custom: {
141+
names: ["Root", "CheckmarkContainer", "Checkmark", "Label", "Input"],
142+
sharedProps: {
143+
$isFocused: {
144+
type: PropTypes.Boolean,
145+
description: "True when the component is focused.",
146+
},
147+
$isHovered: {
148+
type: PropTypes.Boolean,
149+
description: "True when the component is hovered.",
150+
},
151+
$isActive: {
152+
type: PropTypes.Boolean,
153+
description: "True when the component is active.",
154+
},
155+
$error: "error",
156+
$checked: "checked",
157+
$isIndeterminate: "isIndeterminate",
158+
$required: "required",
159+
$disabled: "disabled",
160+
$labelPlacement: "labelPlacement",
161+
},
162+
},
163+
},
164+
},
165+
};
166+
167+
export default CheckboxConfig;

‎documentation-site/components/yard/config/switch.ts‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/*
2+
Copyright (c) Uber Technologies, Inc.
3+
4+
This source code is licensed under the MIT license found in the
5+
LICENSE file in the root directory of this source tree.
6+
*/
7+
import pick from "just-pick";
8+
import { Switch, LABEL_PLACEMENT, SIZE } from "baseui/switch";
9+
import { PropTypes } from "react-view";
10+
import type { TConfig } from "../types";
11+
import { changeHandlers } from "./common/common";
12+
13+
const SwitchConfig: TConfig = {
14+
componentName: "Switch",
15+
imports: {
16+
"baseui/switch": {
17+
named: ["Switch"],
18+
},
19+
},
20+
scope: {
21+
Switch,
22+
LABEL_PLACEMENT,
23+
SIZE,
24+
},
25+
theme: [
26+
"contentStateDisabled",
27+
"contentTertiary",
28+
"contentPrimary",
29+
"hoverOverlayAlpha",
30+
"contentInversePrimary",
31+
"hoverOverlayInverseAlpha",
32+
"backgroundTertiary",
33+
"backgroundStateDisabled",
34+
"backgroundInversePrimary",
35+
"borderStateDisabled",
36+
],
37+
props: {
38+
checked: {
39+
value: false,
40+
type: PropTypes.Boolean,
41+
description: "Renders component in checked state.",
42+
stateful: true,
43+
},
44+
children: {
45+
value: `Sign up for the newsletter`,
46+
type: PropTypes.ReactNode,
47+
description: `The React Nodes displayed next to the switch.`,
48+
},
49+
disabled: {
50+
value: false,
51+
type: PropTypes.Boolean,
52+
description: "Renders component in disabled state.",
53+
},
54+
onChange: {
55+
value: "e => setChecked(e.target.checked)",
56+
type: PropTypes.Function,
57+
description: "Called when switch value is changed.",
58+
propHook: {
59+
what: "e.target.checked",
60+
into: "checked",
61+
},
62+
},
63+
showIcon: {
64+
value: false,
65+
type: PropTypes.Boolean,
66+
description: "Renders check icon when switch is enabled.",
67+
},
68+
labelPlacement: {
69+
value: "LABEL_PLACEMENT.right",
70+
options: LABEL_PLACEMENT,
71+
type: PropTypes.Enum,
72+
enumName: "LABEL_PLACEMENT",
73+
description:
74+
"Determines how to position the label relative to the switch.",
75+
imports: {
76+
"baseui/switch": {
77+
named: ["LABEL_PLACEMENT"],
78+
},
79+
},
80+
},
81+
size: {
82+
value: "SIZE.default",
83+
options: SIZE,
84+
type: PropTypes.Enum,
85+
enumName: "SIZE",
86+
description: "Determines the size of the switch(including the label).",
87+
imports: {
88+
"baseui/switch": {
89+
named: ["SIZE"],
90+
},
91+
},
92+
},
93+
required: {
94+
value: false,
95+
type: PropTypes.Boolean,
96+
description: "Renders component in required state.",
97+
hidden: true,
98+
},
99+
inputRef: {
100+
value: undefined,
101+
type: PropTypes.Ref,
102+
description: "A ref to access an input element.",
103+
hidden: true,
104+
},
105+
autoFocus: {
106+
value: false,
107+
type: PropTypes.Boolean,
108+
description: "If true the component will be focused on the first mount.",
109+
hidden: true,
110+
},
111+
containsInteractiveElement: {
112+
value: false,
113+
type: PropTypes.Boolean,
114+
description:
115+
"Indicates the switch label contains an interactive element, and the default label behavior should be prevented for child elements.",
116+
hidden: true,
117+
},
118+
name: {
119+
value: undefined,
120+
type: PropTypes.String,
121+
description: "Name attribute.",
122+
hidden: true,
123+
},
124+
title: {
125+
value: undefined,
126+
type: PropTypes.String,
127+
description: "Title attribute.",
128+
hidden: true,
129+
},
130+
"aria-label": {
131+
value: undefined,
132+
type: PropTypes.String,
133+
description: "Aria-label attribute",
134+
hidden: true,
135+
},
136+
...pick(changeHandlers, [
137+
"onBlur",
138+
"onFocus",
139+
"onMouseDown",
140+
"onMouseEnter",
141+
"onMouseLeave",
142+
]),
143+
overrides: {
144+
value: undefined,
145+
type: PropTypes.Custom,
146+
description: "Lets you customize all aspects of the component.",
147+
custom: {
148+
names: ["Root", "Toggle", "ToggleTrack", "Label", "Input"],
149+
sharedProps: {
150+
$isFocused: {
151+
type: PropTypes.Boolean,
152+
description: "True when the component is focused.",
153+
},
154+
$isHovered: {
155+
type: PropTypes.Boolean,
156+
description: "True when the component is hovered.",
157+
},
158+
$isActive: {
159+
type: PropTypes.Boolean,
160+
description: "True when the component is active.",
161+
},
162+
$checked: "checked",
163+
$required: "required",
164+
$disabled: "disabled",
165+
$labelPlacement: "labelPlacement",
166+
$size: "size",
167+
$showIcon: "showIcon",
168+
},
169+
},
170+
},
171+
},
172+
};
173+
174+
export default SwitchConfig;

‎documentation-site/examples/checkbox-v2/alignment.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from "react";
2+
import { Checkbox, LABEL_PLACEMENT } from "baseui/checkbox-v2";
3+
4+
export default function Example() {
5+
const [checkboxes, setCheckboxes] = React.useState([false, false]);
6+
return (
7+
<div
8+
style={{
9+
display: "flex",
10+
justifyContent: "flex-start",
11+
margin: "8px 0 8px 12px",
12+
}}
13+
>
14+
<Checkbox
15+
checked={checkboxes[0]}
16+
onChange={(e) => {
17+
const nextCheckboxes = [...checkboxes];
18+
nextCheckboxes[0] = e.currentTarget.checked;
19+
setCheckboxes(nextCheckboxes);
20+
}}
21+
labelPlacement={LABEL_PLACEMENT.left}
22+
>
23+
Label on the left
24+
</Checkbox>
25+
<Checkbox
26+
checked={checkboxes[1]}
27+
onChange={(e) => {
28+
const nextCheckboxes = [...checkboxes];
29+
nextCheckboxes[1] = e.currentTarget.checked;
30+
setCheckboxes(nextCheckboxes);
31+
}}
32+
labelPlacement={LABEL_PLACEMENT.right}
33+
>
34+
Label on the right
35+
</Checkbox>
36+
</div>
37+
);
38+
}

‎documentation-site/examples/checkbox-v2/basic-controlled.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from "react";
2+
import { Checkbox } from "baseui/checkbox-v2";
3+
4+
export default function Example() {
5+
const [checked, setChecked] = React.useState(true);
6+
return (
7+
<Checkbox checked={checked} onChange={() => setChecked(!checked)}>
8+
click me
9+
</Checkbox>
10+
);
11+
}

0 commit comments

Comments
 (0)