A blocklist is a container for presenting a vertical list of content.
A blocklist presents a structured list of items for a user to choose from, such as links, buttons, or other items. Blocklists can also contain text, and various other components in additon to the main list content.
Most dropdowns present the user a blocklist of links when clicked.
Header
Headers can help group content rows to indicate logical or related groupings of list items.
Target Link
Target links are a link in the header that allow users to take an action that's related to all the content in the list, like the "View All" link for a list of audiences.
Inner Button
Buttons are used in-line to allow users to take an action on the specific item in the list, such as "View" or "Edit."
Example
Properties
"BlockList.Item" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| gutters | oneOf 'loose' | 'tight' | - | 'loose' | Determines level of padding of item |
| children | node | yes | - | String or JSX that appears within the component |
| href | string | - | - | URL to navigate to when clicking on the item |
| hrefTarget | oneOf '_self' | '_blank' | - | - | Target that the link, if provided, should open in |
| hrefTitle | string | - | - | Sets the `title` attribute on an `href` |
| isDisabled | bool | - | - | Disable the item |
| onClick | func | - | - | Function that is run when clicking on the item |
| onMouseDown | func | - | - | Function that is run when mouse-down event is fired on the item |
| testSection | string | - | - | Hook for automated JavaScript tests |
"BlockList.Category" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| children | node | yes | - | Items that appears within the category |
| header | node | - | - | Node or component that appears above the `children` |
| testSection | string | - | - | Hook for automated JavaScript tests |
"BlockList" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| hasBorder | bool | - | true | Should the `BlockList` contain a border on all sides |
| children | node | yes | - | Should be subcomponents of `BlockList` |
| maxHeight | number | string | - | - | The max height of the `BlockList`. Pixels will be assumed if no unit is provided. |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Block list should be used to display an unlabeled list. It's used both as a stand-alone content component and a sub component within other components (like Filter Picker or Dropdown.)
Best Practices
Do
Include scroll bars when the list is too long
Separate logical groups of content in the list with line separators
Don't
Don't use with only text, make sure to include links or other list oriented content
Don't wrap the text of links