List adding static section headers

Summary

• Enhance list to be able to add static section-headers as list-items into each of the existing list components (list, SelectableList, SingleSelectList, MultiSelectList).
• will be fully themeable using existing patterns
• will be similar/related to #1270 stand-alone Section Header

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Screenshot of new static section headers to add (visual details provided separately):

---

Tech Design terra-list

React Props:

New API:

Sections-API Props:

Prop Name	Type	Is Required	Default Value	Description
title	string	optional	""	The header text of each section.
listItems	node	optional	[]	The children list items passed to the component.

Modifications to existing API:

Selectable-List-Index props

Children of Selectable-List can take array of sections

Prop Name	Type	Is Required	Default Value	Description
children	node	optional	[]	The children list items or children sections passed to the component.
isDivided	bool	optional	false	Whether or not the child list items should have a border color applied.
disableUnselectedItems	bool	optional	false	Whether or not unselected items should be disabled. Helpful for enabling max row selection.
hasChevrons	bool	optional	false	Whether or not the child list items has a disclosure indicator presented. The behavior is intended to be used with a single selection style list, as multi selection style list should not perform disclosures.
onChange	func	optional	undefined	A callback event that will be triggered when selection state changes.
selectedIndexes	array	optional	[]	An array of the currectly selected indexes.

Single-Select-Index Props:

New prop hasSections has been added to specify, if sections exist or not

Prop Name	Type	Is Required	Default Value	Description
children	node	optional	[]	The children list items passed to the component.
isDivided	bool	optional	false	Whether or not the child list items should have a border color applied.
hasChevrons	bool	optional	false	Whether or not the child list items has a disclosure indicator presented.
onChange	func	optional	undefined	A callback event that will be triggered when selection state changes.
hasSections	bool	optional	false	Whether or not the child items should be displayed in sections with header and list of elements.

Multi-Select-Index Props

New prop hasSections has been added to specify, if sections exist or not

Prop Name	Type	Is Required	Default Value	Description
children	bool	optional	false	Whether or not the child list items should have a border color applied.
onChange	func	optional	undefined	A callback event that will be triggered when selection state changes.
maxSelectionCount	number	optional	undefined	The maximum number of list items that can be selected.
hasSections	bool	optional	false	Whether or not the child items should be displayed in sections with header and list of elements.

Themeable Styles:

will be fully themeable using existing patterns

Responsiveness:

Upon interaction, the state of selection needs to be updated.

Interaction States:

Should function the same as the exisiting terra-list with SingleSelectList and MultiSelectList across the sections and remember the state across the section.

Accessibility:

Should have the standard accessibility features like keyboard navigation and selection across multiple sections.

i18N / Bi-directionality:

This component must be able to be rendered with its mirror-imaged equivalent for rtl locales.

Example:

MultiSelect Sections

const MultiSelectSections = () => (
  <MultiSelectList hasSections>
    <MultiSelectList.Section
      title="Header 1"
      listItems={[
        <MultiSelectList.Item isSelectable content={<p>test1</p>} key="123" />,
        <MultiSelectList.Item isSelectable content={<p>test2</p>} key="124" />,
        <MultiSelectList.Item isSelectable content={<p>test3</p>} key="125" />,
      ]}
    />
    <MultiSelectList.Section
      title="Header 2"
      listItems={[
        <MultiSelectList.Item isSelectable content={<p>test1</p>} key="126" />,
        <MultiSelectList.Item isSelectable content={<p>test2</p>} key="127" />,
        <MultiSelectList.Item isSelectable content={<p>test3</p>} key="128" />,
      ]}
    />
  </MultiSelectList>
);

Single Select Sections

const SingleSelectSections = () => (
  <SingleSelectList hasSections>
    <SingleSelectList.Section
      headerContent="Header 1"
      listItems={[
        <SingleSelectList.Item isSelectable content={<p>test1</p>} key="123" />,
        <SingleSelectList.Item isSelectable content={<p>test2</p>} key="124" />,
        <SingleSelectList.Item isSelectable content={<p>test3</p>} key="125" />,
      ]}
    />
    <SingleSelectList.Section
      headerContent="Header 2"
      listItems={[
        <SingleSelectList.Item isSelectable content={<p>test1</p>} key="126" />,
        <SingleSelectList.Item isSelectable content={<p>test2</p>} key="127" />,
        <SingleSelectList.Item isSelectable content={<p>test3</p>} key="128" />,
      ]}
    />
  </SingleSelectList>
);

Notes:

Section API is going to take Acordian props while developing Issue#1321.

Issue#1321 will address the expand collapse functionality, with accordion iconography, decorative icon, notification icon and count.

Changes:

• SingleSelectList has a new prop hasSections
• MultiSelectList has a new prop hasSections
• Children for both SingleSelectList and MultiSelectList will take List of Section’s

Questions:

(add if needed)

[emilyrohrbough]

Can you call out the changes/additions to the props listed under the Modifications to existing API section?

[mjhenkes]

+1