Quick nav

List

Lists render possible actions or selectable options for a given element. This component is usually placed under a kebab menu icon.

Version 0.10.0

Installation

To install @igloo-ui/list in your project, you will need to run the following command using npm:

npm install @igloo-ui/list

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/list

Usage

Then to use the component in your code just import it!

import List from '@igloo-ui/list';

const optionList = [
  {
    type: 'list',
    label: 'Item 1',
    value: '1',
    description: 'just adding some description',
  },
  {
    type: 'list',
    label: 'Item 2 (disabled)',
    value: '2',
    disabled: true,
  },
  {
    type: 'list',
    label: 'Item 3 (focused)',
    value: '3',
    description: 'just adding some description',
  },
  {
    type: 'list',
    label: 'Item 4 (selected)',
    value: '4',
  },
  {
    type: 'list',
    label: 'Item 5',
    value: '5',
    color: '#74DCC9',
  },
];

const [selectedOption, setSeletedOption] = React.useState(optionList[3]);
const [focusedOption, setFocusedOption] = React.useState(optionList[2]);

function handleOptionSelect(option) {
  setSeletedOption(option);
}

function handleOptionFocus(option) {
  setFocusedOption(option);
}

<List
  options={optionList}
  onOptionChange={handleOptionSelect}
  onOptionFocus={handleOptionFocus}
  selectedOption={selectedOption}
  focusedOption={focusedOption}
/>;

API

List

Prop	Type	Default	Description
`className`	string	-	Add a specific class to the Select
`dataTest`	string	-	Add a data-test tag for automated tests
`disableTabbing`	boolean		Whether or not to disable tabbing of list items
`focusedOption`	OptionType	-	The option that is currently being focused or hovered
`isCompact`	boolean		True for a compact appearance (Corresponds to "small" in Figma for compact, and "medium" for non-compact)
`loading`	boolean	-	Whether or not the list is loading
`multiple`	boolean	-	The List gains checkboxes beside each option to be able to select multiple options
`onOptionFocus`	(option: OptionType) => void	-	Called when an option becomes focused or hovered
`onOptionChange`	(option: OptionType, e?: SyntheticEvent<Element, Event>) => void	-	Called when an option is selected
`onOptionBlur`	(option: OptionType) => void	-	Called when the mouse moves outside of the option or the option loses focus
`options`	OptionType[]	-	A list of options
`selectedOption`	OptionType \| OptionType[]	-	The initial selected option or a list of selected options
`showIcon`	boolean		Whether or not to show the icon inside the list if it's available

ListItem

Prop	Type	Default	Description
`className`	string	-	Add a specific class to the Select
`disableTabbing`	boolean		Whether or not to disable tabbing of list items
`isCompact`	boolean		True for a compact appearance
`isFocused`	boolean		If the option is focused/hovered
`isSelected`	boolean		If the option is selected
`loading`	boolean	-	Whether or not the list is loading
`onOptionFocus`	(option: OptionType) => void	-	Called when an option becomes focused or hovered
`onOptionChange`	(option: OptionType, e?: SyntheticEvent<Element, Event>) => void	-	Called when an option is selected
`onOptionBlur`	(option: OptionType) => void	-	Called when the mouse moves outside of the option or the option loses focus
`option`	OptionType	-	A list of options
`optionKey`	string	-	The option key that should be set when an option is not set
`showIcon`	boolean		Whether or not to show the icon if it's available
`useCheckbox`	boolean	-	Use a checkbox to show selected state