Support secondary text in ListItem widget

src/examples/src/config.tsx

@@ -106,7 +106,8 @@ import FillList from './widgets/list/Fill';
 import DividedList from './widgets/list/Dividers';
 import ControlledList from './widgets/list/Controlled';
 import ItemRenderer from './widgets/list/ItemRenderer';
-import ListItemRenderer from './widgets/list/ListItemRenderer';
+import ListItem from './widgets/list/ListItem';
+import TwoLineListItem from './widgets/list/TwoLineListItem';
 import FetchedResource from './widgets/list/FetchedResource';
 import DisabledList from './widgets/list/Disabled';
 import DraggableList from './widgets/list/Draggable';
@@ -1072,9 +1073,14 @@ export const config = {
  title: 'Item Renderer'
  },
  {
- filename: 'ListItemRenderer',
- module: ListItemRenderer,
- title: 'ListItem Renderer'
+ filename: 'ListItem',
+ module: ListItem,
+ title: 'Single Line ListItem'
+ },
+ {
+ filename: 'TwoLineListItem',
+ module: TwoLineListItem,
+ title: 'Two Line ListItem'
  },
  {
  description:

src/examples/src/widgets/list/ListItemRenderer.tsx → src/examples/src/widgets/list/ListItem.tsx

@@ -1,13 +1,13 @@
 import { create, tsx } from '@dojo/framework/core/vdom';
 import List, { ListItem } from '@dojo/widgets/list';
-import Icon from '@dojo/widgets/icon';
 import states from './states';
 import icache from '@dojo/framework/core/middleware/icache';
 import Example from '../../Example';
 import {
  createResourceTemplate,
  createResourceMiddleware
 } from '@dojo/framework/core/middleware/resources';
+import Icon from '@dojo/widgets/icon';
 
 const resource = createResourceMiddleware();
 const factory = create({ icache, resource });

src/examples/src/widgets/list/TwoLineListItem.tsx

@@ -0,0 +1,44 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import List, { ListItem } from '@dojo/widgets/list';
+import Avatar from '@dojo/widgets/avatar';
+import states from './states';
+import icache from '@dojo/framework/core/middleware/icache';
+import Example from '../../Example';
+import {
+ createResourceTemplate,
+ createResourceMiddleware
+} from '@dojo/framework/core/middleware/resources';
+import Icon from '@dojo/widgets/icon';
+
+const resource = createResourceMiddleware();
+const factory = create({ icache, resource });
+const template = createResourceTemplate<typeof states[0]>('value');
+
+export default factory(function ListItemRenderer({ id, middleware: { icache, resource } }) {
+ return (
+ <Example>
+ <List
+ resource={resource({
+ template: template({ id, data: states }),
+ transform: { value: 'value', label: 'value' }
+ })}
+ onValue={(value) => {
+ icache.set('value', value);
+ }}
+ itemsInView={8}
+ >
+ {({ label }, props) => (
+ <ListItem {...props}>
+ {{
+ leading: <Avatar>{label[0]}</Avatar>,
+ primary: label,
+ secondary: `This state's name has ${label.length} letters`,
+ trailing: <Icon type="starIcon" />
+ }}
+ </ListItem>
+ )}
+ </List>
+ <p>{`Clicked On: ${JSON.stringify(icache.getOrSet('value', ''))}`}</p>
+ </Example>
+ );
+});

src/list/index.tsx

@@ -110,6 +110,8 @@ export interface ListItemChildren {
  leading?: RenderResult;
  /** The main content of the item, typically text */
  primary?: RenderResult;
+ /** The further details about the item to display below the primary content, typically text */
+ secondary?: RenderResult;
  /** Icon or text to place after the primary content */
  trailing?: RenderResult;
 }
@@ -154,9 +156,12 @@ export const ListItem = listItemFactory(function ListItem({
  }
 
  const [firstChild, ...otherChildren] = children();
- const { leading = undefined, primary, trailing = undefined } = isRenderResult(firstChild)
- ? { primary: [firstChild, ...otherChildren] }
- : firstChild;
+ const {
+ leading = undefined,
+ primary,
+ secondary = undefined,
+ trailing = undefined
+ } = isRenderResult(firstChild) ? { primary: [firstChild, ...otherChildren] } : firstChild;
 
  return (
  <div
@@ -169,6 +174,7 @@ export const ListItem = listItemFactory(function ListItem({
  theme.variant(),
  themedCss.root,
  themedCss.height,
+ Boolean(secondary) && themedCss.twoLine,
  selected && themedCss.selected,
  active && themedCss.active,
  disabled && themedCss.disabled,
@@ -194,7 +200,10 @@ export const ListItem = listItemFactory(function ListItem({
  styles={{ visibility: dragged ? 'hidden' : undefined }}
  >
  {leading ? <span classes={themedCss.leading}>{leading}</span> : undefined}
- <span classes={themedCss.primary}>{primary}</span>
+ <span classes={themedCss.text}>
+ {primary}
+ {secondary ? <span classes={themedCss.secondary}>{secondary}</span> : undefined}
+ </span>
  {trailing ? <span classes={themedCss.trailing}>{trailing}</span> : undefined}
  {draggable && !trailing && (
  <Icon

src/list/tests/ListItem.spec.tsx

@@ -8,6 +8,7 @@ const { describe, it, after } = intern.getInterface('bdd');
 
 const noop: any = () => {};
 const WrappedRoot = wrap('div');
+const WrappedText = wrap('span');
 
 describe('ListBoxItem', () => {
  const template = assertion(() => (
@@ -21,6 +22,7 @@ describe('ListBoxItem', () => {
  false,
  false,
  false,
+ false,
  undefined,
  undefined,
  undefined,
@@ -42,7 +44,7 @@ describe('ListBoxItem', () => {
  visibility: undefined
  }}
  >
- <span classes={css.primary}>test</span>
+ <WrappedText classes={css.text}>test</WrappedText>
  </WrappedRoot>
  ));
  const disabledTemplate = template
@@ -52,6 +54,7 @@ describe('ListBoxItem', () => {
  css.height,
  false,
  false,
+ false,
  css.disabled,
  undefined,
  undefined,
@@ -93,6 +96,38 @@ describe('ListBoxItem', () => {
  );
  });
 
+ it('renders with secondary text', () => {
+ const r = renderer(() => (
+ <ListItem widgetId="test" onRequestActive={noop} onSelect={noop}>
+ {{
+ primary: 'test',
+ secondary: 'Less important'
+ }}
+ </ListItem>
+ ));
+ r.expect(
+ template
+ .setProperty(WrappedRoot, 'classes', [
+ undefined,
+ css.root,
+ css.height,
+ css.twoLine,
+ false,
+ false,
+ false,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ undefined
+ ])
+ .replaceChildren(WrappedText, () => [
+ 'test',
+ <span classes={css.secondary}>Less important</span>
+ ])
+ );
+ });
+
  it('renders selected', () => {
  const r = renderer(() => (
  <ListItem widgetId="test" selected onRequestActive={noop} onSelect={noop}>
@@ -104,6 +139,7 @@ describe('ListBoxItem', () => {
  undefined,
  css.root,
  css.height,
+ false,
  css.selected,
  false,
  false,
@@ -137,6 +173,7 @@ describe('ListBoxItem', () => {
  css.root,
  css.height,
  false,
+ false,
  css.active,
  false,
  undefined,
@@ -161,6 +198,7 @@ describe('ListBoxItem', () => {
  false,
  false,
  false,
+ false,
  css.movedUp,
  undefined,
  undefined,
@@ -183,6 +221,7 @@ describe('ListBoxItem', () => {
  false,
  false,
  false,
+ false,
  undefined,
  css.movedDown,
  undefined,
@@ -205,6 +244,7 @@ describe('ListBoxItem', () => {
  false,
  false,
  false,
+ false,
  undefined,
  undefined,
  css.collapsed,
@@ -228,6 +268,7 @@ describe('ListBoxItem', () => {
  false,
  false,
  false,
+ false,
  undefined,
  undefined,
  undefined,
@@ -253,6 +294,7 @@ describe('ListBoxItem', () => {
  false,
  false,
  false,
+ false,
  undefined,
  undefined,
  undefined,
@@ -288,6 +330,7 @@ describe('ListBoxItem', () => {
  false,
  false,
  false,
+ false,
  undefined,
  undefined,
  undefined,

src/theme/default/list-item.m.css

@@ -12,6 +12,10 @@
 .height {
 }
 
+/* Added to ListItem with primary and secondary text */
+.twoLine {
+}
+
 /* Added to selected items */
 .selected {
  background: lightgrey;
@@ -58,8 +62,12 @@
 .dragIcon {
 }
 
-/* Wrapper for the main content of the item */
-.primary {
+/* Wrapper for the main text of the item */
+.text {
+}
+
+/* Wrapper for the secondary text of the item */
+.secondary {
 }
 
 /* Wrapper for the leading content in front of the primary content */

src/theme/default/list-item.m.css.d.ts

@@ -1,5 +1,6 @@
 export const root: string;
 export const height: string;
+export const twoLine: string;
 export const selected: string;
 export const active: string;
 export const disabled: string;
@@ -9,6 +10,7 @@ export const movedUp: string;
 export const movedDown: string;
 export const dragged: string;
 export const dragIcon: string;
-export const primary: string;
+export const text: string;
+export const secondary: string;
 export const leading: string;
 export const trailing: string;

src/theme/dojo/list-item.m.css

@@ -27,6 +27,10 @@
  font-style: italic;
 }
 
+.disabled .leading {
+ font-style: normal;
+}
+
 .root.movedUp {
  padding-bottom: calc(var(--grid-base) * 6.5);
 }
@@ -51,10 +55,16 @@
  right: var(--grid-base);
 }
 
-.primary {
+.text {
  flex-grow: 1;
 }
 
+.secondary {
+ margin-left: var(--grid-base);
+ font-size: 0.875rem;
+ color: var(--color-text-faded);
+}
+
 .leading {
  margin-right: var(--grid-base);
 }

src/theme/dojo/list-item.m.css.d.ts

@@ -2,10 +2,11 @@ export const root: string;
 export const active: string;
 export const selected: string;
 export const disabled: string;
+export const leading: string;
 export const movedUp: string;
 export const movedDown: string;
 export const collapsed: string;
 export const dragIcon: string;
-export const primary: string;
-export const leading: string;
+export const text: string;
+export const secondary: string;
 export const trailing: string;