Design system that powers the BigCommerce ecosystem.
OTHER License
Published by chanceaclark over 4 years ago
Selects
and Multiselects
have been split into its own component. Props changed for Dropdowns
& Selects
.** Dropdown **
Old:
<Dropdown
maxHeight={250}
options={[
{ content: 'Edit', onClick: item => item, icon: <EditIcon />, value: 'edit' },
{
content: 'Duplicate',
onClick: item => item,
value: 'duplicate',
icon: <FileCopyIcon />,
},
{
content: 'Copy',
onClick: item => item,
value: 'copy',
icon: <AssignmentIcon />,
disabled: true,
tooltip: 'You cannot copy this item...',
},
{
content: 'Delete',
onClick: item => item,
value: 'delete',
icon: <DeleteIcon />,
actionType: 'destructive',
},
{
content: 'Link',
icon: <OpenInNewIcon />,
type: 'link',
url: '#',
},
]}
placement="bottom-start"
trigger={<Button>Open Menu</Button>}
/>
New:
<Dropdown
maxHeight={250}
items={[
{ content: 'Edit', onItemClick: item => item, hash: 'edit', icon: <EditIcon /> },
{
content: 'Duplicate',
onItemClick: item => item,
hash: 'duplicate',
icon: <FileCopyIcon />,
},
{
content: 'Copy',
onItemClick: item => item,
hash: 'copy',
icon: <AssignmentIcon />,
disabled: true,
tooltip: 'You cannot copy this item...',
},
{
content: 'Delete',
onItemClick: item => item,
hash: 'delete',
icon: <DeleteIcon />,
actionType: 'destructive',
},
{
content: 'Link',
icon: <OpenInNewIcon />,
type: 'link',
url: '#',
},
]}
placement="bottom-start"
toggle={<Button>Open Menu</Button>}
/>
** Select **
Old:
<Select
action={{
actionType: 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onClick: () => null,
}}
label="Countries"
maxHeight={300}
onChange={handleChange}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'ru', content: 'Russia', disabled: true },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
New:
<Select
action={{
actionType: 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onActionClick: () => null,
}}
label="Countries"
maxHeight={300}
onOptionChange={handleChange}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'ru', content: 'Russia', disabled: true },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
** MultiSelect **
Old:
<Select
action={{
actionType: 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onClick: () => null,
}}
label="Countries"
maxHeight={300}
multi={true}
onChange={handleChange}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'ru', content: 'Russia', disabled: true },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
New:
<MultiSelect
action={{
actionType: 'destructive' as 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onActionClick: () => null,
}}
filterable={true}
label="Countries"
maxHeight={300}
onOptionsChange={handleChange}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'ru', content: 'England' },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
<Badge>label</Badge>
to <Badge label="label" />
.Published by chanceaclark over 4 years ago
Published by chanceaclark over 4 years ago
FormControlError
, FormControlLabel
, FormGroup
, and Fieldset
Form.Error
, Form.Label
, Form.Group
, and Form.Fieldset
respectively.RadioLabel
instead of Radio.Label
.CheckboxLabel
instead of Checkbox.Label
.FormControlDescription
, FormControlError
, and FormControlLabel
Textarea.Description
, Textarea.Error
, and Textarea.Label
respectively.FormControlDescription
, FormControlError
, and FormControlLabel
Input.Description
, Input.Error
, and Input.Label
respectively.Form.Fieldset
renamed to Fieldset
and will now have toimport { Fieldset } from '@bigcommerce/big-design';
Grid.Item
renamed to GridItem
and will now have toFlex.Item
renamed to FlexItem
and will now have toPublished by chanceaclark over 4 years ago
FormControlError
, FormControlLabel
, FormGroup
, and Fieldset
Form.Error
, Form.Label
, Form.Group
, and Form.Fieldset
respectively.RadioLabel
instead of Radio.Label
.CheckboxLabel
instead of Checkbox.Label
.FormControlDescription
, FormControlError
, and FormControlLabel
Textarea.Description
, Textarea.Error
, and Textarea.Label
respectively.FormControlDescription
, FormControlError
, and FormControlLabel
Input.Description
, Input.Error
, and Input.Label
respectively.Form.Fieldset
renamed to Fieldset
and will now have toimport { Fieldset } from '@bigcommerce/big-design';
Grid.Item
renamed to GridItem
and will now have toFlex.Item
renamed to FlexItem
and will now have toPublished by chanceaclark over 4 years ago
Published by chanceaclark over 4 years ago
Published by chanceaclark over 4 years ago
Published by deini almost 5 years ago
Published by deini almost 5 years ago
Published by deini almost 5 years ago
Published by deini almost 5 years ago
Published by deini almost 5 years ago
Published by deini almost 5 years ago
theme
prop override is no longer supported.Published by chanceaclark almost 5 years ago
Published by chanceaclark almost 5 years ago
Published by chanceaclark almost 5 years ago
Published by chanceaclark almost 5 years ago