List Component (WIP)

[muratcorlu]

This is an ADR proposal for web implementation of our List Component

Design

Figma Document

Rules

From the design meeting report:

• List component will be a generic component for listing same kind of data/menu/options.
• This component can be used as an atom in many places like select options, dropdown menu or navigation menus.
• Basic list item will have only a free content area that user can put whatever they need (a simple text or custom product card etc)
• List component can be optionally "selectable". In this case list items will have a checkbox and user will able to select one or some list item(s) for further actions.
• List component can be optionally used for navigations. In this case there will be a visual indicator (right arrow) and clicking this button (or whole item, will be desided in design phase) to navigate to another screen.
• Dividers and gaps between list items will be customisable (with some options or freely, will be decided in design phase)
• Highlight and selected styles will be set for list items.
• List item can have more optional slots (like an image/icon, a caption and a description). These will be decided in design phase. In every case, free content area always will be present in the remaining area.
• Optionally a list of actions can be defined per list item either as a dropdown menu or as sliding actions (a swipe menu). Sliding actions can be done in future phases.

Implementation

Use list as a simple navigation:

<bl-list>
  <bl-list-item href="#">Menu 1</bl-list-item>
  <bl-list-item href="#">Menu 2</bl-list-item>
</bl-list>

Or an action list:

<bl-list>
  <bl-list-item button>Menu 1</bl-list-item>
  <bl-list-item button>Menu 2</bl-list-item>
</bl-list>

A nested list:

<bl-list>
  <bl-list-item button>Menu 1</bl-list-item>
  <bl-list-item button>Menu 2
     <bl-list>
        <bl-list-item>Menu 2.1</bl-list-item>
        <bl-list-item>Menu 2.2</bl-list-item>
     </bl-list>
  </bl-list-item>
</bl-list>

A complex product list:

<bl-list>
  <bl-list-item>
     <bl-checkbox slot="select" label="Select T-Shirt"></bl-checkbox>
     <img slot="start" src="/product/image.jpg">
     <h3 slot="caption">T-Shirt</h3>
     <dl>
         <dt>Size:</dt>
         <dd>Medium</dd>
     </dl>
     <bl-dropdown slot="end" label="Product Actions" icon="three_dots">
           <bl-dropdown-item>Edit</bl-dropdown-item>
           <bl-dropdown-item>Delete</bl-dropdown-item>
     </bl-dropdown>
  </bl-list-item>
  ....
</bl-list>

API Reference:

bl-list component

List component is the wrapper of bl-list-item components.

Attributes

Attribute	Description	Default Value
selectable (boolean)	Sets table rows to be selectable	false
select-value (array of strings)	Selected rows index value as string	null

Slots

Name	Description	Default Content
default slot	List of bl-table-column components	-

CSS Custom Properties

Attribute	Description	Default Value
--bl-list-gap	Sets the gap between list-items	0
--bl-list-padding	Sets the padding of list container	0

List background will be transparent by default to allow developers to freely set a background color.

bl-list-item component

Attributes

Attribute	Description	Default Value
href (string)	A URL to navigate. If it's provided item will be rendered as anchor element	undefined
button (boolean)	If set item will be rendered as clickable	false
detail (boolean)	If set a detail icon (an arrow by default) will be shown	true if href or button is true or a nested bl-list is provided

Slots

Name	Description	Default Content
default slot	Default free content	-
select slot	Accepts a bl-checkbox or a bl-radio component to make item "selectable"	-
start slot	A slot to put content (an image) before the default slot	-
end slot	A slot to put content (a dropdown button) after the default slot	-
caption slot	A slot to put content above the default slot	-

CSS Custom Properties

Attribute	Description	Default Value
--bl-list-item-padding	Sets the padding of list item container	--bl-size-m

List item background will be transparent by default to allow developers to freely set a background color.

[ozkersemih]

Firstly, thanks for your great effort!

I think we should support some cases with example designs. For example nested structure can be more clear. I wonder what will the components behaviour with nested structure. Nested parts displayed default or optional or we can see them with click action? Maybe I am missing something about that. @muratcorlu