Skip to content

Commit 5ff5c2c

Browse files
hualf1995hualf1995
authored
Add new radio-v2 component (#5393)
* Add new radio-v2 component * 16.2.0 * fix some prettier format issues * 17.1.0
1 parent ce1dc30 commit 5ff5c2c

32 files changed

Lines changed: 2231 additions & 8 deletions

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

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
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+
9+
import { Radio, RadioGroup, ALIGN, LABEL_PLACEMENT } from "baseui/radio-v2";
10+
import { PropTypes } from "react-view";
11+
import type { TConfig } from "../types";
12+
13+
import { changeHandlers } from "./common/common";
14+
15+
const RadioGroupConfig: TConfig = {
16+
componentName: "RadioGroup",
17+
imports: {
18+
"baseui/radio-v2": { named: ["RadioGroup"] },
19+
},
20+
scope: {
21+
Radio,
22+
RadioGroup,
23+
ALIGN,
24+
LABEL_PLACEMENT,
25+
},
26+
theme: [
27+
"tickFill",
28+
"tickFillHover",
29+
"tickFillActive",
30+
"tickFillSelected",
31+
"tickFillSelectedHover",
32+
"tickFillSelectedHoverActive",
33+
"tickFillError",
34+
"tickFillErrorHover",
35+
"tickFillErrorHoverActive",
36+
"tickFillErrorSelected",
37+
"tickFillErrorSelectedHover",
38+
"tickFillErrorSelectedHoverActive",
39+
"tickFillDisabled",
40+
"tickBorder",
41+
"tickBorderError",
42+
"tickMarkFill",
43+
"tickMarkFillError",
44+
"tickMarkFillDisabled",
45+
],
46+
props: {
47+
value: {
48+
value: "2",
49+
type: PropTypes.String,
50+
description: "Passed to the input element value attribute",
51+
stateful: true,
52+
},
53+
onChange: {
54+
value: "e => setValue(e.currentTarget.value)",
55+
type: PropTypes.Function,
56+
description: "Handler for change events on trigger element.",
57+
propHook: {
58+
what: "e.target.value",
59+
into: "value",
60+
},
61+
},
62+
children: {
63+
value: `<Radio value="1">One</Radio>
64+
<Radio
65+
value="2"
66+
description="This is a radio-v2 description"
67+
>
68+
Two
69+
</Radio>
70+
<Radio value="3">
71+
Three
72+
</Radio>`,
73+
type: PropTypes.ReactNode,
74+
description: "Radios within the RadioGroup",
75+
imports: {
76+
"baseui/radio-v2": { named: ["Radio"] },
77+
},
78+
},
79+
name: {
80+
value: "number",
81+
type: PropTypes.String,
82+
description:
83+
"String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string.",
84+
hidden: false,
85+
},
86+
align: {
87+
value: "ALIGN.vertical",
88+
type: PropTypes.Enum,
89+
options: ALIGN,
90+
description: "How to position radio-v2 buttons in the group.",
91+
imports: {
92+
"baseui/radio-v2": {
93+
named: ["ALIGN"],
94+
},
95+
},
96+
},
97+
labelPlacement: {
98+
value: "LABEL_PLACEMENT.right",
99+
type: PropTypes.Enum,
100+
options: LABEL_PLACEMENT,
101+
enumName: "LABEL_PLACEMENT",
102+
description:
103+
"How to position radio-v2 label relative to the radio itself.",
104+
imports: {
105+
"baseui/radio-v2": {
106+
named: ["LABEL_PLACEMENT"],
107+
},
108+
},
109+
},
110+
disabled: {
111+
value: false,
112+
type: PropTypes.Boolean,
113+
description:
114+
"Disabled all radio-v2 group from being changed. To disable some of radios provide disabled flag in each of them.",
115+
},
116+
error: {
117+
value: false,
118+
type: PropTypes.Boolean,
119+
description: "Sets radio-v2 group into error state.",
120+
},
121+
required: {
122+
value: false,
123+
type: PropTypes.Boolean,
124+
description: "Set if the control is required to be checked.",
125+
hidden: true,
126+
},
127+
autoFocus: {
128+
value: false,
129+
type: PropTypes.Boolean,
130+
description: "Set to be focused (active) on selectedchecked radio-v2.",
131+
hidden: true,
132+
},
133+
containsInteractiveElement: {
134+
value: false,
135+
type: PropTypes.Boolean,
136+
description:
137+
"Indicates the radio-v2 contains an interactive element, and the default label behavior should be prevented for child elements.",
138+
hidden: true,
139+
},
140+
"aria-label": {
141+
value: undefined,
142+
type: PropTypes.String,
143+
description: `Sets aria-label attribute.`,
144+
hidden: true,
145+
},
146+
"aria-labelledby": {
147+
value: undefined,
148+
type: PropTypes.String,
149+
description: `Sets aria-labelledby attribute.`,
150+
hidden: true,
151+
},
152+
...pick(changeHandlers, [
153+
"onBlur",
154+
"onFocus",
155+
"onMouseLeave",
156+
"onMouseEnter",
157+
]),
158+
overrides: {
159+
value: undefined,
160+
type: PropTypes.Custom,
161+
description: "Lets you customize all aspects of the component.",
162+
custom: {
163+
names: ["Root"],
164+
sharedProps: {
165+
$isFocused: {
166+
type: PropTypes.Boolean,
167+
description: "True when the component is focused.",
168+
},
169+
$isHovered: {
170+
type: PropTypes.Boolean,
171+
description: "True when the component is hovered.",
172+
},
173+
$isActive: {
174+
type: PropTypes.Boolean,
175+
description: "True when the component is active.",
176+
},
177+
$error: "error",
178+
$checked: {
179+
type: PropTypes.Boolean,
180+
description: "True when the component is active.",
181+
},
182+
$required: "required",
183+
$disabled: "disabled",
184+
},
185+
},
186+
},
187+
},
188+
};
189+
190+
export default RadioGroupConfig;

‎documentation-site/examples/radio-v2/basic.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from "react";
2+
import { Radio, RadioGroup } from "baseui/radio-v2";
3+
4+
export default function Example() {
5+
const [value, setValue] = React.useState("1");
6+
return (
7+
<RadioGroup
8+
name="basic usage"
9+
onChange={(e) => setValue(e.target.value)}
10+
value={value}
11+
>
12+
<Radio value="1">First</Radio>
13+
<Radio
14+
value="2"
15+
description="This is a radio description, it gives a little more in-yo-face context about what this is."
16+
>
17+
Second
18+
</Radio>
19+
<Radio value="3">Third</Radio>
20+
</RadioGroup>
21+
);
22+
}

‎documentation-site/examples/radio-v2/disabled.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 { Radio, RadioGroup } from "baseui/radio-v2";
3+
4+
export default function Example() {
5+
return (
6+
<RadioGroup disabled name="disabled" value="1">
7+
<Radio value="1">Checked</Radio>
8+
<Radio value="2">Unchecked</Radio>
9+
</RadioGroup>
10+
);
11+
}

‎documentation-site/examples/radio-v2/error.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from "react";
2+
import { Radio, RadioGroup } from "baseui/radio-v2";
3+
4+
export default function Example() {
5+
const [value, setValue] = React.useState("1");
6+
return (
7+
<RadioGroup
8+
error
9+
name="error"
10+
onChange={(e) => setValue(e.target.value)}
11+
value={value}
12+
>
13+
<Radio value="1">First</Radio>
14+
<Radio value="2">Second</Radio>
15+
<Radio value="3">Third</Radio>
16+
</RadioGroup>
17+
);
18+
}

‎documentation-site/examples/radio-v2/horizontal-align.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from "react";
2+
import { Radio, RadioGroup } from "baseui/radio-v2";
3+
4+
export default function Example() {
5+
const [value, setValue] = React.useState("1");
6+
return (
7+
<RadioGroup
8+
align="horizontal"
9+
name="horizontal"
10+
onChange={(e) => setValue(e.target.value)}
11+
value={value}
12+
>
13+
<Radio value="1">First</Radio>
14+
<Radio value="2">Second</Radio>
15+
<Radio value="3">Third</Radio>
16+
</RadioGroup>
17+
);
18+
}

‎documentation-site/examples/radio-v2/overrides.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from "react";
2+
import { Radio, RadioGroup } from "baseui/radio-v2";
3+
import { RadioOverrides } from "baseui/radio-v2";
4+
5+
export default function Example() {
6+
const [value, setValue] = React.useState("1");
7+
const radioOverrides: RadioOverrides = {
8+
RadioMarkOuter: {
9+
style: ({ $theme }) => ({
10+
backgroundColor: $theme.colors.positive,
11+
}),
12+
},
13+
};
14+
return (
15+
<RadioGroup
16+
name="overrides"
17+
onChange={(e) => setValue(e.target.value)}
18+
value={value}
19+
>
20+
<Radio overrides={radioOverrides} value="1">
21+
Custom label for value 1
22+
</Radio>
23+
<Radio overrides={radioOverrides} value="2">
24+
Custom label for value 2
25+
</Radio>
26+
<Radio overrides={radioOverrides} value="3">
27+
Custom label for value 3
28+
</Radio>
29+
</RadioGroup>
30+
);
31+
}

‎documentation-site/examples/radio-v2/stateful.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from "react";
2+
import { Radio, StatefulRadioGroup } from "baseui/radio-v2";
3+
4+
export default function Example() {
5+
return (
6+
<StatefulRadioGroup name="stateful" initialState={{ value: "2" }}>
7+
<Radio value="1">First</Radio>
8+
<Radio value="2">Second</Radio>
9+
<Radio value="3">Third</Radio>
10+
</StatefulRadioGroup>
11+
);
12+
}

‎documentation-site/pages/components/radio-v2.mdx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import Example from "../../components/example";
2+
import Layout from "../../components/layout";
3+
import Exports from "../../components/exports";
4+
5+
import Basic from "examples/radio-v2/basic.tsx";
6+
import Stateful from "examples/radio-v2/stateful.tsx";
7+
import HorizontalAlign from "examples/radio-v2/horizontal-align.tsx";
8+
import Error from "examples/radio-v2/error.tsx";
9+
import Customization from "examples/radio-v2/overrides.tsx";
10+
import Disabled from "examples/radio-v2/disabled.tsx";
11+
12+
import { Radio, StatefulRadioGroup } from "baseui/radio-v2";
13+
import * as RadioExports from "baseui/radio-v2";
14+
15+
import Yard from "../../components/yard/index";
16+
import radioYardConfig from "../../components/yard/config/radio-v2";
17+
18+
export default Layout;
19+
20+
# Radio
21+
22+
<Yard placeholderHeight={122} {...radioYardConfig} />
23+
24+
## Notes
25+
26+
- Radios are used when only one choice may be selected in a series of options.
27+
- Label placement is default to right to the control. Description label is optional.
28+
- We support both stateful and stateless radiogroup components to group radios in addition to some built in features: keyboard navigation, a11y support.
29+
30+
## Examples
31+
32+
<Example title="Basic usage" path="radio-v2/basic.tsx">
33+
<Basic />
34+
</Example>
35+
36+
<Example title="Disabled radios" path="radio-v2/disabled.tsx">
37+
<Disabled />
38+
</Example>
39+
40+
<Example title="Horizontal alignment" path="radio-v2/horizontal-align.tsx">
41+
<HorizontalAlign />
42+
</Example>
43+
44+
<Example title="Error state" path="radio-v2/error.tsx">
45+
<Error />
46+
</Example>
47+
48+
<Example title="Overrides usage" path="radio-v2/overrides.tsx">
49+
<Customization />
50+
</Example>
51+
52+
<Example title="Stateful (uncontrolled) usage" path="radio-v2/stateful.tsx">
53+
<Stateful />
54+
</Example>
55+
56+
As with many of our components, there is also an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) version, `StatefulRadioGroup`, which manages its own state.
57+
58+
<Exports
59+
component={RadioExports}
60+
title="Radio exports"
61+
path="baseui/radio-v2"
62+
/>

‎documentation-site/pages/components/radio.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,22 @@ import * as RadioExports from "baseui/radio";
1515
import Yard from "../../components/yard/index";
1616
import radioYardConfig from "../../components/yard/config/radio";
1717

18+
import { Notification, KIND as NOTIFICATION_KIND } from "baseui/notification";
19+
1820
export default Layout;
1921

22+
<Notification
23+
overrides={{ Body: { style: { width: "auto", margin: "16px 0 0 0" } } }}
24+
kind={NOTIFICATION_KIND.warning}
25+
>
26+
This Radio component is about to be deprecated in favor of the new Radio-v2
27+
component. The supported apis keep almost same, so the migration just requires
28+
minimal efforts(most likely only change import path) but gains much more
29+
benefits. We encouraged you to start new implementations with Radio-v2
30+
depending your use case and design. Any migrations from Radio to Radio-v2 or
31+
Switch are recommended.
32+
</Notification>
33+
2034
# Radio
2135

2236
<Yard placeholderHeight={122} {...radioYardConfig} />

0 commit comments

Comments
 (0)