Design guidelines All the items in the list must have the same content structure. For example either all the items must have a startElement or none, there shouldn't be a some items with startElement and some without it.
Do not use List in instances where the items can have nested items.
Primitives This package exposes 3 list components as below:
List Renders a list of items that can be links or buttons.
Basic Usage Fills container width.
List.Item This primitive renders a single list item that can be a link, button or be non-interactive.
Basic Usage The content of a list item can be passed as children.
< List.Item > Title </ List.Item >
startElement Renders a ReactNode to the left of the children.
< List.Item
startElement = { < EntityAvatar type = " Organisation " name = " Title " size = " small " /> }
>
Title
</ List.Item >
href Makes the list item behave like a link. Makes the entire list item a click target.
< List.Item href = " # " > Title </ List.Item >
onClick Makes the list item behave like a button. Makes the entire list item a click target.
< List.Item onClick = { ( ) => alert ( 'Clicked' ) } > Title </ List.Item >
endElement Renders a ReactNode to the right of children.
< List.Item endElement = { < Badge label = " Active " tone = " positive " /> } >
Title
</ List.Item >
selected Optionally mark interactive elements (elements with href or onClick) as selected.
< List.Item
href = " # "
endElement = { < Badge label = " Active " tone = " positive " /> }
selected
>
Title
</ List.Item >
disabled List item can be marked as disabled.
< List.Item
endElement = { < Badge label = " Disabled " tone = " neutral " /> }
isDisabled = { true }
>
Title
</ List.Item >
Non-interactive items A list item is not interactive if neither of the href or onClick props are provided. Non-interactive items may be used for items that require a custom action so that it may stand out from the rest of the items.
< List.Item > I 'm not interactive </ List.Item >
Check this example for more details.
RadioList Renders a list of items as a radio group, allowing the user to select a single item from that list.
Fills container width.
Basic Usage const [ value , setValue ] = useState ( '' ) ;
< RadioList value = { value } onChange = { setValue } >
< RadioList.Item value = " 1 " > Item 1 </ RadioList.Item >
< RadioList.Item value = " 2 " > Item 2 </ RadioList.Item >
</ RadioList > ;
value The value of the radio group.
onChange Sets the new value of the radio group when the user makes a selection.
RadioList.Item Renders a single list item as a radio input.
Basic Usage The content of a radio item can be passed as children.
< RadioList.Item value = " 1 " > Item 1 </ RadioList.Item >
value The value of the list item. This is the value that will be emitted to the onChange handler in <RadioList />
startElement Renders a ReactNode to the left of the children.
< RadioList.Item
value = " 1 "
startElement = { < EntityAvatar type = " Organisation " name = " Title " size = " small " /> }
>
Item 1
</ RadioList.Item >
CheckList Renders a list of items as checkboxes, allowing the user to make multiple selections.
Basic Usage const [ values , setValues ] = useState < Array < string >> [ ] ;
const createOnChangeHandle = ( value : string ) => {
return ( event : React . ChangeEvent < HTMLInputElement > ) => {
const checked = event . target . checked ;
if ( ! checked ) {
setValues ( ( values ) => values . filter ( ( v ) => v !== value ) ) ;
} else {
setValues ( ( values ) => [ ... values , value ] ) ;
}
} ;
} ;
return (
< CheckList >
< CheckList.Item
checked = { values . includes ( '1' ) }
onChange = { createOnChangeHandle ( '1' ) }
>
Item 1
</ CheckList.Item >
< CheckList.Item
checked = { values . includes ( '2' ) }
onChange = { createOnChangeHandle ( '2' ) }
>
Item 2
</ CheckList.Item >
</ CheckList >
) ;
CheckList.Item Renders a single list item as a checkbox input.
Basic Usage The contents of a checkbox item can be passed as children.
< CheckList.Item checked = { true } onChange = { ( ) => { } } >
Item 1
</ CheckList.Item >
checked Sets the checkbox item to be selected or unselected.
startElement Renders a ReactNode to the left of the children.
< CheckList.Item
startElement = { < EntityAvatar type = " Organisation " name = " Title " size = " small " /> }
>
Item 1
</ CheckList.Item >
ItemText Used to render text to the body of an item. It covers the most common text combinations, it's always an option to opt out of this primitive in favor of custom text composition.
Basic Usage < ItemText title = " Some Title " />
title Sets the title of the item.
< ItemText title = " Title " />
subText Sets the subtext of the item.
< ItemText subText = " Subtext " title = " Title " />
superText Sets the superText of the item.
< ItemText superText = " Supertext " title = " Title " />
tone Sets the tone of the subText if provided.
< Stack gap = " large " >
< ItemText subText = " Some error description " title = " Title " tone = " critical " />
< ItemText subText = " Some warnning " title = " Title " tone = " cautious " />
</ Stack >
Recipes Link list
< List >
< List.Item
href = " # "
startElement = {
< EntityAvatar type = " Organisation " name = " Item 1 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 1 " subText = " Description 1 " />
</ List.Item >
< List.Item
href = " # "
startElement = {
< EntityAvatar type = " Organisation " name = " Item 1 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
selected
>
< ItemText title = " Item 2 " subText = " Description 2 " />
</ List.Item >
< List.Item
href = " # "
startElement = {
< EntityAvatar type = " Organisation " name = " Item 1 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 3 " subText = " Description 3 " />
</ List.Item >
< List.Item
href = " # "
startElement = {
< EntityAvatar type = " Organisation " name = " Item 1 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 4 " subText = " Description 4 " />
</ List.Item >
</ List >
< List >
< List.Item
onClick = { ( ) => alert ( 'Item 1' ) }
startElement = {
< EntityAvatar type = " Organisation " name = " Item 1 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 1 " subText = " Description 1 " />
</ List.Item >
< List.Item
onClick = { ( ) => alert ( 'Item 2' ) }
startElement = {
< EntityAvatar type = " Organisation " name = " Item 2 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 2 " subText = " Description 2 " />
</ List.Item >
< List.Item
onClick = { ( ) => alert ( 'Item 3' ) }
startElement = {
< EntityAvatar type = " Organisation " name = " Item 3 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 3 " subText = " Description 3 " />
</ List.Item >
< List.Item
onClick = { ( ) => alert ( 'Item 4' ) }
startElement = {
< EntityAvatar type = " Organisation " name = " Item 4 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 4 " subText = " Description 4 " />
</ List.Item >
</ List >
Radio list
const [ value , setValue ] = useState ( '2' ) ;
return (
< RadioList value = { value } onChange = { setValue } >
< RadioList.Item
value = " 1 "
startElement = {
< EntityAvatar size = " small " type = " Organisation " name = " Item 1 " />
}
>
< ItemText title = " Item 1 " subText = " Description 1 " />
</ RadioList.Item >
< RadioList.Item
value = " 2 "
startElement = {
< EntityAvatar size = " small " type = " Organisation " name = " Item 2 " />
}
>
< ItemText title = " Item 2 " subText = " Description 2 " />
</ RadioList.Item >
</ RadioList >
) ;
Checkbox list
const [ values , setValues ] = useState < string [ ] > ( [ ] ) ;
const createOnChangeHandle = ( value : string ) => {
return ( event : ChangeEvent < HTMLInputElement > ) => {
const checked = event . target . checked ;
if ( ! checked ) {
setValues ( ( values ) => values . filter ( ( v ) => v !== value ) ) ;
} else {
setValues ( ( values ) => [ ... values , value ] ) ;
}
} ;
} ;
return (
< CheckList >
< CheckList.Item
value = " 1 "
checked = { values . includes ( '1' ) }
onChange = { createOnChangeHandle ( '1' ) }
startElement = {
< EntityAvatar size = " small " type = " Organisation " name = " Item 1 " />
}
>
< ItemText title = " Item 1 " subText = " Description 1 " />
</ CheckList.Item >
< CheckList.Item
value = " 2 "
checked = { values . includes ( '2' ) }
onChange = { createOnChangeHandle ( '2' ) }
startElement = {
< EntityAvatar size = " small " type = " Organisation " name = " Item 2 " />
}
>
< ItemText title = " Item 2 " subText = " Description 2 " />
</ CheckList.Item >
< CheckList.Item
value = " 3 "
checked = { values . includes ( '3' ) }
onChange = { createOnChangeHandle ( '3' ) }
startElement = {
< EntityAvatar size = " small " type = " Organisation " name = " Item 3 " />
}
>
< ItemText title = " Item 3 " subText = " Description 3 " />
</ CheckList.Item >
< CheckList.Item
value = " 4 "
checked = { values . includes ( '4' ) }
onChange = { createOnChangeHandle ( '4' ) }
startElement = {
< EntityAvatar size = " small " type = " Organisation " name = " Item 4 " />
}
>
< ItemText title = " Item 4 " subText = " Description 4 " />
</ CheckList.Item >
</ CheckList >
) ;
Custom actions and item states
< List >
< List.Item
onClick = { ( ) => alert ( 'Item 1' ) }
startElement = {
< EntityAvatar type = " Organisation " name = " Item 1 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText title = " Item 1 " subText = " Description 1 " />
</ List.Item >
< List.Item
onClick = { ( ) => alert ( 'Item 2' ) }
startElement = {
< EntityAvatar type = " Organisation " name = " Item 2 " size = " small " guest />
}
endElement = { < Badge label = " Shared " tone = " neutral " /> }
>
< ItemText
title = " Item 2 "
subText = " Description 2 "
superText = " Neutral state "
/>
</ List.Item >
< List.Item
startElement = {
< EntityAvatar type = " Organisation " name = " Item 3 " size = " small " />
}
endElement = {
< Button
variant = " text "
label = " Custom action "
size = " small "
onClick = { ( ) => alert ( 'Custom action' ) }
/>
}
>
< ItemText title = " Item 3 " subText = " Description 3 " />
</ List.Item >
< List.Item
startElement = {
< EntityAvatar type = " Organisation " name = " Item 4 " size = " small " inactive />
}
endElement = {
< Button
variant = " text "
label = " Reactivate "
size = " small "
onClick = { ( ) => alert ( 'Reactivate' ) }
/>
}
>
< ItemText
title = " Item 4 "
subText = " Description 4 "
superText = " Inactive state "
/>
</ List.Item >
</ List >
Disabled items
< List >
< List.Item
startElement = {
< EntityAvatar
type = " Organisation "
name = " Item 2 "
size = " small "
inactive = { true }
/>
}
endElement = { < Badge label = " Inactive " tone = " neutral " /> }
disabled = { true }
>
< ItemText
title = " Disabled button "
subText = " Description 2 "
superText = " Disabled "
disabled = { true }
/>
</ List.Item >
< List.Item
href = " # "
startElement = {
< EntityAvatar
type = " Organisation "
name = " Item 3 "
size = " small "
inactive = { true }
/>
}
endElement = { < Badge label = " Inactive " tone = " neutral " /> }
disabled = { true }
>
< ItemText
title = " Disabled link "
subText = " Description 3 "
superText = " Disabled "
disabled = { true }
/>
</ List.Item >
< List.Item
href = " # "
startElement = {
< EntityAvatar type = " Organisation " name = " Item 0 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText
title = " Enabled link "
subText = " Description 0 "
superText = " Enabled "
/>
</ List.Item >
< List.Item
onClick = { ( ) => alert ( 'Item 1' ) }
startElement = {
< EntityAvatar type = " Organisation " name = " Item 1 " size = " small " />
}
endElement = { < Badge label = " Active " tone = " positive " /> }
>
< ItemText
title = " Enabled button "
subText = " Description 1 "
superText = " Enabled "
/>
</ List.Item >
</ List >
