Skip to content

Commit 8261ef7

Browse files
rohanchkrabrtyrohanchkrabrty
authored
feat: migrate radio to base ui (#569)
* feat: migrate checkbox to base ui * feat: update checkbox tests and docs * feat: migrate avatar to base ui * fix: avatar tests * feat: migrate radio
1 parent 0e70339 commit 8261ef7

File tree

9 files changed

+198
-236
lines changed

9 files changed

+198
-236
lines changed

‎apps/www/src/components/typetable/typetable.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,8 @@
9999
flex-wrap: wrap;
100100
gap: var(--rs-space-1);
101101
}
102+
.required {
103+
color: var(--rs-color-foreground-danger-primary);
104+
position: relative;
105+
top: -4px;
106+
}

‎apps/www/src/components/typetable/typetable.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ export interface TypeNode {
4545
export function TypeTable({
4646
type,
4747
className
48-
}: { type: Record<string, TypeNode>; className?: string }) {
48+
}: {
49+
type: Record<string, TypeNode>;
50+
className?: string;
51+
}) {
4952
const entries = Object.entries(type);
5053

5154
return (
@@ -87,7 +90,7 @@ function Item({
8790
className={deprecated ? styles.propNameDeprecated : styles.propName}
8891
>
8992
{name}
90-
{!required && '?'}
93+
{required ? <span className={styles.required}>*</span> : ''}
9194
</code>
9295
<span className={styles.fieldValue}>
9396
{typeDescriptionLink ? (
@@ -130,7 +133,10 @@ function Item({
130133
language='tsx'
131134
className={cx(styles.fieldCode, styles.fieldValue)}
132135
>
133-
{String(typeDescription ?? type)}
136+
{String(type) +
137+
(!required && !String(type).includes('undefined')
138+
? ' | undefined'
139+
: '')}
134140
</CodeBlock.Code>
135141
</CodeBlock>
136142
</Flex>

‎apps/www/src/content/docs/components/radio/demo.ts‎

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
export const preview = {
44
type: 'code',
55
code: `
6-
<Radio defaultValue="2">
7-
<Flex direction="column" gap="small">
6+
<Radio.Group defaultValue="2">
7+
<Flex direction="column" gap="small">
88
<Flex gap="small" align="center">
9-
<Radio.Item value="1" id="P1" />
10-
<label htmlFor="P1">Option One</label>
11-
</Flex>
12-
<Flex gap="small" align="center">
13-
<Radio.Item value="2" id="P2" />
14-
<label htmlFor="P2">Option Two</label>
15-
</Flex>
16-
<Flex gap="small" align="center">
17-
<Radio.Item value="3" id="P3" disabled/>
18-
<label htmlFor="P3">Option Three</label>
9+
<Radio value="1" id="P1" />
10+
<label htmlFor="P1">Option One</label>
11+
</Flex>
12+
<Flex gap="small" align="center">
13+
<Radio value="2" id="P2" />
14+
<label htmlFor="P2">Option Two</label>
15+
</Flex>
16+
<Flex gap="small" align="center">
17+
<Radio value="3" id="P3" disabled/>
18+
<label htmlFor="P3">Option Three</label>
1919
</Flex>
2020
</Flex>
21-
</Radio>`
21+
</Radio.Group>`
2222
};
2323

2424
export const stateDemo = {
@@ -27,45 +27,43 @@ export const stateDemo = {
2727
{
2828
name: 'Default',
2929
code: `
30-
<Radio defaultValue="1">
30+
<Radio.Group defaultValue="1">
3131
<Flex gap="small" align="center">
32-
<Radio.Item value="1" id="d1" />
32+
<Radio value="1" id="d1" />
3333
<label htmlFor="d1">Default Option</label>
3434
</Flex>
35-
</Radio>`
35+
</Radio.Group>`
3636
},
3737
{
3838
name: 'Disabled',
3939
code: `
40-
<Radio defaultValue="1">
40+
<Radio.Group defaultValue="1">
4141
<Flex gap="small" align="center">
42-
<Radio.Item value="1" disabled id="dis1" />
42+
<Radio value="1" disabled id="dis1" />
4343
<label htmlFor="dis1">Disabled Option</label>
4444
</Flex>
45-
</Radio>`
45+
</Radio.Group>`
4646
}
4747
]
4848
};
4949

5050
export const labelDemo = {
5151
type: 'code',
5252
code: `
53-
<Radio defaultValue="1">
54-
<Flex direction="column" gap="small">
53+
<Radio.Group defaultValue="1">
5554
<Flex gap="small" align="center">
56-
<Radio.Item value="1" id="L1" />
55+
<Radio value="1" id="L1" />
5756
<label htmlFor="L1">Option One</label>
5857
</Flex>
5958
<Flex gap="small" align="center">
60-
<Radio.Item value="2" id="L2" />
59+
<Radio value="2" id="L2" />
6160
<label htmlFor="L2">Option Two</label>
6261
</Flex>
6362
<Flex gap="small" align="center">
64-
<Radio.Item value="3" id="L3" />
63+
<Radio value="3" id="L3" />
6564
<label htmlFor="L3">Option Three</label>
6665
</Flex>
67-
</Flex>
68-
</Radio>`
66+
</Radio.Group>`
6967
};
7068

7169
export const formDemo = {
@@ -77,18 +75,18 @@ export const formDemo = {
7775
alert(JSON.stringify(Object.fromEntries(formData)));
7876
}}>
7977
<Flex direction="column" gap="medium">
80-
<Radio name="plan" defaultValue="monthly" required>
78+
<Radio.Group name="plan" defaultValue="monthly">
8179
<Flex direction="column" gap="small">
8280
<Flex gap="small" align="center">
83-
<Radio.Item value="monthly" id="mp" />
81+
<Radio value="monthly" id="mp" />
8482
<label htmlFor="mp">Monthly Plan</label>
8583
</Flex>
8684
<Flex gap="small" align="center">
87-
<Radio.Item value="yearly" id="yp" />
85+
<Radio value="yearly" id="yp" />
8886
<label htmlFor="yp">Yearly Plan</label>
8987
</Flex>
9088
</Flex>
91-
</Radio>
89+
</Radio.Group>
9290
<Button type="submit" width="100%">Submit</Button>
9391
</Flex>
9492
</form>`

‎apps/www/src/content/docs/components/radio/index.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,14 @@ import { Radio } from "@raystack/apsara";
1616

1717
## Radio Props
1818

19-
### Radio Props
19+
### Radio.Group Props
20+
21+
<auto-type-table path="./props.ts" name="RadioGroupProps" />
2022

21-
<auto-type-table path="./props.ts" name="RadioRootProps" />
23+
### Radio Props
2224

23-
### Radio.Item Props
25+
<auto-type-table path="./props.ts" name="RadioProps" />
2426

25-
<auto-type-table path="./props.ts" name="RadioItemProps" />
2627

2728
## Examples
2829

‎apps/www/src/content/docs/components/radio/props.ts‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,56 @@
1-
export interface RadioRootProps {
1+
export interface RadioGroupProps {
22
/** The value of the radio item that should be checked by default. */
3-
defaultValue?: string;
3+
defaultValue?: any;
44

55
/** The controlled value of the radio item that is checked. */
6-
value?: string;
6+
value?: any;
77

88
/** Event handler called when the value changes. */
9-
onValueChange?: (value: string) => void;
9+
onValueChange?: (value: any, event: Event) => void;
1010

1111
/** When true, prevents user interaction with the radio group. */
1212
disabled?: boolean;
1313

1414
/** The name of the radio group when submitted as a form field. */
1515
name?: string;
1616

17-
/** When true, indicates that a value must be selected before the form can be submitted. */
18-
required?: boolean;
19-
20-
/** The orientation of the radio group. */
21-
orientation?: 'horizontal' | 'vertical';
22-
23-
/** The reading direction of the radio group. */
24-
dir?: 'ltr' | 'rtl';
25-
26-
/** A label for the radio group that is announced by screen readers. */
27-
ariaLabel?: string;
17+
/** Additional CSS class name. */
18+
className?: string;
19+
20+
/**
21+
* Allows you to replace the component's HTML element with a different tag, or compose it with another component.
22+
* Accepts a `ReactElement` or a function that returns the element to render.
23+
*
24+
* @remarks `ReactElement | function`
25+
*/
26+
render?:
27+
| React.ReactElement
28+
| ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement);
2829
}
2930

30-
export interface RadioItemProps {
31+
export interface RadioProps {
3132
/** The unique value of the radio item. */
32-
value: string;
33+
value: any;
3334

3435
/** When true, prevents user interaction with this radio item. */
3536
disabled?: boolean;
3637

37-
/** When true, indicates that this radio item must be checked. */
38-
required?: boolean;
39-
4038
/** The unique identifier for the radio item. */
4139
id?: string;
40+
41+
/** Additional CSS class name. */
42+
className?: string;
43+
44+
/**
45+
* Allows you to replace the component's HTML element with a different tag, or compose it with another component.
46+
* Accepts a `ReactElement` or a function that returns the element to render.
47+
*
48+
* @remarks `ReactElement | function`
49+
*/
50+
render?:
51+
| React.ReactElement
52+
| ((
53+
props: React.HTMLAttributes<HTMLElement>,
54+
state: { checked: boolean }
55+
) => React.ReactElement);
4256
}

0 commit comments

Comments
 (0)