Skip to content
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

Jump to bottom

feat(Radio): improve Radio component #199

Merged
merged 4 commits into from
Jul 18, 2023
Merged

feat(Radio): improve Radio component #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
076e02c
refactor(Radio): use input and label elements instead of divs
beawar Jul 10, 2023
fdb0c6f
feat(Radio,types): make Radio value type generic
beawar Jul 14, 2023
a8dde94
test: remove duplicated test
beawar Jul 17, 2023
489d164
fix: create id with useMemo instead of useState
beawar Jul 18, 2023
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
223 changes: 93 additions & 130 deletions src/components/inputs/Radio.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ Radio buttons can be used to select one option out of a list of many.

Radio should be used in combination with the RadioGroup component as demonstrated in [these examples](#/Components/Inputs/RadioGroup).

### props combinator
### Props combinator

```jsx
import {useState, useCallback} from 'react';
import { Select } from '@zextras/carbonio-design-system';
import { useState, useCallback, useMemo } from 'react';
import { Select, useTheme, Container, Row } from '@zextras/carbonio-design-system';
import { map } from 'lodash';

const [checked1, setChecked1] = useState(false);

Expand All @@ -30,103 +31,47 @@ const sizeItems = [
];
const [selectedSize, setSelectedSize] = useState('medium');

const iconColorItems = [
{
label: 'currentColor',
value: 'currentColor'
},
{
label: 'transparent',
value: 'transparent'
},
{
label: 'primary',
value: 'primary'
},
{
label: 'secondary',
value: 'secondary'
},
{
label: 'header',
value: 'header'
},
{
label: 'highlight',
value: 'highlight'
},
{
label: 'gray0',
value: 'gray0'
},
{
label: 'gray1',
value: 'gray1'
},
{
label: 'gray2',
value: 'gray2'
},
{
label: 'gray3',
value: 'gray3'
},
{
label: 'gray4',
value: 'gray4'
},
{
label: 'gray5',
value: 'gray5'
},
{
label: 'gray6',
value: 'gray6'
},
{
label: 'warning',
value: 'warning'
},
{
label: 'error',
value: 'error'
},
{
label: 'success',
value: 'success'
},
{
label: 'info',
value: 'info'
},
{
label: 'text',
value: 'text'
}
];
const theme = useTheme();

const iconColorItems = useMemo(() => map(theme.palette, (value, key) => ({
label: key,
value: key
})), [theme]);

const [selectedIconColor, setSelectedIconColor] = useState('gray0');

<>
<Select
items={sizeItems}
background="gray5"
label="Size"
onChange={setSelectedSize}
defaultSelection={{ value: 'medium', label: 'medium' }}
/>
<Select
items={iconColorItems}
background="gray5"
label="iconColor"
onChange={setSelectedIconColor}
defaultSelection={{ value: 'gray0', label: 'gray0' }}
/>
<Radio iconColor={selectedIconColor} size={selectedSize} checked={checked1} onClick={onClick1} label={`size ${selectedSize}, not disabled, iconColor ${selectedIconColor}, checked ${checked1}`} />
<Radio disabled iconColor={selectedIconColor} size={selectedSize} checked={checked1} onClick={onClick1} label={`size ${selectedSize}, disabled, iconColor ${selectedIconColor}, checked ${checked1}`} />
</>
<Container gap={'0.5rem'}>
<Container gap={'0.5rem'} orientation={'horizontal'}>
<Row width={'50%'}>
<Select
items={sizeItems}
background='gray5'
label='Size'
onChange={setSelectedSize}
defaultSelection={{ value: 'medium', label: 'medium' }}
/>
</Row>
<Row width={'50%'}>
<Select
items={iconColorItems}
background='gray5'
label='iconColor'
onChange={setSelectedIconColor}
defaultSelection={{ value: 'gray0', label: 'gray0' }}
/>
</Row>
</Container>
<Radio iconColor={selectedIconColor} size={selectedSize} checked={checked1} onClick={onClick1}
label={`size ${selectedSize}, not disabled, iconColor ${selectedIconColor}, checked ${checked1}`} />
<Radio disabled iconColor={selectedIconColor} size={selectedSize} checked={checked1}
onClick={onClick1}
label={`size ${selectedSize}, disabled, iconColor ${selectedIconColor}, checked ${checked1}`} />
</Container>;
```

### check isDefaultPrevented to avoid that component label triggers checked switch
## Tips
By default, click on the label (even custom ones) toggle the value of the radio input.
In order to prevent this behavior, you need to prevent the default on the click event of the label itself.

```jsx
import { useState } from 'react';
Expand Down Expand Up @@ -160,62 +105,80 @@ import { Row, Text, Padding, Select } from '@zextras/carbonio-design-system';
### Controlled

```jsx
import { useState } from 'react';
import { Button, RadioGroup, Row, Input, Text, Padding, Select } from '@zextras/carbonio-design-system';
import { useState, useCallback, useMemo, useRef } from 'react';
import {
Button,
RadioGroup,
Row,
Input,
Text,
Padding,
Select
} from '@zextras/carbonio-design-system';

const [activeValue, setActiveValue] = useState('salad');

const updateActiveValue = useCallback((value) => () => {
setActiveValue((prevState) => value === prevState ? '' : value);
}, []);

<>
<Radio label="Chicken" value="chicken" />
<Radio label="Salad" value="salad" />
<Radio label="Tomato" value="tomato" />
<Radio label='Chicken' value='chicken' onClick={updateActiveValue('chicken')}
checked={activeValue === 'chicken'} />
<Radio label='Salad' value='salad' onClick={updateActiveValue('salad')}
checked={activeValue === 'salad'} />
<Radio label='Tomato' value='tomato' onClick={updateActiveValue('tomato')}
checked={activeValue === 'tomato'} />
<Radio
label={
<Row takeAvailableSpace mainAlignment="flex-start" wrap="nowrap">
<Text overflow="break-word">Day</Text>
<Padding horizontal="small"><Input backgroundColor="gray5" label="Day" defaultValue="17" /></Padding>
<Text overflow="break-word">of every</Text>
<Padding left="small"><Input backgroundColor="gray5" label="Month" defaultValue="1" /></Padding>
<Row takeAvailableSpace mainAlignment='flex-start' wrap='nowrap' gap={'0.25rem'}>
<Text overflow='break-word'>Day</Text>
<Input backgroundColor='gray5' label='Day' defaultValue='17' />
<Text overflow='break-word'>of every</Text>
<Input backgroundColor='gray5' label='Month' defaultValue='1' />
</Row>
}
value="complex-1"
value='complex-1'
onClick={updateActiveValue('complex-1')}
checked={activeValue === 'complex-1'}
/>
<Radio
label={
<Row takeAvailableSpace mainAlignment="flex-start" wrap="nowrap">
<Text overflow="break-word">The</Text>
<Padding horizontal="small">
<Select
display="inline-block"
dropdownWidth="auto"
background="gray5"
label="Number"
items={[{ label: 'Second', value: '1' }]}
defaultSelection={{ value: '1', label: 'Second' }}
/>
</Padding>
<Row takeAvailableSpace mainAlignment='flex-start' wrap='nowrap' gap={'0.25rem'}>
<Text overflow='break-word'>The</Text>
<Select
display='inline-block'
dropdownWidth='auto'
background='gray5'
label='Number'
items={[{ label: 'Second', value: '1' }]}
defaultSelection={{ value: '1', label: 'Second' }}
/>
<Select
display="inline-block"
dropdownWidth="auto"
background="gray5"
label="Day"
display='inline-block'
dropdownWidth='auto'
background='gray5'
label='Day'
items={[{ label: 'Weekend day', value: '1' }]}
defaultSelection={{ value: '1', label: 'Weekend day' }}
/>
<Padding horizontal="small"><Text overflow="break-word">of every</Text></Padding>
<Text overflow='break-word'>of every</Text>
<Select
display="inline-block"
dropdownWidth="auto"
background="gray5"
label="Month"
display='inline-block'
dropdownWidth='auto'
background='gray5'
label='Month'
items={[{ label: 'January', value: '1' }]}
defaultSelection={{ value: '1', label: 'January' }}
/>
</Row>
}
value="complex-2"
value='complex-2'
onClick={updateActiveValue('complex-2')}
checked={activeValue === 'complex-2'}
/>
<Radio label="Mayo" value="mayo" disabled={true} />
<Radio label='Mayo' value='mayo' disabled={true}
onClick={updateActiveValue('mayo')} checked={activeValue === 'mayo'} />
</>;
```

Expand Down
Loading